Thursday, August 24, 2017

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 applicationModal LOV IG


Download applicationModalLOV 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.


26 comments :

  1. Nice component & good documentation,
    many thanks saeed

    Regards
    Siavash AKRAMI

    ReplyDelete
  2. Hi all,

    Q: How to return value into hidden column on Interactive Grid?

    A: You must change the hidden column to “Text Field” and next as I mentioned in this blog when the IG page runs to push the action button>Columns and unchecked the display column in order to hide the database column on interactive grid.

    ReplyDelete
  3. Hi,

    I am getting the below error when clicking on the LOV icon in my IG - any ideas?
    modallovig.min.js:7 Uncaught TypeError: Cannot read property 'widget' of null
    at Object.setRegionIG (modallovig.min.js:7)
    at HTMLButtonElement. (modallovig.min.js:7)
    at HTMLButtonElement.dispatch (jquery-2.2.3.min.js?v=5.1.2.00.09:3)
    at HTMLButtonElement.r.handle (jquery-2.2.3.min.js?v=5.1.2.00.09:3)

    Thanks!

    ReplyDelete
    Replies
    1. Me too in only one of my applications, in other application it works

      Delete
    2. me pasa igual. pudiste solucionarlo amigo?

      Delete
    3. Hy guys, i fixed this bug changing the template of IG to "STANDARD" .

      Delete
  4. @daniel: I figured out that the cause of the erro is the usage of even.target to get the region in the javascript.
    I used var ig_region = apex.region.findClosest(event.target).element.selector.substring(1); and was able to make it work fine.

    Hope the same would work at your side too.

    Best Regards
    -Nikhil

    ReplyDelete
    Replies
    1. Hi Nikhil,

      May I know where do I have to use above code?

      Best Regards,
      Ruby

      Delete
    2. Si amigo porfavor ayúdame. tengo el mismo problema pero no se donde poner el codigo que me estas diciendo

      Delete
    3. Gracias por ese gran indicio amigo. no me sirvió tu código pero encontré cual era el error

      Delete
  5. Actually picture is the presentation of some one’s feelings; it provides the lesson to the viewers.

    ===========================================================
    Best website designing company in Kanpur

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. the example with this plugin not working

    ReplyDelete
    Replies
    1. It works, but you need to change the template of Ig to STANDARD , because the template "interactive report" doesn't return the value to IG

      Delete
  8. dear Saeed Hassanpour
    good effort
    but this plugin not work IG lov BUT work with IR lov any idea
    Thanks

    ReplyDelete
  9. i mean when you call the lov this lov is modal dialog and the regions type is IR not IG
    can you make it work with IG

    ReplyDelete
  10. Hello Guys, I'm getting the below error when a click to open modal:
    Uncaught TypeError: Cannot read property 'widget' of null
    at Object.setRegionIG (modallovig.min.js:7)
    at HTMLButtonElement. (modallovig.min.js:7)
    at HTMLButtonElement.dispatch (jquery-2.2.3.js?v=5.1.3.00.05:4737)
    at HTMLButtonElement.elemData.handle (jquery-2.2.3.js?v=5.1.3.00.05:4549)

    Can you help me please?

    ReplyDelete
    Replies
    1. me pasa lo mismo amigo, podrias ayudarme

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Man, I got to fix this bug, changing the TEMPLATE of IG to "STANDARD"

      Delete
  11. Guys, someone got to return a display value and save a return value ? I didn't Get do this and I didn't undestand the explanation about how do it.
    Can someone help me please?

    ReplyDelete
    Replies
    1. I didn't undestand how to do this:

      "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."

      Delete
  12. when I select the record in IR(on Model Dialog page) for first time, IR closes without returning any value to IG page. But when I try again it works without any issues. This behavior is consistent. Any help is highly appreciated.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete