子 FlexCard を使用する

学習の目的

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

• 親と子の FlexCard を使用する方法とその理由を説明する。
• 折りたたみ可能な Block を作成する。
• 親と子の FlexCard のデータソースの設定方法を説明する。
• FlexCard をコピーする。

はじめに

「OmniStudio FlexCard」モジュールでは、FlexCard の機能を紹介し、その構築方法とスタイル設定方法を説明しました。まだ、「OmniStudio FlexCard」を完了していない場合は、FlexCard を学ぶための出発点として、このモジュールを完了することを強くお勧めします。 

OmniStudio FlexCard には一目で確認できる形でコンテキスト情報が表示されており、表示されているデータに関連するタスクにアクセスすることができます。このモジュールでは、FlexCard の要素とデータソース、および状態と条件の使用方法について詳しく説明します。まず、子と親の FlexCard から学習していきましょう。

子および親の FlexCard

FlexCard を定義する場合に、[Is Child FlexCard (子 FlexCard かどうか)] 設定をオンに切り替えると、その FlexCard は「子」カードとしてマークされます。子 FlexCard は他の FlexCard (「親」 FlexCard と呼ばれることが多い) に埋め込むことができます。

では、なぜ子 FlexCard を使用するのでしょうか? 

• 子 FlexCard は再利用可能である: チームは特定の情報を表示し、複数の FlexCard で再利用可能な子 FlexCard を作成することで、新しい FlexCard を作成したり、コピーを作成してニーズに合わせて変更したりする手間を省くことができます。
• 子 FlexCard を使用すると、1 つの FlexCard に複数のデータソースを設定することができる: 子 FlexCard には、親 FlexCard から独立して独自のデータソースを設定できます。1 つの FlexCard に作成できる子 FlexCard の数には制限がないため、多数のソースからデータを表示することも可能になります。
• 子 FlexCard はフライアウトとしても使用できる: フライアウトはデータの表示方法を整理するのに役立ちます。たとえば、特定のデータに FlexCard でアクセスできるようにしたいが、常に表示する必要はない場合には、子 FlexCard を使用して、ポップオーバーまやモーダルウィンドウでそのデータが表示されるようにフライアウトアクションを構成します。

この例では、FlexCard に取引先の取引先責任者が表示されています。これは実際には 2 つの FlexCard です。

親 FlexCard (1) 内に子 FlexCard (2) が保持されています。この例を作成するために使用されている 2 つの FlexCard を見てみましょう。 

以下の図は親 FlexCard で、ヘッダーと取引先責任者を表すアイコンが表示されています。その下には、ドロップダウン矢印が付いた空白スペースがあり、ここに子 FlexCard が埋め込まれます。この矢印とこの矢印が示すものについては、後ほど説明します。 

では、この親 Contacts FlexCard を別の角度から見てみましょう。作成に使用された要素のみに注目すると、どのように見えるでしょうか? これらの要素は、「OmniStudio FlexCard」モジュールですでに十分に理解した要素です。 

カードの一番上には State 要素があります。ここにカードを作成するための要素を追加します。すべての FlexCard は状態が設定されて生成されます。このトピックについては、このモジュールの後半で説明します。

次は、取引先責任者情報を表示するように設定された子 FlexCard を見てみましょう。 

子 FlexCard の作成に使用する要素は、Block、Text、Action の各要素です。

FlexCard 要素 

親 FlexCard に子 FlexCard を埋め込むには、まず、ヘッダーの [Activate (有効化)] ボタンをクリックして有効化する必要があります。次に、親 FlexCard で、FlexCard 要素をキャンバスにドラッグアンドドロップして、子カードのプロパティを設定します。 

[FlexCard Name (FlexCard 名)] 項目 (1) を使用して、親 FlexCard に埋め込む子 FlexCard を選択します。[Data Node (データノード)] 項目 (2) では親から子へのデータの受け渡しを行います。これについては後ほど説明します。

親に子を埋め込んだ後、両方の FlexCard に使用されているすべての要素をもう一度見てみましょう。折りたたみ可能な Block と FlexCard 要素があるのがわかります。

Block を折りたたむ

親 FlexCard の例で触れたドロップダウン矢印を思い出してください。これは、Block が折りたたみ可能であることを示しています。つまり、ユーザーは情報を非表示にしたり展開したりすることができます。この例では、Block 内の情報はすべて非表示になっています。

ユーザーが矢印 (1) をクリックすると、Block が展開されてデータが表示されます。 

折りたたみ可能な Block を作成するには、[Collapsible (折りたたみ可能)] チェックボックス (1) をオンにして、ユーザーが必要に応じて Block を表示および非表示にできるようにします。折りたたみ可能な Block をさらに詳細に設定するために、2 つのオプションが用意されています。折りたたまれた Block に表示ラベル (2) を付け、[Collapsed By Default (デフォルトで折りたたむ)] チェックボックス (3) をオンにすると、FlexCard が最初に表示されたときに、常に Block が非表示になります。

1 つ FlexCard で異なるデータを区別する場合や、1 つのコンソールで複数の FlexCard を表示する場合を想像してみてください。折りたたみ可能な Block を作成することで、常に FlexCard をすっきりと整理することができます。

下の画像は、Block が折りたたまれているコンソールの一部です。折りたたまれた 2 つの Block には、[Policies (ポリシー)] と [Cases (ケース)] という表示ラベルが付いています。これらもデフォルトで折りたたまれています。

折りたたまれた Block の 1 つを拡大してみましょう。より多くの情報を表示するには、Block を展開します (下の展開された Cases Block を参照)。この外観を作成するには、Block 内の要素をグループ化し、Block を [Collapsible (折りたたみ可能)] と [Collapsed By Default (デフォルトで折りたたむ)] と指定します (上記の説明を参照)。[Label (表示ラベル)] 項目を使用して、この Block の名前を「Cases」にします。

親と子の FlexCard にデータソースを設定する

FlexCard には複数のソースのデータを表示することができます。これが可能なのは、子 FlexCard があるからこそです。子では、親 FlexCard のデータソースを使用することも、独立したデータソースを使用することもできます。子カードと親カードが個別のデータソースを使用している場合は、[Setup (設定)] パネルでそれぞれを設定します。 

レコードまたはデータの配列を子に渡す

この例では、親の FlexCard 要素の [Properties (プロパティ)] パネルが表示されています。

通常どおり、[FlexCard Name (FlexCard 名)] 項目 (1) で子 FlexCard を選択します。[Data Node (データノード)] 項目フィールド (2) を見てみましょう。ここでは、子 FlexCard にレコードまたはレコードの配列を渡すために、利用可能なデータノードを選択します。この FlexCard では {record} が選択されており、現在のレコードのデータのみが子に送信されます。もう 1 つのデータノードは {records} で、このノードではすべてのデータが送信されます。

これはすべて、親 FlexCard で行われます。では、子 FlexCard では何を行う必要があるのでしょうか? 子が親のデータソースを使用する場合、そのデータソースが設定されているか、[None (なし)] に設定されいるかは関係ありません。いずれにしても、レコードがすでに設定されているため、データノードが選択されている場合は親のデータソースによって子のデータソースが上書きされます。

子にデータ項目を渡す

特定のデータ項目を子に渡したい場合はどうすればよいでしょうか? この場合は、Attributes プロパティを使用します。渡す属性を入力して、値を割り当てます。次の例を見てください。 

親には子に対応する FlexCard 要素があります。[Data Node (データノード)] 項目は空になっています。ここでは、親から子に ID を渡すことにします。[Attributes (属性)] (1) セクションで、属性に値を割り当てます。渡す [Attribute (属性)] (2) として「Id」、[Value (値)] (3) として「{Id}」を入力します。 

繰り返しになりますが、これはすべて親 FlexCard で行います。子 FlexCard の [Setup (設定)] タブでは、データソースに ID を入力する必要があります。 

上記の例の [Input Map (入力マップ)] (1) セクションを見てください。子 FlexCard のデータソースの [Input Map (入力マップ)] には、入力値として「Id」 (2) が表示されています。[Value (値)] 項目では、親の Record ID が子の contextId の値、{Parent.Id} (3) として使用されています。 

コピーして新しい FlexCard を作成する

ここで少しトピックを変えて、FlexCard のコピー作成について説明しましょう。FlexCard のコピーを作成するメリットの 1 つは、時間を節約できることです。FlexCard 内の要素をコピーすることも時間の節約になります。 

たとえば、必要なものに非常に近い形の FlexCard があり、ほんの少し調整や追加を行うだけで完成できるとします。FlexCard のコピーを作成すると、コピー元の FlexCard のレイアウトや設定を持つ新しい FlexCard のコピーが作成されます。コピーする FlexCard の [Clone (コピー)] ボタンをクリックすると、以下のようなモーダルウィンドウが開きます。 

FlexCard のコピーは、[Card Name (カード名)] (1) を変更してからでないと作成できません。この例では、カード名がまだ変更されていないため、[Clone (コピー)] ボタン (2) が無効になっています。 

有効な FlexCard が使用されている場所に影響を与えずに同一のコピーを作成したい場合は、新しいバージョンを作成します。バージョン管理では名前と作成者は変更されません。ただし、使用されている有効なバージョンに影響を与えずに編集と変更を行うことができるため、更新中に何かが壊れるようなことはありません。バージョン管理については、後の単元で詳しく説明しますので安心してください。 

FlexCard の埋め込みに自信が持てましたか? それでは次のユニットに進んで、外部データを使用して FlexCard を作成する方法を学びましょう。

リソース

• Trailhead: OmniStudio FlexCard