With the move to using Oracle JET 9 in Visual Builder we recommend using the oj-single-select component to implement selection lists. This component provides various advantages such as an easy way to get additional values from the selected record. Another cool capability of the component, is the ability to layout your list with a variety of layouts. In this blog we show you how to format a drop down list as a table with multiple columns.

We are basing the solution on the JET Cookbook sample for collection template, and the item template.

The first step is to make sure you select the additional fields you want to display in the quick start that binds your select single to data.

Next copy the code from the JET cookbook, and replace the definition of the columns to point to the columns you chose in the quick start. We are also replacing the column output to use a regular oj-bind-text.

Check out the video for the complete sample:

The code for the list end up looking like this:

<oj-select-single class="oj-flex-item oj-sm-12 oj-md-6" data="[[$variables.employeesListSDP]]" item-text="name">

<template slot="collectionTemplate" data-oj-as="collection">

<oj-table id="table1" aria-label="select results" horizontal-grid-visible="disabled"

vertical-grid-visible="disabled" selection-mode='{"row": "single"}'' columns-default=' {"resizable": "disabled"

, "sortable" : "disabled" }' class="oj-select-results" data="[[collection.data]]"

selected.row="[[collection.selected]]" current-row="{{collection.currentRow}}" columns='[

{"headerText": "Name", "field": "name", "template": "cellTemplate"},

{"headerText": "Id", "field": "id", "template": "cellTemplate"},

{"headerText": "Salary", "field": "salary", "template": "cellTemplate"}

]'

on-oj-row-action="[[collection.handleRowAction]]">

<template slot="cellTemplate" data-oj-as="cell">

<oj-bind-text value="[[String(cell.data)]]"></oj-bind-text>

</template>

</oj-table>

</template>

</oj-select-single>

By the way – you are not limited to a table layout, you can create other layout as well for each row. For example this one uses the item template:

List layout for item

Is created using the itemTemplate code below:

  <oj-select-single label-hint="Select (Single)"
    class="oj-flex-item oj-sm-12 oj-md-6"
    data="[[$page.variables.employeesListSDP2]]" item-text="name">
    <template slot="itemTemplate">

      <div>
        <oj-bind-text value='[[$current.data.id + ", " + $current.data.name]]'>
        </oj-bind-text>
      </div>
      <div style='font-style: italic;'>
        <oj-bind-text value='[[$current.data.salary]]'></oj-bind-text>
      </div>
      <div style='font-style: italic;color:red;'>
        <oj-bind-text value='[[$current.data.country]]'></oj-bind-text>
      </div>
    </template>
  </oj-select-single>