On closure of the popup set focus to IG column

1. Overview

This document talks about how to set focus to a particular column in an Interactive Grid report on the closure of inline pop up region using JavaScript.

2.Technologies and Tools Used

The following technologies have been used to achieve this functionality,

• JavaScript

3.Use Case

I received a requirement from a customer saying, when the focus moves out of a particular column, a popup report pops up, on the closure of the popup region the cursor should focus to the next column of the report in the same row.

4.Architecture

Assume that there is a column as “Sal”, when the focus moves out of the “Sal” column a popup region pops, on close of the popup region, the cursor focus should set to “Deptno” column in same of  the report.

Let us see step by step,

Step 1: Create an Interactive Grid for the table EMP and navigate to the advanced section of the region and provide the static id as EMP_IG.

Step 2: Create hidden item as “P2_SAL_HID_VAL”.

Step 3: Then, create a dynamic action on the SAL column as below,

                e.g.

Name – Cursor to deptno 1/3

                                Event – Lose focus

                                Selection Type – Column(s)

                                Region – EMP Interactive Grid <Your Interactive Region>

                                Column(s) – SAL

                                               Action – Execute JavaScript Code

                                              Code –

                                              var grid   = apex.region(‘EMP_IG’).widget().interactiveGrid(“getViews”, “grid”);

                                              var model  = grid.model;

                                              var record = grid.getSelectedRecords()[0];

                                             var value;

                                           // Code to find the popup triggering row’s  primary key value

                                          if (record) {

                                          value = model.getValue(record, ‘EMPNO’); //primary key value

                                          }

                                        apex.item(‘P2_SAL_HID_VAL’).setValue(value);

Step 4:

Name – Cursor to deptno 2/3

                                Event – click

                                Selection Type – JavaScript Expression

                                JavaScript Expression– document

                                Client-side Condition

                              Type – Item is not null

                              Item – P2_SAL_HID_VAL

                                Action – Execute JavaScript Code

                   Code–

                                var rec;

                                var widget = apex.region(EMP_’IG’).widget();

                                var grid = widget.interactiveGrid(‘getViews’, ‘grid’);

                               var model = grid.model;

                                model.forEach(function(r) {

                               if (model.getValue(r, ‘EMPNO’) == apex.item(“P2_SAL_HID_VAL”).getValue()) {

                               rec = model.getValue(r, ‘EMPNO’);

                               grid.gotoCell(rec,”DEPTNO”);

                              }

                              })

                              apex.item(‘P2_SAL_HID_VAL’).setValue(“”);

Step 5:

Name – Cursor to deptno 3/3

                                Event – Key Release

                                Selection Type – JavaScript Expression

                                JavaScript Expression– document

                                Client-side Condition

                              Type – JavaScript Expression

                              JavaScript Expression – this.browserEvent.which===27 &&  $v(“P2_SAL_HID_VAL”)!==””

                               Action – Execute JavaScript Code

              Code–

var rec;

var widget = apex.region(‘EMP_IG’).widget();

var grid = widget.interactiveGrid(‘getViews’, ‘grid’);

var model = grid.model;

model.forEach(function(r) {

if (model.getValue(r, ‘EMPNO’) == apex.item(“P2_SAL_HID_VAL”).getValue()) {

rec = model.getValue(r, ‘EMPNO’);

grid.gotoCell(rec,”DEPTNO”);

}

})

apex.item(‘P2_SAL_HID_VAL’).setValue(“”);

 

 

Step 4:  Finally, save the changes and run the page.

 5.Screen Shot