X

Shay Shmeltzer's Oracle Development Tools Tips

Dependent Lists in an Editable Table with Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

In my previous blog I showed how to create an editable table in Visual Builder, and it also showed including a list of values for one of the fields. A specific use case that could be added to that requirement is the ability to condition the values shown in a selection list in each row based on a value in another field in that row. While dependent LOVs are quite easy to achieve when using a form to edit a specific record (one more reason to use pop-up for edit of a specific record), in a multi-row table scenario this might be a bit more tricky. Below you'll find one solution for this.

I'm using a page module function that returns an array of options to be shown in the select component. The function receives an input parameter and decides which lists of values to return in the array based on the value of the parameter. Here is the code for the function in the video demo:

  PageModule.prototype.popList = function(salary){
    var retArray;
    if (salary > 3000){
       retArray = [{department : "Marketing", id : "1"}, {department : "Sales", id : "2"}];
    }
    else {
       retArray = [{department : "Marketing", id : "1"}, {department : "Sales", id : "2"},{department : "Support", id : "3"}, {department : "IT", id : "4"},{department : "HR", id : "5"}];   
    }
    return retArray;
  }

Once you have the function in place you can hook the selectOne component to that function as the source for the options attribute and pass in a value of another field in the same record. (Don't forget to specify the options-keys.id and options-keys.label attribute to match when you return from the function

<oj-select-one options="{{$page.functions.popList($variables.myRow.salary)}}" options-keys.value="id" options-keys.label="department" value="{{ $variables.myRow.department }}" ></oj-select-one>

Here is a quick video showing the solution in action and the code behind it.

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.