ピッカーの構成

ピッカーによって通常の値リスト・フィールドが拡張され、ユーザーは、必要なレコードをすばやく見つけることができるようになります。設定に応じて、ピッカーには、選択元となる保存済検索のリストまたはユーザーのコンテキストに最も関連性の高い結果のリストを表示できます。特定の標準フィールドではピッカーがすでに使用可能で、変更できませんが、必要に応じて、それらのフィールドについて新しいピッカーを構成できます。カスタム値リスト・フィールドについてピッカーを構成することもできます。Oracle Visual Builder Studioでcx-pickerフラグメントを使用して、新しいピッカーを構成します。

ピッカーがないフィールドの例を次に示します。ピッカーがないフィールドには、ユーザーがクリックして値リストを表示できるボタンがあります。

このスクリーンショットは、ピッカーがない値リスト・フィールドを示しています。

この基本的な値リストは、ユーザーがフィールドに入力した値に基づいてフィルタする機能を備えています。たとえば、ユーザーがpiと入力すると、名前にpiが含まれるアカウントを選択候補とするリストが表示されます。

このスクリーンショットは、基本的な値リスト・フィールドとその検索機能を示しています。

この基本的なフィルタリング機能は便利ですが、ピッカーを追加して、フィールドでより広範な検索機能を実現することがベスト・プラクティスとなります。

ピッカーとは

ピッカーは、動的選択リスト・フィールドにおける特殊な検索です。ピッカーがある場合、ユーザーは、レコードの単一の属性のみでなく、複数の属性に基づいて検索できます。たとえば、アカウントのピッカーでは、ユーザーはアカウントの名前、住所詳細および担当者名に基づいて検索できます。次のスクリーンショットは、市区町村名に基づく検索を示しています。

このスクリーンショットは、キーワード検索がピッカーでどのように機能するかを示しています。

さらに、設定に応じて、ピッカーには保存済検索のリストまたはユーザーのコンテキストに最も関連性の高い結果のリストを表示できるため、ピッカーは、フィールドにおける標準検索よりも強力です:

  • 保存済検索は、オブジェクトについて事前定義されている検索フィルタです。管理者(およびエンド・ユーザー)は、必要に応じて新しい保存済検索を定義できます。

    保存済検索のリストを表示するようにピッカーが構成されている場合、ユーザーは実行時に保存済検索を適用して、検索に使用可能なレコードをフィルタし、選択する正しいレコードをよりすばやく見つけることができます。

    保存済検索のリストを含むピッカーの例を次に示します:

    このスクリーンショットは、保存済検索のリストを含むピッカーを示しています。

    実行時には、そのオブジェクトについて有効になっているデフォルトの保存済検索、またはユーザーが選択した最後の保存済検索に基づいて、ピッカーにレコードが表示されます。

  • ユーザーのコンテキストに最も関連性の高い結果のリストを表示するようにピッカーが構成されている場合は、ユーザーが値リストを開くと、なんらかの形で現在のコンテキストに関連するレコードが表示されます。

ピッカーのシナリオ例

このトピックでは、ピッカーの構成の例について説明します。この例では、ユーザーがアカウントを検索して支払レコードに関連付けることができるように、アカウントのピッカーを「支払の作成」ページに追加します。

この例では、次のことを行います:

  1. アプリケーション・コンポーザで、カスタム動的選択リスト・フィールドを作成します。

  2. Visual Builder Studioで:

    1. 動的選択リスト・フィールドをページ・レイアウトに追加します。

    2. ピッカー・フラグメントを使用するフィールド・テンプレートにフィールドを関連付けます。

    3. ピッカー・レイアウトを構成します。

前提条件

カスタム・アカウント・フィールドを作成する前に、次のことが必要です:
  1. カスタム・オブジェクトを操作する場合、適応型検索の設定を完了します。

    カスタム・オブジェクトのフィールドについてピッカーを構成する場合は、カスタム・オブジェクトで適応型検索を有効にしていることを確認してください。ピッカーの動作は、適応型検索ですでに設定されている内容によって異なります。

    ピッカーでは、キーワード検索について有効になっているすべての適応型検索フィールドに対して検索が行われます。追加の属性を検索について有効にするには、『Oracle Fusion Cloud Sales Automation実装レファレンス』ガイドの適応型検索およびワークスペースの章にあるUIでフィールドを検索可能にするを参照してください。

  2. まだワークスペースがない場合は、Visual Builder Studioで独自のワークスペースを作成します。

    まだ公開されていないカスタム動的選択リスト・フィールドについてピッカーを構成する場合は、ワークスペースがクラウド・アプリケーション・サンドボックスに関連付けられていることを確認してください。

  3. 共通アプリケーション・コンポーネント依存関係をワークスペースに追加します。

    依存性を追加するには、Visual Builder Studioで「依存性」サイド・タブをクリックします。

    検索フィールドを使用して共通アプリケーション・コンポーネント依存関係を検索し、「追加」をクリックします。

  4. この例は、Visual Builder Studioでページがすでに構成されているカスタム支払オブジェクトがあることを前提としています。

    CX拡張ジェネレータを使用すると、これをすばやく設定できます。「CX拡張ジェネレータを使用した新規アプリケーションの作成」を参照してください。

1. カスタム動的選択リスト・フィールドの作成

最初に、アプリケーション・コンポーザでカスタム・オブジェクト(支払)のカスタム動的選択リスト・フィールドを作成します。この動的選択リスト・フィールドにはアカウント・レコードが表示されます。

ノート:

カスタム・フィールドの作成は、データ・モデルの変更です。Visual Builder Studioでアプリケーション拡張を作成する前に、アプリケーション・コンポーザですべてのデータ・モデルの変更を作成します。ただし、ワークスペースは現在のサンドボックスに関連付けられているため、Visual Builder Studioで作業する前にサンドボックスを公開する必要はありません。

カスタム動的選択リスト・フィールドを作成するには:

  1. アクティブなサンドボックスで作業していることを確認します

  2. アプリケーション・コンポーザで、「支払」オブジェクト > 「フィールド」ノードにナビゲートします。

  3. 次の値を使用して、カスタム動的選択リスト・フィールドを作成します:

    フィールド

    表示ラベル

    アカウント

    名前

    アカウント

    関連オブジェクト

    アカウント

    リスト選択表示値

    組織名

ヒント:

アプリケーション・コンポーザでは、オプションで動的選択リスト・フィールドにフィルタを追加して、ピッカーでユーザーに対して表示される値を制限できます。たとえば、特定の国や市区町村に拠点を置くアカウントのみがピッカーに表示されるようにすることができます。フィルタを追加すると、そのピッカーでは保存済検索のリストがユーザーに対して表示されなくなります。また、アプリケーション・コンポーザでフィールドにフィルタを追加する場合は、実行時にフィルタが正しく機能するように、サンドボックスを公開する必要があります。

アプリケーション・コンポーザで動的選択リスト・フィールドを作成すると、2つのフィールドが作成されます。

  • 一方のフィールドは、標準の、Redwood以外のOracleアプリケーションで使用されます。この標準フィールドの命名規則はcustomfield_cです。

    この例では、Account_cフィールドが自動的に作成されます。このフィールドは、アプリケーション・コンポーザとVisual Builder Studioで表示および変更できます。

  • 一方のフィールドは、Redwood営業で使用されます。この標準フィールドの命名規則はcustomfield_Id_cです。

    この例では、Account_Id_cフィールドが自動的に作成され、Visual Builder Studioにのみ表示されます。これが、Redwood営業のページ・レイアウトに追加するフィールドです。

これで、Visual Builder StudioでAccount_Id_cフィールドをページ・レイアウトに追加できるようになりました。次の項でそれを行います。

2. ページ・レイアウトへのフィールドの追加

ページ・レイアウトにカスタム・フィールドを追加します。この例では、作成ページにフィールドを追加します。通常は、編集ページにもフィールドを追加します。

  1. 営業のRedwoodユーザー・エクスペリエンスで、拡張する領域が表示されるページにナビゲートします。この例では、支払のリスト・ページにナビゲートします。

  2. 「設定およびアクション」メニューで、「Visual Builder Studioでページを編集」を選択します。

    このスクリーンショットは、Oracle Visual Builder Studioに入る方法を示しています。
  3. すでに設定されているプロジェクトを選択します。1つのプロジェクトのみが存在する場合は、そのプロジェクトに自動的に移動します。

  4. Visual Builder Studioでワークスペースが自動的に開きます。ただし、複数のワークスペースが存在する場合は、最初にワークスペースを選択する必要があります。

  5. Visual Builder Studioでワークスペースに入ったら、「レイアウト」サイド・タブをクリックします。

  6. 「レイアウト」サイド・タブで、「Payment_c」ノードをクリックします。

    このスクリーンショットは、「レイアウト」タブで選択できるノードを示しています。

  7. 「Payment_c」タブの「ルール・セット」タブで、Create Layoutルール・セットをクリックします。

    ノート:

    オプションで、Edit Layoutルール・セットについても同じステップを繰り返します。

  8. 「開く」アイコンをクリックして、デフォルト・レイアウトを編集します。

    このスクリーンショットは、レイアウトを編集する方法を示しています。

  9. フィールドのリストをスクロールして、カスタム動的選択リスト・フィールドを見つけます。Visual Builder Studioには、表示名ではなく、内部API名が表示されます。

    ヒント:

    フィールドをよりすばやく見つけるには、「フィルタ」フィールドを使用します。たとえば、「フィルタ」フィールドにaccountと入力します。

    このスクリーンショットは、フィールドをすばやく見つける方法を示しています。

  10. フィールド・リストからフィールド「Account_Id_c」を選択します。

    フィールドを選択すると、リストの右下にあるフィールドのリストに表示されます。オプションで、フィールドのハンドルを使用して、フィールドを目的の場所にドラッグできます。

    このスクリーンショットは、作成ページに表示するために選択されたフィールドを示しています。

    この時点で作成ページをプレビューした場合、表示される「アカウント」フィールドは、基本的な検索フィルタリングのみを含む単純なリストになります。

    このスクリーンショットは、基本的な値リスト・フィールドとその検索機能を示しています。

    フィールドにピッカーを追加するには、ピッカー・フラグメントを使用するフィールド・テンプレートにフィールドを関連付ける必要があります。それは次に行います。

3. フィールド・テンプレートへのフィールドの関連付け

カスタム動的選択リスト・フィールドにピッカーを追加して、拡張検索機能をユーザーに提供します。これを行うには、ピッカー・フラグメントを使用するフィールド・テンプレートにフィールドを関連付けます。

ノート:

次のステップでは、必須のピッカー・パラメータについて説明しますが、他のパラメータも設定できます。「cx-pickerフラグメントのパラメータ」を参照してください。

  1. 引き続き「ルール・セット」タブでデフォルト・レイアウトを表示していることを確認します。

  2. 「Account_Id_c」フィールドをクリックします。

    このスクリーンショットは、Account_Id_cフィールドを示しています。

  3. 「プロパティ」ペインで、「テンプレート」フィールドの上にある「作成」をクリックします。

    ノート:

    これらのステップをEdit Layoutルール・セットのレイアウトについてもう一度実行する場合は、「テンプレート」フィールドでフィールド・テンプレートを作成する必要はありません。かわりに、次のステップで作成するテンプレートを選択できます。

  4. 「テンプレートの作成」ダイアログで、「ラベル」フィールドにテンプレートのラベルを入力します。

    この例では、AccountPickerTemplateと入力します。

    このスクリーンショットは、フィールド・テンプレートを作成する方法を示しています。

  5. 「作成」をクリックします。

    Visual Builder Studioによって、構造ペインに表示される「入力テキスト」ノードを含め、基本的な構造を持つプレースホルダ・テンプレートが作成されます。

    このスクリーンショットは、構造ペインに表示される、フィールド・テンプレートの「入力テキスト」ノードを示しています。

  6. 「入力テキスト」ノードを右クリックし、「削除」をクリックして、構造ペインからデフォルトの「入力テキスト」ノードを削除します。

  7. 「コード」ボタンをクリックします。

    このスクリーンショットは、「コード」ボタンを示しています。

  8. テンプレート・エディタで、accountPickerTemplateテンプレート・タグを選択します。

    このスクリーンショットは、テンプレート・タグを示しています。

  9. 「コンポーネント」パレットで、「フィルタ」フィールドにcx-pickerと入力します。

  10. cx-pickerフラグメントを、テンプレート・エディタのテンプレート・タグの間にドラッグ・アンド・ドロップします。

    このスクリーンショットは、cx-pickerフラグメントをテンプレート・エディタにドラッグする方法を示しています。

  11. 次のスクリーンショットに示されているように、フラグメント・コードが選択されていることを確認します。

    このスクリーンショットは、フラグメント・コードを選択する方法を示しています。

    ヒント:

    構造ペインで、ピッカー・テンプレートのフラグメント・コンテナ・ノードを選択すると、同じことが行われます。

    このスクリーンショットは、構造ペインのフラグメント・コンテナ・ノードを示しています。

  12. cx-pickerフラグメントの「プロパティ」ペインの「入力パラメータ」セクションで、必須ピッカー・パラメータの値を設定します。

    cx-pickerフラグメントの必須パラメータ

    パラメータ

    サンプル値

    説明

    dynamicLayoutContext

    [[ $dynamicLayoutContext ]]

    このパラメータはデフォルトで設定され、フィールドが作成または編集ページに表示される場合は、変更する必要はありません。

    このフィールドが作成または編集ページに表示されない場合、詳細は、「cx-pickerフラグメントのパラメータ」dynamicLayoutContextの説明を参照してください。

    pickerLayoutId

    PickerLayout

    このパラメータは、そのレイアウトによって実行時におけるピッカーの外観が制御されるルール・セットを指し示します。

    デフォルト値は、カスタム・オブジェクトを含め、それぞれのオブジェクトについて事前定義されているPicker Layoutルール・セットのIDであるPickerLayoutであり、これを変更する必要はありません。

    カスタム・ルール・セットを作成する必要がある場合は、ルール・セットを動的表として作成し、「ラベル」フィールドと「ID」フィールドの値が同じであることを確認します。その後、このパラメータにIDを追加します。

    resource

    [[ {"name": "accounts","displayField":"OrganizationName","endpoint":"cx-custom","primaryKey":"PartyId" } ]]

    このパラメータを使用して、ターゲット・オブジェクトの名前およびエンドポイントを渡します:

    • name - ターゲット・オブジェクト名

    • endpoint - ターゲット・オブジェクト・エンドポイント

    オプションで、次の追加属性を渡します:

    • displayField - ユーザーが選択を行った後にピッカー・フィールドに表示されるフィールド値。ここで指定しない場合、ピッカーにはデフォルトで、ピッカー・レイアウトの最初のフィールドが表示されます。

    • primaryKey - primaryKeyの導出元となるフィールド。指定しない場合、オブジェクトのprimaryKeyフィールドが使用されます。

    必ず、ユース・ケースに適した値を使用してresourceパラメータを更新してください。たとえば、accountsを、動的選択リスト・フィールドの基になるオブジェクトのREST API名に置き換えます。

    cx-pickerフラグメントに設定できるその他のパラメータについては、「cx-pickerフラグメントのパラメータ」を参照してください。

4. ピッカー・レイアウトの構成

最後に、Picker Layoutルール・セットを変更して、ピッカーに表示されるフィールドを選択します。このルール・セットのレイアウトによって、実行時におけるピッカーの外観が制御されます。

Picker Layoutルール・セットおよびデフォルト・レイアウトは、カスタム・オブジェクトを含め、それぞれのオブジェクトについて事前定義されています。

この例では、アカウントのピッカーを追加するため、アカウント・オブジェクトのPicker Layoutルール・セットを変更する必要があります。

  1. 「レイアウト」サイド・タブで、「CX Sales」 > 「Accounts」ノードをクリックします。

    このスクリーンショットは、「レイアウト」タブで選択するノードを示しています。

  2. 「Accounts」タブの「ルール・セット」タブで、Picker Layoutルール・セットをクリックします。

  3. 「デフォルト」レイアウトを複製し、「開く」アイコンをクリックして、default_copyレイアウトを編集します。

    このスクリーンショットは、レイアウトを編集する方法を示しています。

  4. フィールドのリストをスクロールして、目的のフィールドをピッカー・レイアウトに追加します。

    ヒント:

    フィールドをよりすばやく見つけるには、「フィルタ」フィールドを使用します。たとえば、「フィルタ」フィールドにcityと入力します。

  5. フィールド・リストからフィールド「City」を選択します。

    フィールドを選択すると、リストの右下にあるフィールドのリストに表示されます。オプションで、フィールドのハンドルを使用して、フィールドを目的の場所にドラッグできます。

    このスクリーンショットは、フィールドをすばやく見つける方法を示しています。

ピッカー・フローのテスト

ここで、値リスト・フィールドに追加したピッカーをテストします。

  1. payment_c-listページから、「プレビュー」ボタンをクリックして、ランタイム・テスト環境の変更を表示します。

    これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。
  2. 結果のプレビュー・リンクは次のようになります:

    https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list

  3. プレビュー・リンクを次のように変更します:

    https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list

    ノート:

    プレビュー・リンクに/application/containerを追加する必要があります。

    次のスクリーンショットは、データを含むリスト・ページがどのように見えるかを示しています。

    これは、テスト・リスト・ページのスクリーンショットです。

  4. 処理バーに、支払の作成と入力します。

  5. 「支払の作成」をクリックします。

    「支払の作成」ドロワーが表示されます。

  6. 「支払の作成」ドロワーで、「アカウント」フィールドの横にある3つのドットをクリックして、保存済検索のリストを表示します。

    このスクリーンショットは、保存済検索のリストを含むピッカーを示しています。

  7. 一部のテキストをフィールドに入力すると、ピッカーで適応型検索が使用され、一致する結果が返されます。次の例では、pinnacle techと入力しました。

    このスクリーンショットは、キーワード検索がピッカーでどのように機能するかを示しています。

    ピッカーで、austinなどの市区町村に基づいて検索してみると、他のレコード属性に基づいてどのように検索できるかがわかります。

    このスクリーンショットは、キーワード検索がピッカーでどのように機能するかを示しています。

    検索の仕組みを理解するには、Oracle Fusion Cloud Sales Automationデジタル営業(Redwood営業)の使用ガイドの検索およびリストの章にあるフィールド内の検索を参照してください。

  8. ピッカーの外観に問題がなければ、これらの同じステップを編集レイアウトについて繰り返します。

    2つ目のレイアウトを構成するときには、新しいフィールド・テンプレートを作成してピッカー・フラグメントを再度構成する必要はありません。この手順で作成したフィールド・テンプレートを選択できます。

    また、ピッカー・レイアウトをもう一度構成する必要もありません。

  9. Gitのプッシュ・コマンドを使用して、作業内容を保存します。

    「Git」タブにナビゲートし、変更をレビューして、Gitのプッシュを実行します(コミットとGitリポジトリへのプッシュの両方が行われます)。

    このスクリーンショットは、Gitのプッシュ・コマンドの使用方法を示しています。