現在のエクスペリエンスビルダーサイトに関する情報の取得

範囲設定されたモジュール @salesforce/community および @salesforce/site から現在のエクスペリエンスビルダーサイトに関する情報をインポートします。

@salesforce/community または @salesforce/site をインポートしたコンポーネントは、エクスペリエンスビルダーページのみを対象にできます。他の Salesforce コンテナでコンポーネントを使用することはできません。「エクスペリエンスビルダーのコンポーネントの設定」を参照してください。

Important

エクスペリエンスビルダーサイトは、ネットワークオブジェクトとサイトオブジェクトから構成されています。ネットワークオブジェクトには、メールやメンバーシップの設定などの管理設定が、サイトオブジェクトにはドメインとページの設定情報が含まれています。@salesforce/community モジュールを使用すると、サイトのネットワーク部の ID を取得できます。一方、@salesforce/site モジュールを使用すると、サイト部の ID を取得できます。

@salesforce/community

@salesforce/community から現在のエクスペリエンスビルダーサイトのネットワーク ID とベースパスをインポートします。

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

property — サポートされるプロパティは次のとおりです。
- Id — 現在のサイトの ID。たとえば、API にパラメータとして渡す ID をインポートします。
- basePath — ベースパスは、ドメインの後に続くサイトの URL のセクションです。サイトドメイン名が UniversalTelco.force.com で、サイトを作成したときに追加された URL 値が myPartnerSite の場合、サイトの URL は UniversalTelco.force.com/myPartnerSite/s です。この場合、myPartnerSite/s がベースパスです。
  
  たとえば、複数のサイトで機能するリンクコンポーネントを作成するには、ベースパスをインポートし、それを使用して完全なサイト URL を動的に作成します。
propertyName — インポートされたエクスペリエンスビルダープロパティを参照する名前。

このサンプルコードでは、現在のサイトのすべてのフィード項目を返す Apex コントローラをコールします。

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}

Apex コントローラは、コミュニティ ID を取得して、フィード結果がそのサイトに限定されるようにします。

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

@salesforce/site から現在のエクスペリエンスビルダーサイトのサイト ID と有効な言語のリストをインポートします。

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

property — サポートされるプロパティは次のとおりです。
- Id — 現在のサイトの ID。たとえば、API にパラメータとして渡す ID をインポートします。
- activeLanguages — エクスペリエンスビルダーサイトの有効な言語のリストには、デフォルトのサイト言語とその他のすべての有効な言語に関するメタデータが含まれています。エクスペリエンスビルダーのサイトの言語は、[設定] | [言語] で設定できます。無効な言語はリストから除外されます。戻り値は言語オブジェクトの配列です。各オブジェクトには、言語の表示ラベルとコード (en-US など) が含まれています。配列はラベルのアルファベット順に並び替えられます。
propertyName — インポートされたエクスペリエンスビルダープロパティを参照する名前。

次のサンプルコードでは、言語セレクタコンポーネントで activeLanguages が使用されています。

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}

次のコンポーネントでは、lightning-combobox を使用してドロップダウン言語ピッカーが表示されます。

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

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。