Create a Link Field for Related Objects (Many-to-Many)

When we configured the Contacts subview, we added a few fields to the subview table, including the ContactName_c field. Let's make the ContactName_c field into a hyperlinked field so that, at runtime, users can click that field to navigate to the Contact detail page.

Create the Link Field on a Subview

Click the Layouts tab, then click PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt > Rule Sets subtab.
Click the SubViewLayout rule set.
Click the Open icon next to the default layout.
Click the ContactName_c field to highlight it.
Create a field template.
1. On the Properties pane, next to the Template field, click Create.
2. In the Create Template dialog, in the Label field, enter linkTemplate.
3. Accept the template's ID and click Create.
  
  You're navigated to the Templates subtab where you can design the linkTemplate.
4. Click the Code button.
5. Delete the line for the default Input Text entry between the linkTemplate tags.
  
  <oj-input-text value="{{ $value }}" label-hint="[[ $labelHint ]]"></oj-input-text>
6. On the Templates tab, expand the Components palette if necessary.
7. In the Filter field, enter Hyperlink.
8. Drag and drop the Hyperlink component to the template editor, between the linkTemplate template tags.
9. On the Properties pane for the Hyperlink node, in the Text field, click the Expression Editor icon (fx).
10. In the Expression Editor dialog, delete the value from the text box and enter $value.ContactName_c.
11. Click Save.
12. In the Target field, select Same Frame.
13. On the Data tab, in the URL field, enter #.
14. Add the following property to the template, using the ID field that's passed to the detail page:
  
  :_primaryKeyId="[[$value.<idFieldName>()]]"
  
  In our example, add this:
  
  :_primaryKeyId="[[$value.Person_Id_Tgt_PersonToPaymentContactMMInter_c()]]"
  
  The resulting code looks like this:
```
<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>
```
Next, create a virtual field.
1. On the PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt tab, click the Fields subtab.
2. Click + Custom Field.
3. In the Create Field dialog, in the Label field, enter linkField.
4. In the Type field, select Object (Virtual Field).
5. Click Create.
6. On the Properties pane for the new virtual field, next to the Fields section, click Add and add these two fields:
  - Person_Id_Tgt_PersonToPaymentContactMMInter_c
  - ContactName_c
  The first field is the ID field that's passed to the detail page, and the second field is the name field that's needed to show in the Hyperlink component.
7. Set the labelHint property so that the column label will display at runtime.
  1. On the Properties pane, click the JSON button.
  2. Add the following to the JSON for the linkField field:
    
    "labelHint": "[[$translations.CustomBundle.ContactName()]]",
8. In the same JSON, add the following "imports" section as a peer of "addField":
```
,
"imports": {
  "translations": {
      "self": [
        "CustomBundle"
      ]
    }
```
Next, add the link field to the Contact subview's layout:
1. Click the Rule Sets subtab, then click SubViewLayout to return to the subview rule set.
2. Click the Open icon next to the default layout.
3. Delete the ContactName_c field from the list of fields to display.
4. Click the linkField field to add it to the subview layout.
5. Under Select fields to display, drag the linkField field to the first position.
6. On the Properties pane, in the Template field, select linkTemplate.
Next, create an event listener and action chain.
1. On the PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt tab, click the Templates subtab.
2. Click the linkTemplate.
3. In the Structure view, click the Hyperlink node.
4. On the Properties pane, click the Events subtab.
5. Click + New Event > On 'click'.
6. On the Actions subtab, above the Properties pane, click the Code button.
7. In the code, update the HyperlinkClickChain section so that it looks like this (update as needed for your own use case if you're not using the Contact object):
```
  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',
        },
      });  
    }
  }
```
Map the event variable to the event parameter:
1. On the PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt tab, click the Event Listeners subtab.
2. In the Component Event Listeners section, highlight the HyperlinkClickChain row.
3. On the Properties pane, in the Input Parameters section, click event.
  1. In the Map Variables to Parameters dialog, map the Event > event variable on the Sources side to the event parameter on the Target side.
  2. Click the Expression option.
  3. Click Save.

Create the Link Field on a Panel

We have already created the field template and virtual field, so we can update the panel with the link field, as well.

Click the Layouts tab, then click PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt > Rule Sets subtab.
Click the PanelCardLayout rule set.
Click the Open icon next to the default layout.
In the item1 slot, delete the ContactName_c field and add the linkField field instead.
To associate the linkField field with the linkTemplate template:
1. Click the PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt tab > JSON subtab.
2. In the PanelCardLayout layout section, add the linkField field to the "displayProperties" section.
  
  Add the linkTemplate template as follows:
```
,
      "fieldTemplateMap": {
        "linkField":"linkTemplate"
      }
```
  The updated JSON should look like this:

Test the Link Fields on the Panel and Subview

Test the link fields by previewing your application extension from the payment_c-list page.

From the payment_c-list page, click the Preview button to see your changes in your runtime test environment.
The resulting preview link will be:

https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list
Change the preview link as follows:

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

Note: You must add /application/container to the preview link.

The screenshot below illustrates what the list page looks like with data.
If data exists, you can click any record on the list page to drill down to the detail page. The detail page, including header region and panels, should display.

You should now see a Contacts panel.
Click a contact name on the Contacts panel to drill down to the Contact detail page.
Click the browser back button.
Click the View All Contacts link at the bottom of the Contacts panel to drill down to the subview.
Click a contact name on the subview to drill down to the Contact detail page.
Save your work by using the Push Git command.
Navigate to the Git tab, review your changes, and do a Git push (which does both a commit and a push to the Git repository).