子 Flexcard を使用する
学習の目的
この単元を完了すると、次のことができるようになります。
- 管理パッケージ用 Omnistudio で親と子の Flexcard を使用する方法とその理由を説明する。
- 折りたたみ可能な Block を作成する。
- 親と子の Flexcard のデータソースの設定方法を説明する。
- Flexcard をコピーする。
始める前に
このモジュールを受講する前に、以下のコンテンツを修了していることを確認してください。ここでの作業は、そのコンテンツの概念や作業に基づいて行います。
子および親の Flexcard について
Omnistudio Flexcard には一目で確認できる形でコンテキスト情報が表示されており、表示されているデータに関連するタスクにアクセスすることができます。
このモジュールでは、管理パッケージ用 Omnistudio の Flexcard の要素とデータソース、および状態と条件の使用方法について詳しく説明します。では、子と親の Flexcard から学習していきましょう。
Flexcard を定義する場合に、[Is Child Flexcard (子 Flexcard かどうか)] 設定をオンに切り替えると、その Flexcard は子カードとしてマークされます。子 Flexcard は、親 Flexcard というほかの Flexcard に埋め込むことができます。
では、なぜ子 Flexcard を使用するのでしょうか?
-
再利用可能である。チームは、特定の情報を表示する子 Flexcard を作成します。この Flexcard はほかの Omnistudio プロジェクトにも使用できるため、新しい Flexcard を作成したり、ニーズに合わせてコピーや変更したりする時間を節約できます。
-
1 つの Flexcard に複数のデータソースを設定できる。子 Flexcard には、親 Flexcard から独立して独自のデータソースを設定できます。1 つの Flexcard に作成できる子 Flexcard の数に制限がないため、多数のソースからデータを表示することが可能になります。
-
フライアウトとしても使用できる。フライアウトはデータの表示方法を整理するのに役立ちます。たとえば、特定のデータに Flexcard でアクセスできるようにしたいが、常に表示する必要はない場合には、子 Flexcard を使用して、ポップオーバーやウィンドウでそのデータが表示されるようにフライアウトアクションを設定します。
この例では、Flexcard に取引先の取引先責任者が表示されています。これは 2 つの Flexcard です。
親 Flexcard (1) 内に子 Flexcard (2) が保持されています。
親 Flexcard
以下の親 Flexcard に、ヘッダーと取引先責任者を表すアイコンが示されています。その下には、ドロップダウン矢印が付いた空白スペースがあり、ここに子 Flexcard が埋め込まれます。この矢印とこの矢印が示すものについて詳述します。
では、この親 Flexcard を別の角度から見てみましょう。作成に使用された要素のみに注目すると、どのように見えるでしょうか? これらの要素は、「管理パッケージ用 Omnistudio の Flexcard」モジュールですでに十分に理解した要素です。
カードの一番上には State 要素があります。ここにカードを作成するための要素を追加します。すべての Flexcard は状態が設定されて生成されます。このトピックについては、このモジュールの後半で説明します。
子 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 が展開されてデータが表示されます。
各自のプロジェクトではどのように実行するのでしょうか?
折りたたみ可能な 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 を展開すると、より多くの情報が表示されます (次の画像の 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 を作成する方法を学びましょう。