PART3: Put it All Together

We will now open our tutorial_popup page (PART2) from our tutorial_main page (PART1). We will create a Natural subprogram for our pop-up. When our TUTMAIN-P receives a specific event – an icon is clicked - it will call the Natural subprogram. This will open the pop-up window.


Create the Natural Subprogram for the tutorial_popup Page

Right click on the TUTPOP-A adapter and select Generate Main Program. In the opened dialog select Subprogram and enter TUTPOP-N as Object name.

Generate Main Program TUTPOP-N

We want to pass all values from our TUTMAIN-P program. To do so, apply the code in bold:

DEFINE DATA PARAMETER 
1 P_EMAIL (A) DYNAMIC
1 P_FIRSTNAME (A) DYNAMIC
1 P_LASTNAME (A) DYNAMIC
1 P_USERID (A) DYNAMIC
LOCAL
1 ALERTTEXT (A) DYNAMIC
1 ALERTTYPE (A) DYNAMIC
1 EMAIL (A) DYNAMIC
1 FIRSTNAME (A) DYNAMIC
1 LASTNAME (A) DYNAMIC
1 USERID (A) DYNAMIC
END-DEFINE
*
EMAIL:=P_EMAIL
FIRSTNAME:=P_FIRSTNAME
LASTNAME:=P_LASTNAME
USERID:=P_USERID
*
…

We want that our tutorial_popup page is opened as pop-up (modal). To do so, apply the code in bold:

PROCESS PAGE MODAL
PROCESS PAGE USING "TUTPOP-A"
….
END-PROCESS
END

We want to close the pop-up when our Cancel button is clicked. When our Save button is clicked, we want to pass back the changed values. To do so, apply the code in bold:

VALUE U'onCancel'
IGNORE  
VALUE U'onSave'
P_EMAIL:=EMAIL
P_FIRSTNAME:=FIRSTNAME
P_LASTNAME:=LASTNAME
P_USERID:=USERID
PROCESS PAGE UPDATE FULL

Add Controls to Open the Pop-Up (tutorial_main)

Open the tutorial_main.xml layout in Layout Painter. We will now add an icon column to our grid. When the icon is clicked, we want to pass an event to our Natural program so that it can open the pop-up.

Add an Icon Grid Column Control (BMOBILE:ICONCOL)

In the Layout Area (left) select the bmobile:simpleheaderrow node. From the Controls palette (right) drag and drop a Simple Header Column as first sub node of the bmobile:simpleheaderrow.

From the Controls palette (right) drag and drop an Icon Grid Column as first sub node of the bmobile:simplerow.

Controls

In Properties view click on the small button right of the iconurl property. In the opened dialog click the SVG Icons button and select the pencil-fill.svg icon.

Properties Enter Image URL

Set the following method and styleclasses property values:

Method styleclasses

The event onEditItem will be sent to our Natural program when the icon is clicked. The styleclass ml-2 adds some space left of the icon. This is important for small devices because on small devices a plus icon to see all columna is automatically shown. The ml-2 styleclass makes sure that there is enough space between our pencil icon and the plus icon.

space example

The icon-svg-primary styleclass renders our pencil in our primary color (blue).

Add a Natural Event Data Control (NJX:EVENTDATA)

When our icon is clicked, we want to automatically know the index of the item for which the icon is clicked. To get this support, drag and drop a Natural Event Data control as sub node of the natpage node.

Natural Event Data

This is an invisible control. It generates Natural fields which will tell us the index of the item for which the icon is clicked.

Add an Open Popup Features Control (XCIEVENTDATA.XCIINDEX)

Drag and drop an Open Popup Features control as sub node of the natpage node.

Open Popup Features

This is an invisible control. It generates Natural fields which allow us to set the title, height, width, etc. of the pop-up dynamically at runtime. Be sure that you saved your layout (<ctrl-s>).

Adapt the Natural code (TUTMAIN-P)

We now adapt our TUTMAN-P to initialize the pop-up and call our subprogram TUTPOP-N.

Adapt the TUTMAN-P to the Added Controls

Double-click the file TUTMAN-P. It will open in the Natural editor. You see that it has errors. In the editor select TUTMAN-A and press F3.

Process Page

This will open the TUTMAN-A adapter in the Natural editor. You see that in the adapter some additional fields exist. The reason is that for the Natural Event Data and the Open Popup Features controls additional Natural fields were generated. We need to adapt our program. Select all the fields in the adapter.

Define Data

In the Natural program replace the old fields with these new fields. Also copy the lines for the onEditItem event. Your code should look like this:

DEFINE DATA LOCAL
1 GRIDLINES (1:*)
2 EMAIL (A) DYNAMIC
2 FIRSTNAME (A) DYNAMIC
2 LASTNAME (A) DYNAMIC
2 USERID (A) DYNAMIC
1 XCIEVENTDATA
2 XCIINDEX (I4)
1 XCIOPENPOPUP
2 FEATURES (A) DYNAMIC
2 HEIGHT (I4)
2 LEFT (I4)
2 POPUPTYPE (A) DYNAMIC
2 TITLE (A) DYNAMIC
2 TOPPOS (I4)
2 WIDTH (I4)
1 #II (I2)
END-DEFINE
EXPAND ARRAY GRIDLINES TO (1:30)
FOR #II:=1 TO 30
COMPRESS 'First ' #II INTO GRIDLINES.FIRSTNAME(#II) LEAVING NO
COMPRESS 'Last ' #II INTO GRIDLINES.LASTNAME(#II) LEAVING NO
COMPRESS 'First'#II '.Last' #II '@email.com' INTO GRIDLINES.EMAIL(#II) LEAVING NO
COMPRESS 'User' #II INTO GRIDLINES.USERID(#II) LEAVING NO
END-FOR
*
PROCESS PAGE USING "TUTMAN-A"
*
DECIDE ON FIRST *PAGE-EVENT
VALUE U'nat:page.end', U'nat:browser.end'
/* Page closed.
IGNORE
VALUE U'gridlines.onEditItem'
PROCESS PAGE UPDATE FULL
NONE VALUE
/* Unhandled events.
PROCESS PAGE UPDATE
END-DECIDE
*
END

Initialize the Pop-Up

We want to set a title for our pop-up. We also want to specify the pop-up size when it is opened. Add the following code to your Natural program before the PROCESS PAGE statement:

XCIOPENPOPUP.TITLE:='Edit User Information'
XCIOPENPOPUP.FEATURES:='sizetocontent:true'
*
PROCESS PAGE USING "TUTMAN-A"

In the XCIOPENPOPUP.FEATURES field you can set several features – like height width, whether a close button should appear etc, - separated be a semicolon. We just set one feature (sizetocontent) which means that if possible our pop-up should automatically adapt to the size of the opened page (tutorial_popup).

The last setting we need to add is just a technical one: In the XCIOPENPOPUP.POPUPTYPE we need to set the opened popup should be rendered using the responsive controls set (bmobile:*). Add the line in bold:

XCIOPENPOPUP.TITLE:='Edit User Information'
XCIOPENPOPUP.FEATURES:='sizetocontent:true'
XCIOPENPOPUP.POPUPTYPE:='BMPOPUP'
*
PROCESS PAGE USING "TUTMAN-A"

Call the Natural Subprogram (TUTPOP-N)

When our new icon is clicked, we will receive the event gridlines.onEditItem. The field XCIINDEX will contain the index of the item, for which the icon is clicked. Add the line in bold:

VALUE U'gridlines.onEditItem'
CALLNAT 'TUTPOP-N' EMAIL(XCIINDEX) FIRSTNAME(XCIINDEX) LASTNAME(XCIINDEX) USERID(XCIINDEX)
PROCESS PAGE UPDATE FULL

Don’t forget to press <ctrl-s>.

Run your Application

Right-click on TUTMAIN-P and select Run As > Natural Application.

SUMMARY

We have added an BMOBILE:ICON, an NJX:XCIOPENPOPUP and NJX:EVENTDATA control to the tutorial_main page. We have initialized the XCIOPENPOPUP fields for opening the pop-up. We have called our TUTPOP-N subprogram and passed the data of the selected item. We used the XCIEVENTDATA.XCIINDEX field to know which item was clicked. We could run the completed application immediately.