FlexCard の有効化と公開

学習の目的

この単元を完了すると、次のことができるようになります。

• 有効化された FlexCard のパブリッシュオプションを説明する。
• FlexCard Lightning Web コンポーネントを Lightning ページに追加する。
• FlexCard Lightning Web コンポーネントをエクスペリエンスページに追加する。
• Lightning ページとエクスペリエンスページの標準 FlexCard コンポーネントを有効化する。

有効化された FlexCard の公開オプション

FlexCard を有効化すると、Lightning ページやコミュニティページに公開可能な Lightning Web コンポーネント (LWC) を生成できます。[Publish Options (公開オプション)] を設定することで、FlexCard Lightning Web コンポーネントを公開できるページ、またそのページで利用可能なコンポーネントのリストに Lightning Web コンポーネントが表示される場合の名前を決定します。(メモ: 有効な FlexCard で要素を追加または編集することはできません。)

上の画像を参考にして、[Publish Options (公開オプション)] の項目を詳しく見てみましょう。この FlexCard の [Publish Options (公開オプション)] では、この FlexCard が [teamAccount] (1) という親であり、アクセス可能な [Targets (公開先)] (6) が [App Page (アプリケーションページ)]、[Home Page (ホームページ)]、[Record Page (レコードページ)] であることが示されています。FlexCard は、コミュニティページ、およびプロパティを設定可能なコミュニティページ「コミュニティデフォルト」でもアクセス可能です。

注目すべき公開オプションは以下のように複数あります。

(1) Master Label (マスター表示ラベル): これは Lightning アプリケーションビルダーおよびコミュニティビルダーでの FlexCard コンポーネントの表示名です。

(2) API Version (API バージョン): これは FlexCard コンポーネントの API バージョンです。デフォルトは FlexCard を作成したときに使用した API バージョンです。新しい FlexCard を作成した場合は、現在の API バージョンがデフォルトとなります。 

(3) Runtime Namespace (ランタイム名前空間): これは管理パッケージの名前空間です。

(4) Is Exposed (公開済み):FlexCard コンポーネントを公開する場合に、これを有効にします。

(5) Add SVG Resource/Drop it here (ここに SVG リソースを追加/ドロップ): ここに独自のカスタムコンポーネント SVG アイコンを追加することで、生成された LWC を Lightning アプリケーションビルダーおよびコミュニティビルダーで識別できます。

(6) Targets (公開先): ここで、FlexCard コンポーネントを公開できる場所を選択します。デフォルトでは子 FlexCard には公開先は設定されません。通常、子 FlexCard は親のみに埋め込まれるか、フライアウトなどのアクションで使用されるためです。

FlexCard を Lightning ページに追加する

FlexCard を作成して有効にした後、Lightning アプリケーションビルダーを使用して、生成した FlexCard Lightning Web コンポーネントを Lightning ページに公開します。業種別のコンソールを構築するには、Lightning アプリケーションビルダーを使用します。

Lightning アプリケーションビルダーで、[Publish Options (公開オプション)] でコンポーネントに設定した公開先に応じて、FlexCard コンポーネントをレコードページ、ホームページ、またはアプリケーションページのキャンバス領域にドラッグします。  

この例では、Account_FlexCard_Profile コンポーネント (1) が、ページのキャンバス領域 (2) に追加されています。 

カスタムコンポーネントリストに FlexCard コンポーネントが見つからない場合は、FlexCard Designer に戻り、FlexCard が有効になっていること、また正しい公開先が設定されていることを確認してください。 

FlexCard をエクスペリエンスページに追加する

FlexCard を有効化してコミュニティページ (エクスペリエンスページ) で利用できるようにした後、エクスペリエンスビルダーを使用して、生成された Lightning Web コンポーネントをコミュニティページに公開します。 

エクスペリエンスビルダーは Lightning アプリケーションビルダーと似ています。コンポーネントリストが用意されており、そこから Lightning Web コンポーネントを選択して、キャンバス領域にドラッグすることができます。

この例では、sampleAccount コンポーネント (1) がページのキャンバス (2) に追加されています。

FlexCard とその優れたすべての機能を活用することで、Salesforce Platform で顧客中心かつ業種固有のユーザーエクスペリエンス (UX) コンポーネントとアプリケーションを構築し、お客様を 360 度の角度から把握することができます。

Lightning ページとエクスペリエンスページの標準 FlexCard コンポーネントを有効化する

上記のセクションで説明した 2 つの方法を使用すると、Lightning ページとエクスペリエンスページの両方のカスタムコンポーネントセクションに FlexCard を表示できます。この表示は、FlexCard の [Publish Options (公開オプション)] にある [Targets (公開先)] セクションのチェックボックスに基づいています (下の画像を参照)。

Summer '22 以降、標準データモデルを使用する OmniStudio がインストールされている場合、FlexCards の標準コンポーネントを使用して、Lightning アプリケーションビルダーから Lightning ページに FlexCard を表示できます。作成した有効な FlexCard か、各自の業種ライセンスに含まれている編集不可の標準 FlexCard のいずれかを追加できます。標準 FlexCard コンポーネントは Salesforce 組織でネイティブに動作することから、有効な OmniStudio コンポーネントを Lightning ページに追加するために OmniStudio パッケージをインストールする必要はありません。一方、カスタム FlexCard コンポーネントは、インストール済みの管理パッケージから実行されます。

この機能の有効化が可能かどうかを知るには、まず、OmniStudio の sObjects (標準オブジェクト) が組織で使用されているかどうかを確認する必要があります。

1. 歯車アイコン をクリックして、[Setup (設定)] を選択します。
2. [Quick Find (クイック検索)] ボックスに Omni Interaction Configuration (Omni Interaction 設定) と入力し、[Omni Interaction Configuration (Omni Interaction 設定)] をクリックします。
   

TheFirstInstalledOmniPackage という名前のエントリが表示されている場合、組織で OmniStudio の sObjects (標準オブジェクト) が使用されているため、標準コンポーネント機能を有効化できます。

組織で OmniStudio の sObjects (標準オブジェクト) が使用されていることを確認したら、標準コンポーネントを有効にすることができます。

1. 歯車アイコン をクリックして、[Setup (設定)] を選択します。
2. [クイック検索] ボックスに OmniStudio 設定と入力し、[OmniStudio 設定] をクリックします。
3. [Standard OmniStudio Runtime (標準 OmniStudio ランタイム)] 切り替えボタンが [Enabled (有効)] と表示されるように、ボタンをクリックします。
   

機能が有効になったら、Lightning アプリケーションビルダーまたはエクスペリエンスビルダーに戻り、[標準] コンポーネントの Flexcard オプションを表示します。

Lightning アプリケーションビルダー内:

エクスペリエンスビルダーの [プロセスの自動化] に表示されている Flexcard オプション:

この機能が標準オプションとして備わっているのは素晴らしいことですが、標準コンポーネントではサポートされない機能もあることに注意してください。機能のサポート内容については、「FlexCard Standard Component Features Not Supported (サポートされていない FlexCard 標準コンポーネント機能)」を参照してください。

リソース

• Trailhead: Lightning アプリケーションビルダー
• Salesforce ヘルプ: エクスペリエンスビルダーの概要
• Salesforce ヘルプ: Add a Standard FlexCard Component to a Lightning Page (Lightning ページへの標準 FlexCard コンポーネントの追加)
• Salesforce ヘルプ: Add a Standard FlexCard Component to an Experience Page (エクスペリエンスページへの標準 FlexCard コンポーネントの追加)