Dynamic Interactive Grid Row Creation Using Popup LOV (Single & Multi-Select)

Recently, I faced an interesting requirement in my project. I thought it would be worth sharing.

In an APEX page, a Popup LOV with multi-select is used. Based on the end user's selection, Interactive Grid rows are generated dynamically, and the selected values are set into an IG column at the same time.

If the user selects more than one value, multiple rows are generated and each selected value is set into a different row. 

For example, if the end user selects 10, 20, and 30 from the Popup LOV, the Interactive Grid generates three rows, and the Dept No column is set to 10, 20, and 30 respectively.

Step 1: Create a Popup LOV with multiple selection enabled (colon-separated delimited list).

Step 2: Create an Interactive Grid with the static ID EMP.

Step 3: Create a Submit button and add the below code in a Dynamic Action on the Click event.

var region  = apex.region("EMP");

var actions = region.call("getActions");

var view    = region.call("getCurrentView");

var model   = view.model;

var deptValues = $v("P4_DEPTNO");  // item name

if (!deptValues) return;

var deptArr = deptValues.split(":");

var targetCount = deptArr.length;

var currentCount = model.getTotalRecords();

for (var i = currentCount; i < targetCount; i++) {

    actions.invoke("selection-add-row");

}

model.forEach(function (rec, index) {

    if (index < targetCount) {

        model.setValue(rec, "DEPTNO", deptArr[index].trim()); // depno column name

    }

});

Demo