カスタム・フェッチ・アクション・チェーンの作成 - 例
SDPのカスタム・フェッチ・アクション・チェーンを作成する例を見てみましょう。 この例では、ビジネス・オブジェクトから部門本部をリストするために、単一選択コンポーネントをページに追加し、SDPにバインドします。 次に、追加フィールドを表示するように単一選択コンポーネントを構成し、追加フィールドのデータを取得するためにSDP用のカスタム・フェッチ・アクション・チェーンを作成します。 リストの各行には、部門の本社名、本社がある国、および国のフラグのイメージが表示されます。
開始する前に、名前および国フィールドを使用して部門本部ビジネス・オブジェクトを作成する必要があります。 また、単一選択コンポーネントをページに追加し、クイック・スタートを使用してこれを部門本部ビジネス・オブジェクトにマップする必要があります。
まず、Departments HQビジネス・オブジェクトを作成します:
- 「ビジネス・オブジェクト」の
タブを選択し、右上にある+をクリックして、Departments_HQという新しいビジネス・オブジェクトを作成します。
- 「部門本部」タブで、「フィールド」タブを選択し、
name(文字列)およびcountry(文字列)フィールドを追加します。 - データタブで、単一選択コンポーネントをリストする行をいくつか追加します:
次に、Select Singleコンポーネントをページに追加し、Add Optionsクイック・スタートを使用してこれをDepartments HQビジネス・オブジェクトにマップします。
- 新しいページを作成し、「ページ・デザイナ」タブで、「選択(単一)」コンポーネントをページに追加します。
- コンポーネントをDepartment HQビジネス・オブジェクトにマップするには、「プロパティ」ペインの「クイックスタート」タブで、「オプションの追加」を選択します。
- オプションの追加ウィザードのデータの検索ステップで、ビジネス・オブジェクトの下のDepartments_HQを選択します。 「次へ」をクリックします。
- ウィザードの「データのバインド」ステップでは、
nameフィールド(部門名)を「ラベル」ボックスと「値」ボックスの両方にドラッグ・アンド・ドロップします。 「次」をクリックします。
- ウィザードの問合せの定義ステップで、「終了」をクリックします。
SDPは、ビジネス・オブジェクトから
nameフィールドをフェッチする部門本部に対して自動的に作成されます。 新しいSDPはページの変数タブに表示されます。 「プロパティ」ペインの「データ」タブで、「単一選択」コンポーネントがSDPに自動的にバインドされていることも確認できます。 ページ・デザイナをライブビューに切り替えると、SDPによってフェッチされた部門名が「単一選択」コンポーネントにリストされます:
図sdp-single-select-live.pngの説明
各国のフラグを表示するイメージなど、追加のフィールドが表示されるように単一選択コンポーネントを構成する必要があります。
ページ・デザイナのコード・ボタンをクリックして、ページのHTMLコードを編集します。 次のHTMLコードをoj-select-singleタグに追加すると、単一選択コンポーネントに表が追加され、追加のフィールドを表示できます:<template slot="collectionTemplate" data-oj-as="collection"> <oj-table accessibility.row-header="[[['department', 'country']]]" horizontal-grid-visible="disabled" vertical-grid-visible="disabled" selection-mode='{"row": "single"}' columns-default='{"resizable": "disabled", "sortable": "disabled"}' columns='[ {"headerText":"Department HQ","field":"name","template":"departmentTemplate", "id":"name" }, {"headerText":"Country","field":"country","template":"countryTemplate", "id":"country"}, {"headerText":"","field":"countryFlag","template":"flagTemplate", "id":"countryFlag"} ]' class="oj-select-results" data="[[collection.data]]" selected.row="[[collection.selected]]" on-oj-row-action="[[collection.handleRowAction]]"> <template slot="departmentTemplate" data-oj-as="cell"> <span> <oj-bind-text value='[[cell.data]]'></oj-bind-text> </span> </template> <template slot="countryTemplate" data-oj-as="cell"> <span> <oj-bind-text value='[[cell.data]]'></oj-bind-text> </span> </template> <template slot="flagTemplate" data-oj-as="cell"> <oj-avatar src='[[cell.data]]'></oj-avatar> </template> </oj-table> </template>次に、フラグ・イメージを取得するためのサービス接続を作成する必要があります。
- サービス・ペインを選択し、プラス(+)アイコンをクリックし、サービス接続を選択します:
- サービス接続の作成ウィザードのソースの選択で、「エンドポイントで定義」を選択します。
- URLフィールドにエンドポイント
https://restcountries.com/v3.1/all?fields=name,flagsを入力してフラグ・イメージを取得し、バックエンドの作成をクリックします:このサービス接続のバックエンドが作成され、サーバーの詳細が格納されます。 このバックエンドを使用して、関連するサービス接続を作成し、エンドポイント・リクエストおよびレスポンス変換ファンクションをそれらすべてに適用できます。
- バックエンド仕様ステップで、バックエンド名としてGetFlagsBackendと入力し、「次」をクリックします。
- 次のステップで、サービス名にGetFlagsと入力します。
予備作業が完了したため、コンポーネントにバインドされているSDPのカスタム・フェッチ・アクション・チェーンを作成する方法を確認できます。 まず、SDPがDepartments HQビジネス・オブジェクトにマップされたときに自動的に作成されたフェッチ・アクション・チェーンをカスタマイズし、フラグ・イメージも取得します。 簡単に処理できるように、エラー処理は行いません。
開始するには、次の手順を実行します。
- プロパティ・ペインで、下までスクロールし、フェッチ・アクション・チェーンのカスタマイズをクリックします:アクション・チェーン・エディタに移動し、SDPのフェッチ・アクション・チェーンがロードされます。このアクション・チェーンには、自動生成された名前と事前構成されたコールRESTアクションがあります。
ノート:
configurationオブジェクトはアクション・チェーンに渡されましたが、内部使用のみを目的としています。 このオブジェクトは、互換性のない方法でバージョン間で変更される可能性があるため、使用しないでください。 - プロパティ・ペインのitemsプロパティで、コールの結果を使用して部門を取得して、返された部門の配列のロケーションを入力します。 たとえば:
{{ callRestGetAllDept.body.items }}:
- プロパティ・ペインで、コード・ボックスのテキストをこのコードに置き換えて、アクション・チェーンによって返されるデータにフラグ・イメージを追加:
item.countryFlag = callRestGetAllFlags.body.find(country => country.name.common === item.country)?.flags.png;
