About Plug-in: Modal LOV IG

This plug-in uses only on Interactive Grid (APEX 5.1.1 and later).

Thanks to the blog post from Dan McGhan about Modal page.

Thanks to the awesome blog posts from John Snyders about a series of Interactive Grid.

Demo application: Modal LOV IG

Demo on YouTube: How to use Plug-in (Modal LOV IG)

Download application: ModalLOV IG

The Modal LOV IG plug-in was combined with modal page native so if you use this plug-in must be to do according below instruction:

• Install the Modal LOV IG plug-in in your application
• Create two Application Items
• Create an Interactive Report on modal page mode
• Create a page includes one or more the interactive grid

Support:

Multiple Interactive Grid in each page & Multiple Modal LOV IG plug-in in each Interactive Grid.

Properties:

• Modal Url Type
• Modal Page Link
• Url Checksum
• Set Item Names
• Set Item Values *
• Request
• Modal Html Expression Column(s)
• Column Mapping(s)
• Cascading LOV Parent Column(s) *
• Enterable
• Validation (not implemented yet)

Let's go to use the MODAL LOV IG!

Step 1: Install the Modal LOV IG plug-in in your application (1 min)

a-Download plugin

b-Go to your application \  Shared Components \ Plug-ins then import this file      "item_type_plugin_ir_saeedhassanpour_modallovig.sql"

Step 2: Create two Application Items (1 min)

a-Create an Application Items . Exactly, name is same (GL_HTML_EXP_DIALOG) 

b-Create an Application Items . Exactly, name is same (GL_ROW_SCRIPT_DIALOG)

Step 3: Create an Interactive Report on modal page mode (5 min)

a-Create an Interactive Report on modal page mode

b-Set code at inline property of page

Page Inline:

.t-fht-tbody tr{
  cursor: pointer;
}

c-Create the Page Item for every column that will return to main page. for example you want to return three columns so you must create three page items in this page.

d-Enter the code under [COLUMN] of interactive report which(only for one column)

HTML Expression:

#ENAME# //column name
&GL_HTML_EXP_DIALOG.

e-Enter “Static ID” of that column in IR

Static ID:

ename-id

f-Create a Dynamic Action Row Clicked with two true actions and setting like this images

Dynamic Action:

var columnStaticId = 'ename-id'; //Static ID of that column
&GL_ROW_SCRIPT_DIALOG.

Step 4: Create a page includes one or more the interactive grid(5 min)

a-Create an Editable Interactive Grid page 

    Enter “Static ID” for Interactive Grid region

b-Add Modal LOV IG type to every item that likes to use it.

  Set Properties of items

Tip: this plugin only return a value of item so if you want to have (Display, Return) don’t worry you can implement easily. In this case you should add a non-database item(e.g. MODAL_DISPALY as DISPLAY and database item as RETURN) to IG then by action button to hide the database item on interactive grid.

e.g.
select EMPNO,
       ENAME,
       ....
       COMM,
       DEPTNO,
       (select ….  from emp e where e.empno = t.empno) as MODAL_DISPALY
  from EMP t

c-Create a Dynamic Action on Dialog Closed

  Dynamic Action: Dialog Cloesd

//set values on Interactive Grid
openMLovIG.setIgValue(this.data, true);

How to debug the Modal LOV IG plug-in?

look at the below images. firstly click Debug on the Developer toolbar Option and next go to console then to filter by "modal" word.

Finish this task and enjoy it.