Skip to Content

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

                        /wp-content/uploads/2015/10/div_820661.png

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

                                             /wp-content/uploads/2015/10/div_820661.png

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.

  

                                                       Capture.PNG

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


                                      Capture.PNG


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.

                                   Capture.PNG

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:

                              Capture.PNG

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:


                                             Capture.PNG

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.

       

                              Capture.PNG

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.

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. andre ga

    Hi,

    The button is not displayed in the preview vizualisation area. It’s possible to have all your script (render.js). Thank you.

    (0) 
  2. Antoine GELIOT

    Thank’s for those valuable information.

    How do you integrate the SAP UI5 component in SAP Lumira : by simply using the addition of an extension I guess ?

    The SAP UI5 application work for both client Lumira Client : Lumira Desktop and Lumira for BI Platform ?

    Thank’s for any answer.

    BR

    (0) 

Leave a Reply