Flexcard を設定する
学習の目的
この単元を完了すると、次のことができるようになります。
- Flexcard Designer の [Setup (設定)] パネルのオプションについて説明する。
- Flexcard Designer の [Properties (プロパティ)] パネルのオプションについて説明する。
Flexcard とそのスタイルを設定する
前の単元では、Flexcard Designer で使用できる [Element (要素)] パネルとその各要素について詳しく学びました。この単元では、Flexcard とそのスタイルを設定する方法を学習します。[Setup (設定)] パネルと [Properties (プロパティ)] パネルを使用して、データソースの書式設定、スタイル設定、Flexcard への追加を行います。各パネルについての詳細とそのオプションについて学びます。
設定パネル
設定オプションを使用して、Flexcard の詳細と動作を設定します。[Setup (設定)] パネルは、カードの機能の基本的な事項を定義する場所です。Flexcard の作成が完了したら、[Name (名前)] 項目と [Author (作成者)] 項目を変更することはできません。
![さまざまなオプションが含まれている [Setup (設定)] パネル。](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/omnistudio-flexcard-fundamentals/configure-your-flexcard/images/ja-JP/cbcf0a214cbd651e4e2bac3c9dfd6e2c_kix.ydbxpp7k20dq.png)
[Setup (設定)] パネルでは、次のオプションを使用して Flexcard の設定を更新できます。
設定 |
関数 |
|---|---|
Advanced Settings (高度な設定) |
子 Flexcard のプレビューを無効にします。 |
Repeat Options (繰り返しオプション) |
繰り返す必要がないコンテンツを表示します (グラフ、データテーブルなど)。 |
Styling Options (スタイル設定オプション) |
カスタム Lightning スタイルシートを追加します。 |
Event Listener (イベントリスナー) |
イベントリスナーを Flexcard に追加します。イベントリスナーは、イベントの発生を「リスン」または待機し、それに応じてアクションを実行する関数です。 |
Session Variables (セッション変数) |
セッション変数を追加します。セッション変数は、データソースまたは外部システムからの値を保存する特殊な種別の変数で、Flexcard 上でその値にグローバルにアクセスできます。 |
Public Attribute (公開属性) |
公開 API を Flexcard に追加します。 |
データソースを追加する
[Setup (設定)] パネルの [Datasource (データソース)] セクションで、データソースを Flexcard に追加します。使用可能なオプションからデータソース種別を選択し、詳細を編集します。Flexcard は、複数のデータソースオプションからデータを取得できます。Flexcard には次のデータソースを使用できます。
Omnistudio のデータソース:
-
Data Mapper は、Salesforce データの抽出、変換、読み取りに使用できる宣言型ツールです。
-
Integration Procedure は、1 回のサーバーコールで一連のアクションを実行する宣言型ツールです。Integration Procedure では、Data Mapper へのコール、REST API コールの実行、Apex の実行が可能です。1 つのトランザクションで多数のソースからデータを取得する優れた方法です。
Salesforce のデータソース:
-
SOQL Query は、Salesforce Object Query Language (SOQL) を使用して、1 つの Salesforce オブジェクトからのレコードを照会します。Data Mapper の変換機能が必要でない場合に、データをすばやく簡単に取得できます。
-
SOSL Search は、Salesforce Object Search Language (SOSL) を使用して、複数の Salesforce オブジェクトで一度にテキストベースの検索を実行します。検索して表示するユースケースに最適です (たとえば、さまざまなオブジェクトで名前、電話番号、メールを使用して顧客を見つけるなど)。
-
APEX Remote は、Apex クラスおよびメソッドを呼び出してデータを取得します。サーバー側のカスタムロジックを必要とする複雑なデータを取得するのに便利です。Apex メソッドは、データを Flexcard に返す前に、計算を実行したり、ほかのサービスをコールしたりできます。
-
APEX REST は、Apex クラスの REST エンドポイントをコールしてデータを取得します。Apex Remote に類似していますが、RESTful アーキテクチャが使用されています。一般向け API を作成する場合に適しています。
外部およびその他のデータソース:
-
REST は、外部 REST API からデータを取得します。サードパーティシステムからのデータを統合する主要な手段です。セキュアに認証するために指定ログイン情報を使用できます。
-
ストリーミング API は Salesforce ストリーミング API に登録し、プッシュ技術を使用してイベントベースのデータ更新をリアルタイムで受け取ります。ページを更新し続けることなくライブ通知やライブ更新を表示する場合に最適です。
選択するデータソース種別に応じて、データソースの追加設定を行うこともできます。たとえば、データソースとして Integration Procedure を選択する場合、次のパラメーターを設定できます。
-
[Input Map (入力の対応付け)] では、キーと値のオプションを使用して Flexcard からの変数をデータソースに渡します。
-
[Options Map (オプションの対応付け)] では、リモートメソッドに渡される [Input Map (入力の対応付け)] にキー - 値ペアの追加情報を送信します。
-
[Test Parameters (テストパラメーター)] では、ライブデータを返すためにクエリで使用できるテスト変数を追加し、実際のデータを使用して Flexcard をプレビューできます。
以下の画像は、データソースのオプションを示しています。

[Setup (設定)] パネルについて理解したところで、次は [Properties (プロパティ)] パネルについて学びましょう。
プロパティパネル
キャンバスの要素を選択すると、[Properties (プロパティ)] パネルで要素のプロパティを変更し、その動作を指定できます。たとえば、メニュー要素を選択すると、名前、表示ラベル、アイコンオプション、ドロップダウンオプション、サイズなどの詳細を更新できます。
![[Element Details (要素の詳細)] タブが選択されている [Properties (プロパティ)] パネル。](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/omnistudio-flexcard-fundamentals/configure-your-flexcard/images/ja-JP/afc0b39b28087a39ad1738929092863f_kix.dkk3uhwfxg5r.png)
[Style (スタイル)] タブを使用すると、Flexcard 要素にスタイルを設定し、外観をリアルタイムで更新することができます。
![[Style (スタイル)] タブが選択されている [Properties (プロパティ)] パネル。](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/omnistudio-flexcard-fundamentals/configure-your-flexcard/images/ja-JP/90fe4d5b4491bc0c40d11d353ae16359_kix.1vclesvxmezy.png)
このパネルには、背景、サイズ、境界線、パディング、余白、高さ、フォント、応答性の設定が用意されています。要素にスタイルを作成する場合は、そのスタイルを保存して Flexcard の複数の要素で使用できるようにします。カスタム設計の場合は、カスタム CSS を作成して適用します。
Flexcard のデザイナーについて理解したところで、次は Flexcard の使用におけるベストプラクティスについて確認します。
次のステップ
この単元では、[Setup (設定)] パネルと [Properties (プロパティ)] パネルについて確認しました。Flexcard とそのスタイルを設定する方法を学びました。次の単元では、Flexcard をテストして有効化する方法を学習します。Flexcard の使用方法におけるベストプラクティスについても学びます。
リソース
- Salesforce ヘルプ: Working with Flexcards (Flexcard の使用)
- Salesforce ヘルプ: Set Up a Data Source on a Flexcard (Flexcard でのデータソースの設定)
- Salesforce ヘルプ: Repeat Options in the Flexcard Designer (Flexcard Designer の繰り返しオプション)
- Salesforce ヘルプ: Flexcards Event Listener Properties (Flexcard イベントリスナーのプロパティ)
- Salesforce ヘルプ: Style a Flexcard (Flexcard のスタイル設定)
- Salesforce ヘルプ: Add Session Variables to a Flexcard (Flexcard へのセッション変数の追加)