Modal Dialogs Part 1 - Intro

Von Tobias Arnhold 1.30.2019
In this 5 part series of blog posts I will share my understanding of how you can open modal dialogs with dynamic values.

First of all: Why would you need that?
There are particular business cases where your modal dialog (page 2) uses data from the parent page (page 1) which was created during runtime.
For example: Map Selector
I want to select a certain position from a map. The map is called by a button and displayed via a modal dialog. The parameter for the default position are defined on the parent page. After I have chosen a particular position on the map the Latitude and Longitude parameter should be transmitted back towards the parent page.


In this introduction I will explain how you can do it with "Standard APEX" functionality.
On my main page 10 I have several search items (like City, Street...) , two return items (Lat, Lon) and a button called SEARCH. The button executes a standard "Submit Page".
In the processing area I add a branch "After Submit" which gets executed by the SEARCH button. The branch process will open page 11 and will transmit all search parameters.
Info: This way opening a modal dialog may not work below APEX 18.1


Now the modal dialog will open. On page load a dynamic action gets executed to create the map:

vAddress =
  apex.item('P11_CITY').getValue() + ' ' +
  apex.item('P11_POSTAL_CODE').getValue() + ' ' +
  apex.item('P11_STREET').getValue() + ' ' +
  apex.item('P11_HOUSE_NUMBER').getValue()

vDiameter = apex.item("P11_DIAMETER" ).getValue();

apex.event.trigger(document, 'showOpenLayersMap', [{address: vAddress, diameter:vDiameter}]);void(0);


In that little code snippet above I create a single string "address" and a diameter parameter to pass into the map function. Which is by the way created on page 0 as a custom dynamic action named "showOpenLayersMap".

My showOpenLayersMap function is doing all the magic. In the moment the end user is doing a double click on a certain position inside the map a trigger executes a custom dynamic action on page 11 named "setLatLon".

...
apex.event.trigger(
  document, 
  'setLatLon', 
  [{latitude:coordinatesItems[1], longitude:coordinatesItems[0]}]
);
...



This one fires 3 TRUE actions to return the Latitude and Longitude parameter to page 10:
1. Execute JavaScript Code
apex.item("P11_LON" ).setValue(this.data.longitude);
apex.item("P11_LAT" ).setValue(this.data.latitude);

2. Execute PL/SQL Code
:P10_LON := :P11_LON;
:P10_LAT := :P11_LAT;

3. Execute JavaScript Code
parent.location.reload();

Unfortunately I couldn't find a way to send the items back to the parent page dynamically. I just couldn't react on the "Dialog Closed" event. I think it has to do with the explicit submit. The dynamic action handler has no idea about the modal dialog.



Ps.: A separate blog post about open layers and open street map will come later...

Result