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.

 

Join the discussion

Comments ( 4 )
  • Harsh Patel Monday, November 23, 2020
    I am trying to achieve the same thing but the only difference is that I am using an another LOV as the source LOV based on which the value of another lov should get updated.

    1. The second LOV is not getting refreshed based on the value I select from the source LOV.

    2. If i use the refresh of the firedataprovider the value of the site column that is already selected gets resetted and gets blank.
  • Shay Shmeltzer Monday, November 23, 2020
    Harsh, Check the browser's console to see which value is being picked and passed to the REST call for the second LOV. Then follow up with the information on our forum: https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
  • Dutta Sunday, January 10, 2021
    Hi Shay - Thank you for the nice blog post. However I have a query on the video posted. Since Department BO(id,departmentname) is related to Employee BO(name, deptid, countrycode), we can see the department name as department id is the foreign key. what if we have to show country name instead of country code and Country BO(country code and country name) is not related to Employee BO.

    So the query is how to show data in a table for two unrelated BOs where the code/id is used in one of the BO.

    Could you please help me here?

    Thank you.
  • Shay Shmeltzer Sunday, January 10, 2021
    Dutta, use our forum for technical help:
    https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    In general you would need to call the Country REST API to get the name for every row - you can do this by customizing the fetch of the SDP bound to your table.
    A better solution would be to have a backend REST API that returns the combined data.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.