javascriptoracle-apexinteractive-grid

Set page item with value from interactive grid column when clicking on the grid region

I'm using apex 22.1. I'm trying to set a page field with a value from interactive grid column on the row I'm currently on, and it needs to change if I change the row I'm on.

This is what I have tried. I have assigned static id to the grid "IG_GRID". One of the columns on the grid is named "OS_TIP". I have a page item named "P660_LOV_OS_TIP". I want to click on the IG region, on a row, and when I do that, I want the item P660_LOV_OS_TIP to be populated with the value from column OS_TIP on the row I'm on. What I have tried is creating dynamic action on IG region with event "Selection change [Interactive grid]". I then created true action "set value", set type "Javascript expression". I used this code for js:

apex.region("IG_GRID").widget().interactiveGrid("getViews").grid.model.getValue($v("CURRENT_ROW_INDEX"), "OS_TIP")

Under affected items selection type I chose "Item's", under items I set my item "P660_LOV_OS_TIP". But when I click anywhere on the grid, nothing happens, my page item is not set with a value. If I open console and enter the JS code above, I get "unedfined" response. What am I doing wrong? How can I set this page item by selecting a IG row. I'm not good with javascript, so error is probably there.

Solution

  • Here is an example to set a page item P148_SELECTED_FIRST to the value of the column "ENAME" on select of the row. The IG is on the EMP table of the EMP/DEPT sample dataset.

    Create a dynamic action on "Selection Change [Interactive Grid]". Add a true action of type "Execute Javascript Code" with source:

    const model = this.data.model,
    records = this.data.selectedRecords;
let values = records.map( r => model.getValue( r, "ENAME" ) ); 

apex.item( "P148_SELECTED_FIRST" ).setValue( values[0] );

    Note the values is an array because - if the checkbox is visible - a user can select multiple records. The code above sets the page item to the first value of the array.

    --Update--

    An interactive grid column of type "Popup LOV" has 2 attributes: a display value and a value. This can be seen in the console if you output the javascript variable in the console:

    enter image description here

    Just pick the attribute you need. To set the display value:

    apex.item( "P148_SELECTED_FIRST" ).setValue( values[0].d );

    or selected value

    apex.item( "P148_SELECTED_FIRST" ).setValue( values[0].v );