Integrating SAP UI5 component into SAP Lumira

[Former Member]

SAPUI5 supports application developers in creating quick and easy user interfaces based on HTML5 and JavaScript. Integrating SAP UI5 components with SAP Lumira, increases the performance of the extension components, with comparatively less development tasks. It is also easier to build lightweight customer-grade UI components.

In this blog, I will show you in steps how I integrated an SAP UI5 component with SAP Lumira.

Let us consider every developer’s favourite example: SAP UI5 button. We will now see how to implement a very simple SAPUI5 based Hello World example. But instead of simply writing "Hello World" to the console, we will display "Hello World" in an alert dialog which is displayed each time the user presses a button.

Step 1: Creating an empty visualization extension project

• Open SAP Web IDE.
• In the Web IDE, select File > New > Project from Template.
• Select the "Visualization Extension" template and click "Next".
• Fill-in the project name. This will be the project name that will appear in the SAP Web IDE workspace. Click "Next".
• Fill in “Visualization Extension Profile” as shown below. Click "Next".

                       

• Since the UI5 component is based on “DIV”, make sure that the technique “Using DIV” under “PlotArea” is selected. Click “Next”.

                                            

Step 2: Preparing Render function

          To develop any custom extension in SAP Lumira, we use “viz-controls-chart-layer” in which we append our chart. A sample snippet to append SAPUI5 button inside SAP Lumira is given below. It should be written in render.js.

                                                      

The output will be as shown below, once the code is executed in SAP Lumira.

                                     

Step 3: Integrating Functionality for SAPUI5 button

               Since button is an SAP UI5 component, all the native properties (functionality) of SAP UI5 can be invoked inside SAP Lumira. Here, the button event “onClick” is integrated and this can be invoked during run time. It is similar to a button which runs in a web browser.

                                  

SAP UI5 table inside SAP Lumira

     The button is a simple SAP UI5 component which doesn’t need any input dimension and measure. But an SAP UI5 table is slightly complex compared to the button as it includes data manipulation.

Data Manipulation:

     We must convert the input (provided by the user) to a data format that is supported by the SAP UI5 table. SAP Lumira takes data as JSON format. Hence, I converted the JSON data into an array of object that is supported by the SAP UI5 table. Sample format of data is shown below:

                             

Rendering Table:

     Now we need to render the SAP UI5 Table into SAP Lumira. Sample code for UI5 Table is taken from https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/table/demokit/Table.html. Follow the same procedure as above (to integrate SAP UI5 button) to integrate the SAP UI5 table into SAP Lumira. Now the table inside SAP Lumira is as shown below:

                                            

Functionality of UI5 Table:

     Since it’s an SAP UI5 table, every function of SAP UI5 table can be invoked inside SAP Lumira. Major functions that I have implemented are sort, filter, limit rows, etc.

                             

Performance

Cross table is a native component in SAP Lumira. The drawback here is that the Cross table does not provide necessary features like fixing rows/columns and sorting/filtering that an SAP UI5 table provides. SAP UI5 components are open source and the performance of any large dataset in an SAP UI5 table is always high compared to the native SAP Lumira components.