FlexCard の状態と条件を追加する

学習の目的

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

• データを表示する条件付きの状態を作成する。
• FlexCard のバージョン管理について説明する。

複数の FlexCard 状態を使用してデータを表示する

すべての FlexCard は状態が設定されて生成されます。新しい状態を作成するには、キャンバスに State 要素を追加するか、既存の状態をコピーします。これまで見てきたように、FlexCard の状態によって、FlexCard 上でユーザーに表示されるコンテンツとユーザーが行う操作をコントロールできます。最もシンプルなケースでは、FlexCard には次の状態があります。

• 表示するデータがある場合の Active 状態
• データがなくアクションが制限されている場合の Blank 状態または Open 状態

1 つの FlexCard に追加できる状態の数に制限はありませんが、キャンバス上での状態の順序はどの状態を表示するかを決定する上で重要な役割を果たします。

FlexCard に異なるデータを表示する必要がある状況を考えてみましょう。たとえば、保険の契約情報を表示するだけでなく、保険料の支払期日が過ぎている場合にはメッセージを表示する FlexCard を作成するにはどうしたらいいでしょうか。これを実現するには、FlexCard で新しい状態を作成して条件を設定します。この条件によって、FlexCard にデータを表示するかどうか、いつ、どのように表示するかを決定することができます。

この 1 つの FlexCard には 3 つの異なる状態が作成されています。最初の状態には有効なプランに関する情報が表示されています (1)。2 つ目の状態はプランの支払期日が過ぎている場合に表示されます (2)。3 つ目の状態は有効なプランがない場合に表示されます。この状態にはプランを追加するためのアクションが含まれています (3)。この空白の状態を作成するには、State 要素の [Properties (プロパティ)] パネルで [Blank Card State (Blank カード状態)] チェックボックスを選択します。 

状態の順序と条件によって、表示されるデータが決まります。上から順番に調べていき、最初に条件が true になった状態が表示されます。この例では、一番下の状態が最初に条件が true になった状態であるため、表示される状態は一番下の状態になります。ベストプラクティスとして、true の状態は 1 つのレコードにつき 1 つのみにすることをお勧めします。

前の単元で説明した Weather カードを思い出してください。それを例にしてみましょう。悪天候時に取引先に表示するアラートが必要です。 

2 つの状態を作成します。1 つには天気と天気予報を表示し、もう 1 つには現在の天気に関する何らかのアラートを表示します。ある気象状況を満たした場合に気象アラートが表示されるようにしたいので、その状態を 1 番目に、現在の天気の状態を 2 番目に配置します。アラートの条件が満たされていない場合は、2 番目の状態が表示されます。 

状態をコピーして表示条件を設定する

これは郵便番号に基づいて取引先の現在の天気を常に表示する Weather FlexCard です。 

状態名はデフォルトの Active (1) という名前です。この状態をコピー (2) して、設定された条件が満たされた場合に表示する新しい状態を作成します。 

Weather FlexCard を構成する要素を見てみましょう。

一番上に [Active State (Active 状態)] があります。この状態をコピーすると以下の要素がすべてコピーされます。

状態のコピーを作成すると、その状態を表示するタイミングを決定する条件を設定するオプションが即座に表示されます。この例では、[Data Field (データ項目)] の [Condition (条件)] (1) が [Value (値)] の [Heavy Snow (大雪)] (3) と等しい (2) 場合に Alert 状態が表示されます。

それでは、Weather FlexCard の Active 状態のコピーを参照して、その外観の変化を確認してみましょう。

状態名は Alert で、その横にはこの状態が表示される必須条件が記載されています (1)。Active 状態に表示される明るい雰囲気の天気の画像に代わって、[Weather Alert (気象アラート)] 画像 (2) が表示されています。また、同じ項目に気象データ (3) が表示されていますが、スタイルが異なっています。最後に、weather.com というボタン (4) が追加されており、クリックすると気象情報の Web サイトに誘導されるようになっています。 

キャンバス上での Alert 状態の要素の配置は次のようになっています。Active 状態と Alert 状態では、Block、Image、Text、Action という同じ要素が使用されています。スタイル設定によって、それぞれの見た目を変更できます。

Alert 状態内の追加のアクションである、weather.com ボタン用の Navigate Action に注目してください。これについては次で説明します。

Navigate Action

Navigate Action を使用すると、FlexCard から外部 Web ページへ、または Lightning Experience および Lightning コミュニティ内のページへユーザーが誘導されます。これは、[Target (移動先)] ドロップダウンメニューのページ参照によって決まります。 

この例では、[Action Type (アクション種別)] が [Navigate] (1) であり、[URL] 項目 (3) で指定された [Web Page (Web ページ)] (2) にユーザーを誘導しています。 

FlexCard のバージョンを管理する

これまで、FlexCard とエレメントのコピーについて学習し、バージョン管理についても触れました。ここでは、バージョン管理を深く掘り下げ、いつ、何のためにバージョン管理を行うのかについて詳細に説明します。また、バージョン管理とコピー作成の違いについても詳しく見ていきましょう。  

バージョン管理とは、既存の FlexCard を維持したまま、FlexCard に変更を加える方法です。 

FlexCard の名前と作成者は変わりませんが、編集する新しいバージョンでは [Current Version (現在のバージョン)] 番号 (1) が増加します。FlexCard のバージョン管理を行う場合は、FlexCard キャンバスのヘッダーにある [New Version (新しいバージョン)] ボタン (2) をクリックします。  

一度に有効化される FlexCard のバージョンは 1 つのみであるため、新しいバージョンを有効にすると、以前のバージョンが使用されているすべての場所で自動的に新しいバージョンに置き換わります。

では、どのような場合に FlexCard のバージョン管理を行い、どのような場合に FlexCard のコピーを作成するのでしょうか。次の表はその判断に役立ちます。 

FlexCard のバージョンを管理する	FlexCard のコピーを作成する
既存の FlexCard に少し変更を加えて、動作とレイアウトをテストしたい場合。 更新する必要がある場合など、古い FlexCard を新しい FlexCard に置き換えたい場合。	親から独立して利用できる FlexCard が必要な場合。 FlexCard の名前や作成者を変更したい場合。

FlexCard の魅力はまだまだあります。次の単元では、FlexCard を有効化して公開する準備を整えましょう。