Flexcard Designer をはじめる
学習の目的
この単元を完了すると、次のことができるようになります。
- Flexcard Designer の詳細を確認する。
- Flexcard Designer の UI 機能について説明する。
- さまざまな表示要素と入力要素、その機能について説明する。
Flexcard Designer の概要を知る
Flexcard Designer は、Omnistudio のドラッグアンドドロップ方式のビジュアルツールです。コードなしでインタラクティブな Flexcard を作成できます。Flexcard Designer を使用すれば、コンテキストに応じた魅力的な Flexcard の作成が簡略化し、さまざまな Salesforce 環境内で関連情報の表示とクイックアクションの提供が可能になります。要素の配置、要素とデータソースの接続、アクションの定義、見た目のスタイル設定、このすべてをシンプルで直観的なインターフェースから行えます。
Flexcard Designer を開くには、
を選択し、[Flexcards] を見つけて選択します。または、アプリケーションランチャーで [Omnistudio] を見つけて選択し、 アプリケーションのナビゲーションメニューで [Flexcards] を見つけて選択します。
Omnistudio コンポーネントは、Salesforce の標準リストビューページの一部として使用できるようになりました。[Flexcards] リストビューページで既存の Flexcard を選択するか Flexcard の作成を実行すると、その Flexcard がデザイナーで開きます。
Flexcard は、2 つのステップで素早く作成できるようになりました。次のように使用されています。
- [Flexcards] リストビューページで [New (新規)] をクリックします。
- [Flexcard Details (Flexcard の詳細)] ウィンドウに必須の詳細を入力して、[Save (保存)] をクリックします。新しい Flexcard が標準デザイナーで開きます。
作成プロセス中に [Save as child card (子カードとして保存)] チェックボックスをオンにすることで、Flexcard を子 Flexcard にすることも可能です。
重要
Flexcard の作成が完了すると、[Name (名前)] 項目と [Author (作成者)] 項目の編集および [Save as child card (子カードとして保存)] オプションの変更は行えません。
デザイナーを見つける方法がわかったところで、次はデザイナーのレイアウトを見てみましょう。以下は、Flexcard のデザイナーインターフェースのスクリーンショットです。
Flexcard Designer のレイアウトは次のセクションで構成されています。
-
ヘッダー (1) には Flexcard の名前とバージョンが示されます。名前を選択してバージョンをすばやく切り替えることができます。
-
ツールバー (2) には、デザイナー内の要素、デザインアシスタント、プロパティ、設定の各パネルを表示または非表示にするアイコンが含まれています。新しいバージョンの作成、コピー、有効化、プレビューモードへの切り替えを行うボタンもあります。要素パネルはキャンバスの左側に表示されます。デザインアシスタント、プロパティ、設定のパネルはキャンバスの右側に表示されます。
-
キャンバス (3) は Flexcard を作成するエリアです。ここに表示されているすべてのコンテンツが Flexcard に含まれます。要素はキャンバスにドラッグできます。要素上で
をクリックすると複製または削除できます。
-
[Elements (要素)] パネル (4) では、Flexcard を構成するすべての要素を見つけることができます。要素をキャンバス上にドラッグして、任意の順序に配置します。
-
[Setup (設定)] パネル (5) は、Flexcard についての詳細を設定するエリアです。属性、変数、データソースを Flexcard に追加できます。
-
[Properties (プロパティ)] パネル (画像には表示されていません) は、キャンバス上の各要素の詳細を設定するエリアです。キャンバス上の要素を選択すると、プロパティの表示と変更を行うことができます。
デザイナーについて理解したところで、次は Flexcard を構成する要素を詳しく見てみましょう。
要素を組み合わせて Flexcard を作成する
Flexcard Designer にはさまざまな要素が用意されています。要素をキャンバスにドラッグしてインタラクティブな UI コンポーネントを作成できます。要素は、必要な機能とユーザーエクスペリエンスの作成に役立つように、大まかに分類されています。
この要素を使用して次のことができます。
- データ項目、表示、入力の各要素を Flexcard に追加する。
- Flexcard のデータソースから生成されたデータを表示する、または静的情報を追加する。
- 必要に応じて、要素の再配置、コピー、削除、幅の調整を行う。
- Flexcard デザイナーで、要素のスタイルとプロパティを設定する。
次に、Flexcard 要素の各カテゴリと種別を詳しく見てみましょう。
表示要素
表示要素は、Flexcard 上にデータ項目、アクション、状態、データテーブルなどの関連情報を表示します。要素の各種別の説明は次の表のとおりです。
表示要素の種別 |
説明 |
|---|---|
ブロック |
折りたたみ可能なコンテナ内で要素の論理グループを結合します。たとえば、取引先の基本情報を 1 つのブロックで、取引先の取引先責任者情報を別のブロックでグループ化します。 |
アクション |
ユーザーが Flexcard を操作できるようにします (Omniscript の起動または更新、URL または Salesforce ページへの移動、フライアウトの表示、イベントの起動など)。 |
グラフ |
棒グラフ、円グラフ、ドーナツグラフのような多様な形式でデータを視覚的に表示します。 |
カスタム LWC |
カスタムのスタイル設定や機能が追加されたコンポーネントを埋め込みます。たとえば、既存のカルーセルコンポーネントを Flexcard に埋め込んだ後で、その属性を設定します。 |
データテーブル |
並べ替え可能なテーブル形式でデータを示し、複数のレコードの表示が可能です。たとえば、取引先に関連付けられたすべてのケースを並べ替え可能なテーブルとして表示します。 |
項目 |
データソースから返されたデータ項目を表示します。項目セクションは、[Elements (要素)] パネル内の使用可能なデータ項目も表示します。 |
Flexcard |
Flexcard を別の Flexcard の子として埋め込むことにより、Flexcard 間でデータを共有します。子 Flexcard に独自のデータソースを含めるか、親が独自のデータソースで子のデータソースを上書きすることができます。 |
アイコン |
Salesforce SVG かカスタムアイコンを Flexcard に追加します。このアイコンには、アイコンに関連付けられたアクションを含めることができます。 |
画像 |
既存のライブラリからの画像を Flexcard に追加するか、独自の画像を使用します。この画像には、画像に関連付けられたアクションを含めることができます。 |
メニュー |
アクションをドロップダウンリストにグループ化し、複数の機能を整理する方法を提供します。 |
状態 |
特定の条件に基づいて異なるインタラクションとレイアウトを表示します。 |
テキスト |
差し込み項目を使用してデータソースからの情報を組み合わせた静的テキストを表示します。リッチテキストエディターを使用する書式設定オプションが含まれます。 |
入力要素
入力要素は、データの入力または選択の実行を行い、その後、Flexcard の基盤となるデータ JSON を更新してアクションをトリガーします。Flexcard インターフェース内のインタラクティビティとデータ入力を有効にします。入力要素の各種別を見てみましょう。
入力要素の種別 |
説明 |
|---|---|
チェックボックス |
ユーザーがオプションを選択または選択解除できるようにする Boolean 入力コントロール |
通貨 |
通貨金額を入力するための入力項目、および書式設定オプション |
日付 |
日付を選択するための項目。多くの場合、日付ピッカーを使用 |
日付/時間 |
日付と時間の両方を選択するための項目 |
メール |
メールアドレス専用の入力項目 |
複数選択 |
さまざまな形式で表示される複数オプションのリスト (チェックボックス、ボタン、画像、ドロップダウン) |
数値 |
数値を入力するための項目、およびマスクの制約 |
ラジオ |
制限されたセットから 1 つのオプションを選択するための丸いボタン。垂直方向、水平方向、画像、または色として表示 |
範囲 |
ユーザーがスライダーを使用して特定範囲内の数値を選択できる項目 |
選択 |
選択可能な値のメニューを表示するドロップダウンボタン |
電話 |
電話番号用の入力項目、および書式設定マスク |
テキスト |
テキスト用の 1 行の入力項目 |
テキストエリア |
大量のテキストを入力するための複数行の入力項目 |
時間 |
時間を選択するための項目。多くの場合、リストから選択 |
切り替え |
一般的に Boolean 選択肢を表すか、アクションをトリガーするスイッチ状のコントロール |
先行入力 |
ユーザーが入力するときに提示を行う項目。多くの場合、ルックアップや検索で使用 |
要素パネルには、表示要素カテゴリと入力要素カテゴリ以外に [Fields (項目)] カテゴリもあります。[Fields (項目)] は、Flexcard のデータソースから生成されたデータ項目を表示します。たとえば、取引先の保険契約情報を表示します。
次のステップ
この単元では、Flexcard の標準デザイナーと、そのインターフェースのプロパティについて学習しました。Flexcard の作成に使用できるさまざまな要素についても確認しました。次の単元では、Omnistudio Flexcard とそのスタイルの設定オプションについて詳しく見ていきます。