Interactive Grid : Customized features

Interactive Girds in APEX comes with many in-built interactive features which are normally utilized by developers as it is. But in some cases we need to hide the in-built features and add our own customized features on the interactive grid.

Today in this post I am going to talk about few additional features which I recently added on my interactive grid in one of the applications.

These are the four buttons which I added in my grid.

Step 1: Give the interactive grid region a static id. In this example I used "FIAColumnMapping"

Step 2:

Button: Move Up

Create a dynamic action with three True Actions.

Event : Click

True Action 1: Execute JavaScript Code

Code

var view = apex.region("FIAColumnMapping").widget().interactiveGrid("getCurrentView");
var model = view.model;
var records = view.getSelectedRecords();
var pk = model.getValue(records[0], "ETL_COLUMN_MAP_ID");
apex.item( "P7_ETL_COLUMN_MAP_ID" ).setValue(pk);

True Action 2: Execute Server-side Code

Code

declare
    l_etl_column_map_ids number; 
    l_prev_etl_column_map_id integer;
begin
    -- Get the PK of prior record
    begin

        .....................
        .....................
        .....................
        
    exception
    when others then
        return; -- stop processing!
    end;

    -- Move the current record up
    update etl_column_maps
    set sort_order = sort_order - 1
    where etl_column_map_id = :P7_ETL_COLUMN_MAP_ID;

    -- Move the prior reocrd down
    update etl_column_maps
    set sort_order = sort_order + 1
    where etl_column_map_id = l_prev_etl_column_map_id;
end;      

True Action 3: Execute JavaScript Code

Code

apex.region("FIAColumnMapping").refresh();

Button: Move Down

Create a dynamic action with three True Actions.

Event : Click

True Action 1: Execute JavaScript Code

Code

var view = apex.region("FIAColumnMapping").widget().interactiveGrid("getCurrentView");
var model = view.model;
var records = view.getSelectedRecords();
var pk = model.getValue(records[0], "ETL_COLUMN_MAP_ID");
apex.item( "P7_ETL_COLUMN_MAP_ID" ).setValue(pk); 

True Action 2: Execute Server-side Code

Code

declare
    l_etl_column_map_ids number; 
    l_prev_etl_column_map_id integer;
begin
    -- Get the PK of prior record
    begin
    
        ......................
        ......................
        ......................
    
    exception
    when others then
        return; -- stop processing!
    end;

    -- Move the current record down
    update etl_column_maps
    set sort_order = sort_order + 1
    where etl_column_map_id = :P7_ETL_COLUMN_MAP_ID;

    -- Move the prior record up
    update etl_column_maps
    set sort_order = sort_order - 1
    where etl_column_map_id = l_prev_etl_column_map_id;
end;      

True Action 3: Execute JavaScript Code

Code

apex.region("FIAColumnMapping").refresh();

Button: Add

Create a dynamic action

Event : Click

True Action : Execute JavaScript Code

Code

    var row$,
    region = apex.region("FIAColumnMapping"),
    view = region.call("getCurrentView");

if ( view.internalIdentifier === "grid" ) {
    row$ = region.widget().find(".a-GV-row").last();
    view.view$.grid("setSelection", row$);
    region.call("getActions").invoke("selection-add-row");
}

setTimeout(function() {
    //executed after 200 milliseconds
    var model = view.model;
    var records = view.getSelectedRecords();
    model.setValue(records[0], "SORT_ORDER", $v('P7_NEXT_POS'));
}, 200);

Note: If required we can disable the buttons after clicking on ADD button by adding more True Actions on the same dynamic action.

Button: Delete

Create a dynamic action.

Event : Click

True Action : Execute JavaScript Code

Code

apex.region("FIAColumnMapping").widget().interactiveGrid("getActions").invoke("selection-delete");

Button: Delete All

Deleting all records through a backend package

This way I customized the functionality of buttons applicable on interactive grid.

I hope you liked this post.

Thanks for reading !!