Getting The Label/Description Value from a Select List in Visual Builder

When you add a select list component such as selectOneChoice to a Visual Builder page, you get a nice wizard that helps you bind it to data, and you can then easily access the value that you select in the list. However in some cases you might want to access the label of the list rather than the value. Here is a quick tip that will help you get there.

Oracle JET introduced a new attribute to the oj-select-one component called value-option – this contains an object with two fields value and label that synch up with the list. Read more about this attribute in the JET Doc here.

Right now there is no design time support for using this property in VBCS right now, but you can still leverage it.

First create a page variable of type object and then add two string attribute in it called label and value.

Next go into the page layout editor and switch to the code editor view and add the value-option option to your component (note that you should use curly braces):

You can now refer to the label using a syntax such as:

{{ $page.variables.selectedVal.label }}

For example this page:

The Code would be:

<div class="oj-flex">
    <oj-label id="oj-label--490912658-1" for="oj-select-one--490912658-1" class="oj-flex-item oj-sm-12 oj-md-2">Select (One)</oj-label>
    <oj-select-one value-option="{{$page.variables.selectedVal}}" options="[[$page.variables.airlineListServiceDataProvider]]" options-keys.value="id" options-keys.label="airline" value="{{ $page.variables.airline }}" id="oj-select-one--490912658-1" class="oj-flex-item oj-sm-12 oj-md-4" ></oj-select-one>
</div>
<div class="oj-flex">
    <oj-label id="oj-label--490912658-2" for="oj-input-text--490912658-1" class="oj-flex-item oj-sm-12 oj-md-2">value</oj-label>
    <oj-input-text id="oj-input-text--490912658-1" class="oj-flex-item oj-sm-12 oj-md-4" value="{{ $page.variables.airline }}"></oj-input-text>
</div>
<div class="oj-flex">
    <oj-label id="oj-label--490912658-3" for="oj-input-text--490912658-2" class="oj-flex-item oj-sm-12 oj-md-2">Selected val label</oj-label>
    <oj-input-text id="oj-input-text--490912658-2" class="oj-flex-item oj-sm-12 oj-md-4" placeholder="{{ $page.variables.selectedVal.label }}" value="{{ $page.variables.selectedVal.label }}"></oj-input-text>
</div>
<div class="oj-flex">
    <oj-label id="oj-label--490912658-4" for="oj-input-text--490912658-3" class="oj-flex-item oj-sm-12 oj-md-2">selected val value</oj-label>
    <oj-input-text id="oj-input-text--490912658-3" class="oj-flex-item oj-sm-12 oj-md-4" value="{{ $page.variables.selectedVal.value }}"></oj-input-text>
</div>