Does a Lightning Component know if it is in a Community or a standard Lightning Salesforce page?

Question

Title says it all. Does a Lightning Component know if it is in a Community or a standard Lightning Salesforce page?

I have a component that implements both the interface for Community as Standard Lightning: <aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes,force:hasRecordId" />

I want this component to behave differently depending on if it is on the Community or in standard Lightning. I can solve this by adding an attribute to the component and setting it through the property editor in the Lightning App Builder/Community Builder. But I'm wondering if I can solve this without this attribute.

Answer 1

I have made a blog about how to resolve this issue without having to add a design attribute. Link: http://kevansfdc.blogspot.com/2017/02/does-lightning-component-know-if-it-is.html

The solution I propose is to use a aura enabled method which return whether you are in a site context using the Site class that come natively with Salesforce.

@AuraEnabled
public static boolean isCommunity(){
    Id siteId = Site.getSiteId(); // take a look at the apex class Site, you may find more useful method concerning site/community
    if (siteId != null) {
        return true;
    }
    return false;
}

And simply calling this method through an action in Lightning.

var action = component.get("c.isCommunity");
action.setCallback(this, function(response) {
var isCommunity = response.getReturnValue(); // do any operation needed here
});
$A.enqueueAction(action);

Hope this is useful as an answer. Cheers!

Answer 2

We ended up going for the attribute/property editor route.

Component:

<aura:attribute name="environmentType" type="String" description="This variable is used to indicate which environment this component is displayed on, f.i. community vs standard lightning" />

Design file:

<design:attribute name="environmentType" label="Environment Type" datasource="Community,Standard" required="true" description="Please indicate which environment this component is hosted on."/>

Use the property editor in the Lightning App Builder to set the attribute to the right value for the environment it is on.

Then in your controller/helper you can check which environment the component is viewed on.

var environment = component.get('v.environmentType');
if (environment == 'Community') {
    // Do Community logic
} else if (environment == 'Standard') {
    // Do Standard Lightning logic
}

Answer 3

You can use the UI Theme to check which theme you are on right now:

Introducing UI Theme Detection for Lightning

I do not know which theme is for community - maybe the PortalDefault.

Answer 4

A bit late for the party but this how I solved this issue:

Assumption, you have created a Custom LWC component, in this example you'll see different URL's for Standard and Community pages.

Let's start by adding a property line named environment to file to the custom component js-metadata, save & deploy it:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" label="Record ID" description="Should be set to {!recordId}"/>
            <property name="environment" type="String" label="Environment" description="Variable to define if the page is Community" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Second, add the variable to your custom component JS file:

@api environment;

Third, right after the variable environment, will add the code to create different URLs

baseUrl = window.location.origin + '/';

connectedCallback(){
    if(this.environment === 'Community'){
        this.baseUrl = window.location.origin + '/' + 'opportunitylineitem' + '/';
    }
}

Both variables will be in the same file so, save & deploy it.

Fourth, we need to set the variable under the Community Page:

• Navigate to Setup > Feature Settings > All Sites > Select your website by clicking on Builder next to its name

• Builder will open, under Home click on it and find your custom component

• Select your Custom LWC and fill out Environment variable: Community. After that change no need to save, just Publish your Portal.