関連オブジェクトのリンク・フィールドの作成(多対多)

担当者サブビューを構成したら、ContactName_cフィールドを含むいくつかのフィールドをサブビュー表に追加しました。 ContactName_cフィールドをハイパーリンク・フィールドにして、実行時にユーザーがそのフィールドをクリックして担当者詳細ページにナビゲートできるようにします。

サブビューでのリンク・フィールドの作成

「レイアウト」タブをクリックし、PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt > 「ルール・セット」サブタブをクリックします。
SubViewLayoutルール・セットをクリックします。
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
ContactName_cフィールドをクリックして強調表示します。
フィールド・テンプレートを作成します。
1. プロパティ・ペインで、テンプレート・フィールドの横にある「作成」をクリックします。
2. 「テンプレートの作成」ダイアログのラベル・フィールドに、linkTemplateと入力します。
3. テンプレートのIDを受け入れて、「作成」をクリックします。
  
  linkTemplateを設計できるテンプレート・サブタブにナビゲートします。
4. 「コード」ボタンをクリックします。
5. linkTemplateタグの間のデフォルトの入力テキスト・エントリの行を削除します。
  
  <oj-input-text value="{{ $value }}" label-hint="[[ $labelHint ]]"></oj-input-text>
6. 必要に応じて、テンプレート・タブでコンポーネント・パレットを展開します。
7. フィルタ・フィールドに、Hyperlinkと入力します。
8. ハイパーリンク・コンポーネントをテンプレート・エディタのlinkTemplateテンプレート・タグの間にドラッグ・アンド・ドロップします。
9. ハイパーリンク・ノードのプロパティ・ペインのテキスト・フィールドで、式エディタ・アイコン(fx)をクリックします。
10. 「式エディタ」ダイアログで、テキスト・ボックスから値を削除し、$value.ContactName_cと入力します。
11. 「保存」をクリックします。
12. ターゲット・フィールドで、「同じフレーム」を選択します。
13. データ・タブのURLフィールドに、#と入力します。
14. 詳細ページに渡されるIDフィールドを使用して、次のプロパティをテンプレートに追加します:
  
  :_primaryKeyId="[[$value.<idFieldName>()]]"
  
  この例では、次を追加します:
  
  :_primaryKeyId="[[$value.Person_Id_Tgt_PersonToPaymentContactMMInter_c()]]"
  
  結果のコードは次のようになります:
```
<template id="linkTemplate">
  <a target="_self" class="oj-link" href="#" :_primaryKeyId="[[$value.Person_Id_Tgt_PersonToPaymentContactMMInter_c()]]"><oj-bind-text value="[[ $value.ContactName_c ]]"></oj-bind-text></a>
</template>
```
次に、仮想フィールドを作成します。
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、フィールド・サブタブをクリックします。
2. 「+カスタム・フィールド」をクリックします。
3. 「フィールドの作成」ダイアログのラベル・フィールドに、linkFieldと入力します。
4. タイプ・フィールドで、「オブジェクト(仮想フィールド)」を選択します。
5. 「作成」をクリックします。
6. 新しい仮想フィールドのプロパティ・ペインで、フィールド・セクションの横にある「追加」をクリックし、次の2つのフィールドを追加します:
  - Person_Id_Tgt_PersonToPaymentContactMMInter_c
  - ContactName_c
  第1フィールドは詳細ページに渡されるIDフィールドで、第2フィールドはハイパーリンク・コンポーネントで表示する必要がある名前フィールドです。
7. 列ラベルが実行時に表示されるように、labelHintプロパティを設定します。
  1. プロパティ・ペインで、JSONボタンをクリックします。
  2. linkFieldフィールドのJSONに次を追加します:
    
    "labelHint": "[[$translations.CustomBundle.ContactName()]]",
8. 同じJSONで、次の"imports"セクションを"addField"のピアとして追加します:
```
,
"imports": {
  "translations": {
      "self": [
        "CustomBundle"
      ]
    }
```
次に、リンク・フィールドを担当者サブビューのレイアウトに追加します:
1. ルール・セット・サブタブをクリックし、SubViewLayoutをクリックしてサブビュー・ルール・セットに戻ります。
2. 「デフォルト」レイアウトの横にある開くアイコンをクリックします。
3. 表示するフィールドのリストからContactName_cフィールドを削除します。
4. linkFieldフィールドをクリックして、サブビュー・レイアウトに追加します。
5. 「表示するフィールドの選択」で、linkFieldフィールドを最初の位置にドラッグします。
6. プロパティ・ペインのテンプレート・フィールドで、linkTemplateを選択します。
次に、イベント・リスナーおよびアクション・チェーンを作成します。
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、テンプレート・サブタブをクリックします。
2. linkTemplateをクリックします。
3. 構造ビューで、ハイパーリンク・ノードをクリックします。
4. プロパティ・ペインで、イベント・サブタブをクリックします。
5. 「+新規イベント」 > 「クリックで」をクリックします。
6. アクション・サブタブのプロパティ・ペインの上にあるコード・ボタンをクリックします。
7. コードで、HyperlinkClickChainセクションを次のように更新します(Contactオブジェクトを使用していない場合は、独自のユースケースで必要に応じて更新します):
```
  class HyperlinkClickChain extends ActionChain {

    /**
     * @param {Object} context
     */
    async run(context, {event}) {
      const { $layout, $extension, $responsive, $user } = context;

          const navigateToApplicationCxSalesResult = await Actions.navigateToApplication(context, {
        application: 'cx-sales',
        flow: 'application',
        page: 'container/contacts/contacts-detail',
        params: {
          id: event.target.getAttribute('_primarykeyid'),
          view: 'foldout',
        },
      });  
    }
  }
```
「イベント」変数を「イベント」パラメータにマップします:
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、イベント・リスナー・サブタブをクリックします。
2. 「コンポーネント・イベント・リスナー」セクションで、HyperlinkClickChain行を強調表示します。
3. プロパティ・ペインの「入力パラメータ」セクションで、「イベント」をクリックします。
  1. 「変数をパラメータにマップ」ダイアログで、「ソース」側の「イベント」→「イベント」変数を「ターゲット」側のイベント・パラメータにマップします。
  2. 式オプションをクリックします。
  3. 「保存」をクリックします。

パネルでのリンク・フィールドの作成

フィールド・テンプレートと仮想フィールドはすでに作成されているため、リンク・フィールドを使用してパネルを更新することもできます。

「レイアウト」タブをクリックし、PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt > 「ルール・セット」サブタブをクリックします。
PanelCardLayoutルール・セットをクリックします。
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
item1スロットで、ContactName_cフィールドを削除し、かわりにlinkFieldフィールドを追加します。
linkFieldフィールドをlinkTemplateテンプレートに関連付けるには:
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブ→「JSON」サブタブをクリックします。
2. PanelCardLayoutレイアウト・セクションで、linkFieldフィールドをdisplayPropertiesセクションに追加します。
  
  次のようにlinkTemplateテンプレートを追加します:
```
,
      "fieldTemplateMap": {
        "linkField":"linkTemplate"
      }
```
  更新されたJSONは次のようになります:

パネルとサブビューでリンク・フィールドをテスト

payment_cリスト・ページからアプリケーション拡張をプレビューして、リンク・フィールドをテストします。

payment_c-listページで、プレビュー・ボタンをクリックして、ランタイム・テスト環境の変更を表示します。
結果のプレビュー・リンクは次のようになります:

https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list
プレビュー・リンクを次のように変更します:

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

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

次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。
データが存在する場合は、リスト・ページの任意のレコードをクリックして詳細ページにドリルダウンできます。ヘッダー・リージョンおよびパネルを含む詳細ページが表示されます。

担当者パネルが表示されます。
担当者パネルで担当者名をクリックして、担当者詳細ページにドリルダウンします。
ブラウザの戻るボタンをクリックします。
担当者パネルの下部にあるすべての担当者を表示リンクをクリックして、サブビューにドリルダウンします。
サブビューで担当者名をクリックして、担当者詳細ページにドリルダウンします。
Push Gitコマンドを使用して作業内容を保存します。
Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。