SAPUI5 – Dynamic Binding with Comparison Microchart in SAPUI5

By
Harshita Varma
-
0
5726
MICROCHART and SAPUI5 Fiori

Until this article, we all are well versed with Creating Odata Services and calling them from frontend. Frontend to be rightly called as SAPUI5, which is a tool to convert your imagination into reality.

Yes, who said SAP cannot provide dynamic and imaginative UIs, with trending technologies, everything is possible.

Introducing MICROCHARTS in SAP and guess what, Binding it Dynamically with OData.

So, in order to give a better appearance to MICROCHARTS, we shall proceed with a requirement and imaginative design provided by my Manager, ‘Durgesh Teli‘. Requirement goes as under:

We are creating a Dashboard for File System, where we will display the File Path of all Servers available on our system where the disk space is less than a customized value.

File System Analysis on System can be viewed with tcode: ST06

Fair enough: Now, I need to show the servers whose File system’s disk space is less than the customized value that I have stored in my Z table :

Also Read: CDS Part 18 – Bar Chart & Donut Chart using CDS Views

Now, I create a FM where I shall export the free disk space and the file details containing:

a) Server Name
b) File_Path
c) Free_Space

Logic of FM is not disclosed because this is a simple logic which all intellectual ABAPers can code themselves. Our Focus is Microchart, Remember!! 😉

Great!! The FM is created and now we can create the Odata Service:

Steps are as under and let us revise them once:

1) Go to Tcode SEGW: Where? The backend System:

2) We need to create the entity and entity set which shall hold the data: As we have already created the Function Module, we shall import the RFC structure :

We selected the required attributes for the entity set to be prepared and provided the key and finished.

Now, our Entity and EntitySet  is created successfully:

Save and Generate to create the Runtime Artifacts:

Also Read: VDM 1 – S/4HANA Embedded Analytics Using CDS Virtual Data Model

In DPC_EXT class, redefine the method : FILESYSSET_GET_ENTITYSET:

Logic: In this method, we shall call the Function module to get the file details and the cust avail space defined and shall export it to et_entityset.

Now, create the Odata Service in frontend server and check the service : Great! it is working.

Let us proceed to the UI5 side:

We create a new SAP UI5 Application: File_Sys_Dash and we start designing the View :

Highlights of the View:

This view shall contain a Generic Tile which is nothing but a tile similar to the Standard Dashboard Tiles available on the Fiori Launchpad. Earlier, I was in the illusion that Tiles contain only the static data which can be displayed over them, but then my lead insisted that we can provide some dyanamic user interactive data also on the Tile and then we discovered ComparisonMicrocharts. Moreover, you can also show graphs on tiles.

So, in these tiles, we shall use ComparisonMicroCharts which shall highlight the File systems which has space less than the customized available space.

Before creating the View, we need to bind our application to the Odata created.

So let’s code our basic designed imagination in the View :

As seen above, the Comparison Micro chart’s data contains nothing as we shall bind it dynamically, it basically contains the rows we need to display.

Watch Free Video Course – Access Control in Core Data Services

Controller:

In the controller, in the onInit Function, we shall call the GetEntitySet Method in our Odata and retrieve the details.

Let us declare the variables:

The concept of getting the UI elements is still hazy for most of the developers. So, let us clear the Fog.

In order to bind the data to the UI Elements, we do the following steps:

1) Get the UI Element by its ID

2) Once we have the UI Element, we prepare a normal Json Model( nothing but a model which contains Data in Json format)

3) Then we create an array or a data structure which contains the data.

4) We then bind the data into the Jsonmodel

5) At the end, we bind the json model to the UI Element received at the first point.

Hoping the concept is cleared, let us proceed to calling the Odata Read Operation:

Here, we read the entity set FileSysSet, once we get a success response, we do the following:

1) We are unknown that how many rows of File systems, our Odata will return, till the length of the Odata results, we traced a for loop.

2) In the loop, we have created an array, having two elements, file and freespace and fills the value of the respective index of the result. ( You can get the exact field name from metadata )

3) For each iteration, we are pushing the data in the blank array, ‘File’ which we declared above.

4) As we also need to set the title dynamically, we set the value of the title in the results variable.

5) After the loop is traced, as per concept explained above, we set the data in the jsonModel and then we set the jsonModel in the respective Micro chart and Tile.

Once the controller is done, let us go back to the View.

I have introduced something in the data part of the Microchart i.e. data which is bind to the path FileData which is a jsonModel created dynamically in the controller and in the data part the title and the value is bind to the attributes: file and freespace of the array FileData.

Similarly, title of the Generic Tile in bind to the variable result.title.

Keeping our coding simple, let us see the output.

Oops, nothing has come, what went wrong?

We did not included the library of the micro charts.

Lesson: Every interesting thing in UI5 comes with a library, let us include xmlns:mc=”sap.suite.ui.microchart” in the View and then check the output. Wow, the fIles with free space less than 70 (customized value) appears as Comparative Chart in the Tile.

Let us change the customized value of free space in the table and check the UI again.

Wow!! The Title got changed and the Files too dynamically!!

The desired output is here!! We also can make this more dynamic by giving press events on each row of microcharts!! That once, you click on each row, desired functionality is achieved.

Your feedback and suggestions keep us motivated. Do keep them coming. Also let us know what topics you want us to cover in Virtual Data Model and Core Data Services.

We have a very active Telegram (App) SAP Technical Group with more than 5950+ SAP Technical Practitioners from 6 Continents of the SAP World. Please join it using below link.
Telegram SAP Technical Discuss Group. You need to install the Telegram App first on your mobile device. Once you have it on your mobile, you can join the group and also access it from the Web on your computer and laptop.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Free Step by Step SAPUI5 Exercises

Step by Step Virtual Data Model – VDM Tutorials

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here