1. How do I create an application extension for custom objects in Oracle Visual Builder Studio?
  2. Display Different Fields in a Picker

Display Different Fields in a Picker

Depending on how you use the context parameter in the cx-picker fragment, you can display different fields in the picker at runtime. For example, the picker could display either Field A or Field B.

To display different fields in a picker, use the context parameter. You'll also have to do the following:

  • create a custom variable

  • update the picker layout display properties in the picker object's JSON

Let's look at an example using the Account picker documented in Configure the Picker.

In this example, the picker you already created includes both the Address and Primary Contact fields.

This screenshot illustrates how the keyword search works in a picker.

Using the context parameter, you can instead show either the Address or Primary Contact field, depending on the value of a custom variable.

Here's how to set this up:

1. Create the Custom Variable

First, create the custom variable on the picker's object:

  1. On the Layouts side tab, click the CX Sales > Accounts node.

    This screenshot illustrates the node to select on the Layouts tab.

  2. On the Accounts tab, click the Variables subtab.

  3. Click + Variable.

  4. In the Create Variable dialog, make sure the Variable option is selected and, in the ID field, enter showContact.

  5. In the Type field, select Boolean.

  6. Click Create.

2. Add the Condition to the Picker Display Properties

Next, add the condition (which field to show depending on the value of the variable) to the picker layout display properties in the Account object's JSON.

  1. On the Accounts tab, click the JSON subtab.

  2. Find the picker layout display properties.

    This screenshot illustrates the picker's display properties.

  3. In the display properties section, replace the two lines for the "FormattedAddress" and "PrimaryContactName" fields with a single line:

    "{{ $componentContext.showContact ? 'PrimaryContactName' : 'FormattedAddress' }}",

3. Set the Value of the Variable in the Picker Fragment

Finally, define the value of the variable (true or false) in the picker fragment itself.

  1. On the Layouts side tab, click the Payment_c node.

    This screenshot illustrates the nodes that you can select on the Layouts tab.

  2. On the Payment_c tab, Templates tab, click the AccountPickerTemplate template.

  3. Make sure the fragment code is selected, as illustrated in this screenshot.

    This screenshot illustrates how to select the fragment code.

    Tip: On the Structure pane, selecting the Fragment Container node for the picker template accomplishes the same thing.

    This screenshot illustrates the Fragment Container node in the Structure pane.

  4. On the Properties pane for the cx-picker fragment, in the Input Parameters section, set the value for the context parameter. You can set the showContact variable to true or false:

    [[ {'showContact':true} ]]

    or

    [[ {'showContact':false} ]]

4. Test Your Setup

You can now test each variable setting.

  1. Preview your extension and test the picker with the showContact variable as true:

    This screenshot illustrates the picker with the showContact variable as true.

  2. Next, preview your extension and test the picker with the showContact variable as false:

    This screenshot illustrates the picker with the showContact variable as false.