2017.05.23

SuPICEで作る!親子検索ができるLightning Component

みなさん親子丼は好きですか?
最近、自分たちの部署は日本橋の茅場町近くに移動したのですが、近くに有名な親子丼のお店があるようでぜひ行ってみたいと思っています♪♪

さて今回はSuPICEをSalesforceのオブジェクトを親子検索できる画面で作成したいと思います٩(๑>؂<๑)

今回作成する親子関係について

画面を作成する前にオブジェクト構成について説明します(^ ^)



図のようにSalesforceの中では取引先責任者オブジェクトは取引先オブジェクトの[取引先ID]という項目を参照しています。

よって取引先責任者のオブジェクトは取引先オブジェクトのレコードの[取引先ID]項目で絞り込むことが可能です♪

1.完成画面

取引先のリストの項目をクリックすると関連付けれている取引先責任者のレコードをリストに表示する。


1.1 イメージと動画



取引先と取引先責任者完成動画

* 完成画像と動画ではヘッダーを追加し、取引先責任者のスタイルでテキストをboldに設定しています。

2.全体の流れ

さてこれから、SuPICEでの画面作成方法についてお話ししたいと思います!

  1. 取引先オブジェクトを持つリストを作成
  2. 取引先責任者オブジェクトを持つリストを作成
  3. 二つのリストを繋げるテキストボックスを配置
  4. 取引先オブジェクトを持つリストからテキストボックスへ[取引先ID]を挿入
  5. 取引先責任者オブジェクトを持つリストの検索条件で「値を設定」を行ったテキストボックスを選択
  6. 取引先オブジェクトを持つリストから取引先責任者オブジェクトを持つリストへ「再描画」を設定

3.作り方について

3.1 取引先オブジェクトを持つリストを作成

リストを配置して、取引先の項目を表示させます。 リストの設定を開いて、データソースに「取引先」、フィールド(項目)に「取引先名」「従業員数」を設定します。ついでにユニットの表示名を「取引先」とします。

  • 取引先リストのデータソースタブの設定

3.2 取引先責任者オブジェクトを持つリストを作成

同様にリストを配置して、取引先責任者の項目を表示させます。 リストの設定を開いて、データソースに「取引先責任者」、フィールド(項目)に「氏名」「電話」を設定します。こちらもユニットの表示名を「取引先責任者」とします。




  • 取引先責任者リストのデータソースタブの設定

3.3 二つのリストを繋げるテキストボックスを配置

取引先リストのレコードを選択し、取引先責任者リストにて取引先IDの絞り込みを行うためには、取引先リストの[取引先ID]項目を受け取れるユニットを配置する必要があります。ここではテキストボックスを配置して、ユニットの表示を「非表示」にします。

3.4 取引先オブジェクトを持つリストからテキストボックスへ取引先IDを挿入

先ほど作成したテキストボックスへ、取引先リストのインタラクションタブから「値を設定」します。

  • リストのインタラクションタブの設定

3.5 取引先責任者オブジェクトを持つリストの検索条件で「値を設定」を行ったテキストボックスを選択

取引先責任者オブジェクトを設定したリストを選択し、ユニットセッティングウィンドウを開き「データソース」->「検索条件」を開きます。





次に、検索条件で、[取引先ID]項目を指定したテキストボックスを検索条件に設定します。

  • フィルター条件の設定

3.6 取引先オブジェクトを持つリストから取引先責任者オブジェクトを持つリストへ「再描画」を設定

最後に、取引先リストのレコードを選択した際、取引先責任者リストの項目を検索するために取引先リストのユニットセッティングウィンドウのインタラクションタブに取引先責任者リストへの「再描画」アクションを設定して完了です♪ 

  • 取引先リストのインタラクションタブの設定

以上で美味しい親子検索作成レシピは終了です!お疲れ様でした(❁´ω`❁)

皆様が良いSuPICEライフを送れますように(๑•ᴗ•๑)


SuPICEの画面につきまして

画像はアメリカでリリースされているSuPICEを利用してしますが日本向けのリリース版においてもブログで紹介した機能は実現可能です。


キャンペーン情報

『Salesforce画面の無料開発キャンペーン』スタート!
12/31まで、テラスカイのエンジニアがSkyVisualEditorで御社の画面を"無料で"開発します。毎月先着5社まで! まずは、お気軽にご相談ください。

12/31まで、テラスカイのエンジニアがSkyVisualEditorで御社の画面を"無料で"開発します。毎月先着5社まで! 

1 件
     
  • banner
  • banner

関連する記事