Get Information About the Current Experience Builder Site

Import information about the current Experience Builder site from the @salesforce/community and @salesforce/site scoped modules.

If a component imports @salesforce/community or @salesforce/site, it can target only an Experience Builder page. You can’t use the component in any other Salesforce container. See Configure a Component for Experience Builder.

Important

An Experience Builder site is composed of a Network object that contains administration settings, such as email and membership configurations, and a Site object that contains domain and page setting information. Using the @salesforce/community module, you can retrieve the ID of the network part of the site, whereas the @salesforce/site module lets you retrieve the ID of the site part.

@salesforce/community

Import the network ID and base path of the current Experience Builder site from @salesforce/community.

1import propertyName from "@salesforce/community/property";

property—The supported properties are:
- Id—The ID of the current site. For example, import the ID to pass as a parameter to an API.
- basePath—The base path is the section of the site’s URL that comes after the domain. So if your site domain name is UniversalTelco.force.com and myPartnerSite was the URL value added when you created the site, the site’s URL is UniversalTelco.force.com/myPartnerSite/s. In this case, myPartnerSite/s is the base path.
  
  For example, to build a link component that works across several sites, import the base path and use it to dynamically construct the full site URL.
propertyName—A name that refers to the imported Experience Builder property.

This sample code calls an Apex controller that returns all the feed items for the current site.

1// miscGetCommunityId.js
2import { LightningElement } from "lwc";
3import Id from "@salesforce/community/Id";
4import getFeedElementPageForCommunity from "@salesforce/apex/CommunityFeedController.getFeedElementPageForCommunity";
5
6export default class CommunityFeedElementPage extends LightningElement {
7  @wire(getFeedElementPageForCommunity, { networkId: "$Id" })
8  feedElementPage;
9}

The Apex controller takes a community ID to ensure that the feed result is scoped to that site.

1// CommunityFeedController.apex
2public with sharing class CommunityFeedController {
3    @AuraEnabled(cacheable=true)
4    public static ConnectApi.FeedElementPage getFeedElementPageForCommunity(String networkId) {
5    return ConnectApi.ChatterFeeds.getFeedElementsFromFeed(networkId, ConnectApi.FeedType.UserProfile,
6        'me', 3, ConnectApi.FeedDensity.FewerUpdates, null, null,
7        ConnectApi.FeedSortOrder.LastModifiedDateDesc, ConnectApi.FeedFilter.CommunityScoped);
8    }
9}

@salesforce/site

Import the site ID and the list of active languages of the current Experience Builder site from @salesforce/site.

1import propertyName from "@salesforce/site/property";

property—The supported properties are:
- Id—The ID of the current site. For example, import the ID to pass as a parameter to an API.
- activeLanguages—The list of active languages in your Experience Builder site includes metadata on the default site language and all other active languages. You can configure a site’s languages in Experience Builder in Settings | Languages. Inactive languages are excluded from the list. The return value is an array of language objects, where each object includes the language’s label and the code, such as en-US. The array is sorted alphabetically by the label.
propertyName—A name that refers to the imported Experience Builder property.

This sample code uses activeLanguages in a language selector component.

1// languagePicker.js
2// Sample data: [{ code: 'en-US', label: 'English (US)' },{ code: 'fr', label: 'Françias' }]
3import activeLanguages from "@salesforce/site/activeLanguages";
4
5import { LightningElement } from "lwc";
6import currentLanguage from "@salesforce/i18n/lang";
7import basePath from "@salesforce/community/basePath";
8
9export default class LanguagePicker extends LightningElement {
10  get options() {
11    return activeLanguages.map((x) => ({ value: x.code, ...x }));
12  }
13
14  get currentValue() {
15    return currentLanguage;
16  }
17
18  handleLanguageSelect(evt) {
19    const selectedLanguageCode = evt.detail.value;
20    // locale is in base path and needs to be replaced with new locale
21    const newBasePath = this.updateLocaleInBasePath(
22      basepath,
23      currentLanguage,
24      selectedLanguageCode,
25    );
26
27    const currentUrl = window.location.pathname;
28    if (currentUrl) {
29      const restOfUrl = currentUrl.substring(basepath.length);
30      window.location.href = window.location.origin + newBasePath + restOfUrl;
31    } else {
32      // WARNING: this is a current limitation of Lightning Locker in LWR sites
33      // Locker must be disabled to reference the global window object
34      console.warn(
35        "Lightning Locker must be disabled for this language picker component to redirect",
36      );
37    }
38  }
39
40  updateLocaleInBasePath(path, oldLocale, newLocale) {
41    if (path.endsWith("/" + oldLocale)) {
42      // replace with new locale
43      return path.replace(new RegExp("/" + oldLocale + "$"), "/" + newLocale);
44    } else {
45      // since the default locale is not present in the base path,
46      // append the new locale
47      return path + "/" + newLocale;
48    }
49  }
50}

The component displays a dropdown language picker using lightning-combobox.

1<!-- languagePicker.html -->
2<template>
3    <lightning-combobox
4        options={options}
5        value={currentValue}
6        onchange={handleLanguageSelect}
7    ></lightning-combobox>
8</template>

See Also