PART3: Put it All Together

#### Search Results

Search

# 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

- Add Controls to Open the Pop-Up (tutorial_main)

- Adapt the Natural code (TUTMAIN-P)

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

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)

- Add a Natural Event Data Control (NJX:EVENTDATA)

- Add an Open Popup Features Control (XCIEVENTDATA.XCIINDEX)

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

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.

Set the following method and styleclasses property values:

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.

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.

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.

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

- Initialize the Pop-Up

- Call the Natural Subprogram (TUTPOP-N)

- Run your Application

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

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.

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.

### On this page

- Create the Natural Subprogram for the tutorial_popup Page
- Add Controls to Open the Pop-Up (tutorial_main)
- Adapt the Natural code (TUTMAIN-P)