The Visual Builder Cloud Service Blog

  • June 8, 2018

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

Shay Shmeltzer
Director of Product Management - Oracle

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 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 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 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>

Join the discussion

Comments ( 2 )
  • Aashik Monday, June 25, 2018
    Hi Shay
    Does it mean that we can have only 4 values, or can the list of values be made dynamic. The idea is that I get the values from SaaS , to a PaaS, and then create a UI to select some values, do some data manipulation and send it back to SaaS.
    So , what I need is, sometimes the values in LOV will be 4 sometimes it will be 400. So I need scroll for 400 values or make it short by typing ABC% to make it pattern match.
  • Sai Monday, December 23, 2019
    Its really useful to pull the label also.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.