GeneXus and SAP UI5

Unofficial Content

When we design applications using GeneXus for SAP System, we have the Fiori pattern which follows the Fiori design guides by implementing the floorplans defined in them (today we have the main ones and this is an incremental work where we will be incorporating new ones to the extent of their needs).

But when we are going to design a particular object and its User Interface, although we have the Theme Fiori, in terms of atomic controls, many times the SAP user (in fact the Developer based on what the SAP user expects or based on the mockup you receive), want to be able to use SAP UI5 controls.

For this we have a module called GeneXus SAPUI5 (dynamic and incremental) with GeneXus controls based on User Control 2.0 and SAP UI5 technology. Additionally, we have a guide for any GeneXus developer to implement their own UC 2.0 based on SAP UI5, if the one you want to use is not yet in this module.

What has enabled this approach was the GeneXus implementation of the User Controls 2.0 and the announcement, this year 2019, of the release of the UI5 Web Components, the union of these two realities allows us to provide a solution to the issue of incorporating SAP controls UI5 in GeneXus developments.

So what are the UI5 Web Components?

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned with the SAP Fiori Design Guidelines and incorporate the Fiori 3 design.

GeneXus SAP UI5 Module

Within this module we have the following controls, which you can download from here in a xpz format and start using them now:

 

How to define your SAP UI5 control in GeneXus

1. First you look for the list of SAP UI5 controls, which you want to incorporate into the GeneXus development here

As an example, let's work with a simple case, choose BusyIndicator, there are several options for this control, let's work with the option 'Busy Indicator with different size'.

image_201988164815_1_png

2. We can see that the necessary tags for this control are the following:

<div> 
   <ui5-busyindicator active size="Small"></ui5-busyindicator> 
   <ui5-busyindicator active size="Medium"></ui5-busyindicator> 
   <ui5-busyindicator active size="Large"></ui5-busyindicator> 
</div>

To test the behavior of the control you can use a code editor such as CodeSandbox (specifically)

Upon entering we will see on the left two files of our interest (1) index.js and index.html, if we copy the tags of the control we want to use, in index.html (2), we will see it appear in the left panel ( 3).

image_20198910381_1_png

In case of not seeing it, it is because we need to include some js in index.js. Therefore, if we return to the page where the control is located (UI5 Web Components) and there we will find indicated in Overview / ES6 Module Import), what is the import that we should include in the index.js file. In this case, import "@ ui5 / webcomponents / dist / BusyIndicator";

We paste that import into the index.js file and then we will see the control as will be seen on our page.

image_201989104022_1_png

With this we have the necessary knowledge to perform our UC in GeneXus.

3. To create our UC in GeneXus, we select New Object / Extensibility / User Control, in this case, to the control, we will give it the name UI5BusyIndicator. As the documentation indicates, in the Screen Template tab we must include the HTML code provided by the designer or the CSS Framework and additionally to boost the UC we can replace the static data with Properties to which we give it a name, replacing the hard- coded by our name between {{}}. In this case, instead of leaving three tags, each with its corresponding Size (Smal / Medium / Large), we leave only one and replace the hard-coded sizes, with a property and its name, e.g. "Size"

<ui5-busyindicator active size="{{Size:Small|Medium|Large=Medium}}"></ui5-busyindicator>

Once this is done, in the tab Properties of the UC, we can indicate type, default value, etc. for the property (s).

In this case, because we know the three possible values ​​for the Size, we define the Screen templaete as follows:

<ui5-busyindicator active size = "{{Size:Small|Medium|Large=Medium}}"> </ui5-busyindicator>

4. We must include the Base Library (composed of external CSS & JS & Assests files), among other things, this includes the amounts of SAP UI5, such as the one shown in point 2.

To do this, the GeneXusSAPUI5.gxlibrary file must be included as File in the KB (which will be named GeneXusSAPUI5_gxlibrary).

This newly added file (GeneXusSAPUI5) must be placed in the UC Property Base Style defined by you.

(in case you need to add an import that is not yet in the GeneXusSAPUI5.gxlibrary that we provide, see here how to add it)

5. From here we can incorporate our UC into any GeneXus object.

image_20198911350_1_png     image_2019813111017_1_png

When executing the webpanel we will see the control

image_2019813111337_1_png

 

If for example we define a WebPanel, in the Toolbox, we will find our UC at the end, in this case we will see UI5BusyIndicator, when dragging it on the form, if we select it we will see among its properties the one that we put as dynamic, in this case Size.