Skip to main content

子 Flexcard を使用する

学習の目的

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

  • 管理パッケージ用 Omnistudio で親と子の Flexcard を使用する方法とその理由を説明する。
  • 折りたたみ可能な Block を作成する。
  • 親と子の Flexcard のデータソースの設定方法を説明する。
  • Flexcard をコピーする。
メモ

このモジュールでは、管理パッケージランタイムとカスタムオブジェクトを使用する管理パッケージ用 Omnistudio について説明します。標準ランタイムの Omnistudio についての詳細は、Salesforce ヘルプの「Omnistudio」を参照してください。

このバッジが自分に適しているか確かめたい場合は、「Which Version of Omnistudio Do You Have? (所有している Omnistudio のバージョンは?)」を参照してください。

始める前に

このモジュールを受講する前に、以下のコンテンツを修了していることを確認してください。ここでの作業は、そのコンテンツの概念や作業に基づいて行います。

子および親の 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 に埋め込まれている子 Flexcard。

親 Flexcard (1) 内に子 Flexcard (2) が保持されています。

メモ

このモジュールでは、受講者が管理パッケージ用 Omnistudio 開発者で、ここに記載の操作を実行する適切な権限を有すると想定しています。ただし、システム管理者でなくても問題ありません。このまま読み進み、本番組織で開発者が手順をどのように実行するのかを学習しましょう。Trailhead Playground でこの手順を実行しないでください。Trailhead Playground では管理パッケージ用 Omnistudio を使用できません。

親 Flexcard

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

親 Flexcard。

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

この例の親 Contacts Flexcard を構成する要素。

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

子 Flexcard

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

子 Flexcard。

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

この例の子 Contacts Flexcard を構成する要素。

Flexcard 要素 

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

子 Flexcard 要素の [Properties (プロパティ)] パネル。

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

親に子を埋め込んだときに、両方の Flexcard に使用されているすべての要素をもう一度見てみましょう。

子カードが埋め込まれた Flexcard を構成する要素。

折りたたみ可能な Block と Flexcard 要素があるのがわかります。ここで確認しましょう。

Block を折りたたむ

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

各自のプロジェクトではどのように実行するのでしょうか?

Block を折りたたむオプションは、Block 要素の [Properties (プロパティ)] にあります。

折りたたみ可能な 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 (ケース)] という表示ラベルが付いています。これらもデフォルトで折りたたまれています。

デフォルトで折りたたまれている [Policies (ポリシー)] と [Cases (ケース)] という 2 つの Block。

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

展開されている Block。

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

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

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

次の画像の例には、親の Flexcard 要素の [Properties (プロパティ)] パネルが表示されています。

親からレコードを受け取るように設定された子 Flexcard の [Properties (プロパティ)]。

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

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

子にデータ項目を渡す

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

次の例を見てください。 

親から ID を受け取るように設定された子 Flexcard の [Properties (プロパティ)]。

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

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

子は親のレコード ID を子の contextId の値として使用します。

この例の [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 (コピー)] を選択すると、この画像のようなウィンドウが開きます。 

カードをコピーするには、[Card Name (カード名)] を変更する必要があります。

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

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

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

リソース

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む