Open modal/inline dialog in Oracle APEX using JS

Analysis:

From Oracle Apex 4.2, Inline dialog can be opened as modal dialog/popup using JS.

Open inline dialog region as modal dialog:

Step 1: Create static region.

Step 2: Set Template => Inline Dialog.

Step 3: Assign the static id to the region.

Fig 1: Set template and Static ID

Step 4: Create button or change one of the report column type to Link. (Action: Redirect URL).

Step 5: Put the below JS to open the region as modal dialog.

               javascript:openModal('unitpricedetails');

           Fig 2: Open simple modal dialog

Open inline dialog region as modal dialog and pass values to the items:

Common Steps: Step 1 to Step 4.

Step 5: To pass value to that region, create P1_UNIT_ID in the inline dialog.


      javascript:$s('P1_UNIT_ID','#UNIT_ID#');javascript:openModal('unitpricedetails');

Fig 3: Open simple modal dialog and assign the values

To open inline dialog as modal dialog and show report data (Link from Classical  or Interactive Report):

Common Steps: Step 1 to Step 4.

Step 5: To show report in that region. Create static classical report and set template as inline dialog.

javascript:$s('P1_UNIT_ID','#UNIT_ID#');javascript:openModal('unitpricedetails'); $("#unitpricedetails").trigger("apexrefresh");

Fig 4: Show report (Link from Classical ore Interactive Report)

To open inline dialog region as modal dialog and show report data (Link from Interactive Grid):

Common Steps: Step 1 to Step 4.

Step 5: To show report in that region. Create static classical report and set template as inline dialog.

javascript:$s('P1_UNIT_ID','&UNIT_ID.');javascript:openModal('unitpricedetails'); $("#unitpricedetails").trigger("apexrefresh");

Fig 5: Show report (Link from Interactive Grid)

Output:

Fig 6: Output (Link from Interactive Grid)