GeneXus for SAP Systems Work With for Smart Devices Pattern

Official Content
This documentation is valid for:

You have been developing a web application for a travel agency. To do so, you have created transaction objects, applied the Fiori pattern that creates objects as web panels, procedures, etc., and you will continue to work in this way, developing objects until completing the web development. 

GeneXusForSAPSystems_WWforSDPattern_Image1

In this case, you have prototyped in a local server that accessed a Hana database through SAP Business Technology Platform.  See How to use SAP HANA database on SAP Business Technology Platform

GeneXusForSAPSystems_WWforSDPattern_Image2

However, when the application is deployed, the programs built by GeneXus in Java will be saved in a server that can be accessed from the web. 

GeneXusForSAPSystems_WWforSDPattern_Image3

Therefore, the end user, with a browser and the URL of some of the app's pages will be able to run the corresponding object (built by GeneXus in Java). If necessary, it will make requests to the database and return the data to the browser so as to build the page with the retrieved data and display it to the user on the device screen.

GeneXusForSAPSystems_WWforSDPattern_Image4

How is an application similar to the web application but native for Android and/or iOS devices obtained?

GeneXusForSAPSystems_WWforSDPattern_Image5

This will be done by developing some specific GeneXus objects for mobile that will be compiled from a main object. GeneXus will compile that main object in Java for Android if the application is built for that platform, and in Swift for iOS if necessary. What is more, for these native apps to be able to access the data stored in the centralized database, one part of the web app (Java) is exposed as Rest services. 

GeneXusForSAPSystems_WWforSDPattern_Image6

Therefore, when the Android or iOS app needs data from the database, it will have to consume the corresponding Rest services. The developer doesn't need to worry about this, because it is hidden inside the logic of the GeneXus objects for mobile. 

Let's see this with an example.

To review what has been done in the web application, there's the app's home object –the Launchpad, which is a sort of menu.

image_202211241525_1_png

From this object, various lists (the Fiori List Report of countries and attractions) are invoked. The invocation to a transaction called Customer has also been explicitly added.  That's left aside here as something similar, but for mobile, is required.  

To do so, first, the equivalent pattern to the Fiori List Report of the selected transactions needs to be applied.

Open the Patterns section of the Country transaction and then select the Work With tab.

image_2022112415114_1_png

The two screens that will be generated are clearly seen: one for the countries List and another one with detailed information about a country, with their two tabs displayed as “sections”. 

The great difference is that here, these nodes will correspond directly to the objects generated and will not be “declared” by the developer so as to have them implemented by GeneXus later. Instead, they will be directly implemented. So, if you click on the List node: 

image_20221124151323_1_png

Here is its Layout, which has been initialized and has a grid that will show the value of the CountryName attribute of each country to be loaded from the database.

In addition, sections such as Rules, Events, etc. are enabled to define rules, events and other aspects of this object. That is to say, the sections that allow for its implementation are displayed.

Moreover, if the Detail is opened:

image_20221124151423_1_png

You can see that the screen object only contains a control called <All Sections Content>. All the sections contained in this Detail will be loaded in this control. Here, there are two of them: one that shows the country's general information:

image_2022112415150_1_png

Here, the attributes CountryId and CountryName are shown.

And the other one shows the country's attractions in a grid:

image_20221124151532_1_png

The attributes AttractionPhoto and AttractionName have been placed here.

It will be clearer when we run it.

Let's select the check box to apply this pattern; before saving, let's take a look at the generators (of programs) that we have defined. So far, only one: for Web Java.

image_20221124151716_1_png

Now, we save.

For the frontend Android and Apple has been automatically added.

image_20221124151841_1_png

By default, it will generate for Android and iOS, but Android will be the main platform:

image_20221124152046_1_png

Note that below the Country node, the object WorkWithDevicesCountry is now displayed:

image_20221124152143_1_png

Unlike the web example, in which FioriCountry was only a declaration file and the objects that effectively implement the pattern features were built separately (they are listed below), in this case it is a GeneXus object that will contain sub-objects that can be invoked independently using the corresponding syntax.

Let's also apply the pattern to the Attraction transaction and to Category.

How can we test this quickly? One option is to use a device connected to the computer in which GeneXus is running.  Another option is to use the emulators provided by the platforms. For simplicity purposes, we will use this option (To see all the prototyping options, we recommend viewing the course “GeneXus for Smart Devices”. Testing on an actual device will always be better because the emulators don't have all their features available).

We're missing a menu —in the web environment we had the Launchpad— to invoke the Lists we're interested in.  This menu is not automatically created by GeneXus. We need to create it ourselves.

File/New/Object, filter by the objects for User Interface, and select the Menu, which is an object to implement menus. We call it TravelAgency:

image_20221124152557_1_png

This will be the main object of the application for mobile devices. It will be the object compiled by GeneXus for Android and/or iOS and that the end user will install on his/her device, once the development work has been completed.

Let's enter the items we want to include in the menu:

image_2022112415279_1_png

The first one will correspond to the action of invoking the List of countries:

image_20221124152741_1_png

A window is opened to select the object we want to invoke when the user selects this menu item. We filter by object type Work With:

image_20221124152832_1_png

We select WorkWithCountry. 

We now see this action, which by default receives the same name as the object invoked. This action —we double-click— will be associated with an event that programs the invocation:

image_20221124152942_1_png

There, the List of the WorkWithCountry object is being invoked (not the Detail). 

Let's open the action's properties and change the item Description, which will be displayed in the menu at runtime:

image_20221124153111_1_png

Bearing in mind that mobile apps tend to be much more iconographic than web apps due to the reduced screen size, choose an image for this option. The image must be imported into the knowledge base from an external file. Now, let's add an item to invoke the attractions List.

Before running it, replace the Android property, “Base Cholor Scheme”, with 'Light with Dark action bar' so that the screen background is white with a dark “Action Bar”:

image_20221124154354_1_png

To run it, right-click on its tab and select Run:

image_20221124154523_1_png

To prototype this mobile application in Android please check Android Requirements

If you have an emulator installed with the Android Studio, the compiled file will be automatically installed there and will be run.

Otherwise, the default emulator of Android's SDK will be opened and the same will happen. 

So, here you can see the menu running with the two items defined with their images and descriptions:

image_2022112416433_1_png

Tapping on “Countries” displays the List of countries, which shows each country's name in a grid:

image_20221124164346_1_png

As it was implemented, if a country is tapped:

image_20221124164455_1_png

its details are shown with two tabs: the general information in one (which is implemented here):

 GeneXusForSAPSystems_WWforSDPattern_Image37

and the country's attractions in the other one:

image_20221124164548_1_png

The attractions' photo and name is seen, as implemented here:

image_20221124165446_1_png

Note that you can change or delete the country's information from the General tab:

image_2022112416475_1_png

Change the name...

image_2022112416489_1_png

Confirm.

The object that updated the database was one of the Rest services mentioned at the beginning.

GeneXusForSAPSystems_WWforSDPattern_Image43

If you run the web application again and refresh the page:

image_2022112416503_1_png

Here it is!

The country's update and delete buttons are displayed here in the WorkWith, in the application bar area:

image_20221124165912_1_png

But, while in the web pattern the transaction was invoked when trying to update or delete:

image_2022112417137_1_png

(For example, here it is invoked in UPDATE mode:

image_20221124174612_1_png

and what you're viewing is the transaction form)

…in native mobile applications the same Detail is opened but with another screen: the edit screen:

image_20221124174754_1_png

It looks exactly the same when initialized, except for the Save and Cancel buttons in the Application bar:

image_20221124174939_1_png

image_20221124175021_1_png

When the user clicks on the Save button, the device app will invoke, sending the data from this screen, the Rest service in the web server containing the transaction logic, and therefore will update the information on the database. All this is done in a transparent manner for the developer, who will not have to worry about these low-level details. 

Just like for the web pattern, if you return to the List, you will see that it is possible to add a new country:

image_20221124175150_1_png

Here, the same screen is invoked for the Detail and for the Update.

Add Mexico:

image_20221124175237_1_png

This is what the pattern generates by default. It can be customized, though. 

If you open the Attractions List:

image_20221124175438_1_png

The attraction's image and name are displayed in the grid. You may also want to add the attraction's category. 

To do so, open the toolbox, drag the Attribute/Variable control, and select the CategoryName attribute:

image_20221124175613_1_png

Change the Label Caption property:

image_20221124175957_1_png

It could be deleted with Label position None.

Select Run, over the main object.

image_202211241822_1_png

Note that by default the option to make searches by attraction name is offered:

image_202211241832_1_png

 

This is configured in the grid's properties, here:

image_2022112418612_1_png

You could add CountryName, for example, to allow making searches by country name as well.

GeneXusForSAPSystems_WWforSDPattern_Image61

GeneXusForSAPSystems_WWforSDPattern_Image62

So, if you search “Fr”… France's attractions are displayed.

There are also advanced filters, by the attributes CountryId and CategoryId, which are the foreign keys of the Attraction transaction. Let's change the description to Country and Category, respectively, and run the main menu again…

Open the attractions List and see that this option is available in the application bar:

image_20221124181149_1_png

If you look at the list, it is ordered by AttractionName. This is specified in the properties of the grid's Data group:

image_20221124181441_1_png

GeneXusForSAPSystems_WWforSDPattern_Image70

You may want to allow the user to order by country: 

GeneXusForSAPSystems_WWforSDPattern_Image71

Choosing the same option used for filtering:

image_20221124182025_1_png

It can be ordered by Country:

image_2022112418217_1_png

The Great Wall of China and the two attractions entered for France are seen. 

You can try the same application for iOS by only changing these properties.

This was just a small example of what can be done. Just like for a web application, there are more objects available to cover other features, such as Panels for Smart Devices.