12

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.

4 Answers 4

10

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!

2
  • 2
    Link only answers can break over time and are not very valuable to the community. If your link answers the question, please add the relevant content here. Just imagine if the link were removed or broke, your question should still hold up.
    – Adrian Larson
    Feb 9, 2017 at 15:28
  • I looked at your blog post, and I think it's a pretty good solution. Why don't you edit your answer to include that content (in addition to the link). Feb 9, 2017 at 15:41
5

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.

Property Editor

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
}
2

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.

2
  • Interesting thought. Just quickly tested it, Community gives Theme3, which is the Salesforce Classic 2010 user interface theme. Not sure yet if I prefer this solution to the solution with attribute, because using this Lightning Component in SF classic would also give Theme3.
    – Folkert
    Oct 5, 2016 at 10:09
  • Yes, this is strange, it seems like Salesforce needs to add another UI Theme for the community container. Oct 5, 2016 at 11:15
2

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 enter image description here

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

enter image description here

1
  • It's similar to the way we solved it back then, but then using a LWC instead of Aura. +1
    – Folkert
    Jul 29, 2022 at 11:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .