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
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- How to Deploy UI5 App without LPD_CUST?
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Advance SAPUI5 – 1- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Advance SAPUI5 – 2- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- Advance SAPUI5 – 3 – How to send e-mail in SAPUI5 Hybrid App?
- Advance SAPUI5 – 4 – How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters
- SAPUI5 – How to Apply CSS in UI5 Apps?
- Advance SAPUI5 – 5 – Hybrid App Tutorial
- Advance SAPUI5 – 6 – Offline Application in 8 Steps
- SAPUI5 – Use of Formatter Function
- Advance SAPUI5 – 7 – Voice Recognition
- SAPUI5 – Resource Model for Freshers
- Advance SAPUI5 – 8 – How to Get Weight from the Weigh Scale/Weigh Bridge using Python for SAPUI5 Fiori Apps?
- SAP Fiori Tutorial. Part 7 – Custom Fiori App to Approve Change Requests in SOLMAN
- Advance SAPUI5 – 9 – Promises in UI
- SAPUI5 – Binding JSON Model Data in SAPUI5 List Control using SAP Web IDE
- SAPUI5 – Custom Control in UI5
- SAPUI5 – Understanding the ObjectListItem Control of UI5
- SAPUI5 – How to Build Master Detail UI5 App along with Search?
- SAPUI5 – How to Consume OData Model Data in UI5 using WebIDE?
- SAPUI5 – Routing in a Master Detail App
- SAPUI5 – Dynamic Binding with Comparison Microchart in SAPUI5
- 130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & jQuery, Interview Questions & Answers
- Advance SAPUI5 – 10 – How to Generate Installable .apk file for Andriod from SAPUI5 App?
- Step by Step Guide to Install SAP Web IDE Personal Edition
- Advance SAPUI5 – 11 – Fun with Super Mario in SAPUI5
- Advance SAPUI5 – 12 – Chatbot Integration using SAP’s CAI API with SAPUI5
- Advance SAPUI5 – 13 – How to Develop Audio Video Multimedia Player in SAPUI5
- Advance SAPUI5 – 14 – Develop an e-Signature Pad using SAPUI5
- Advance SAPUI5 – 15 – Attractive & Responsive Login Page Design in SAPUI5
- Advance SAPUI5 – 16 – Integration of Google Maps JavaScript API with SAPUI5 App
- Advance SAPUI5 – 17 – How to Directly Open Fiori App with pre-filled Data from Backend?
- Advance SAPUI5 – 18 – Using liveChange Event, with Custom Filter Function in sap.m.Table Control
- Advance SAPUI5 – 19 – Pagination in Table control with $top and $skip Query Options
- Advance SAPUI5 – 20 – How to Handle Input Validations using MessageManager and MessagePopOver?
- Advance SAPUI5 – 21 – Drag and Drop with custom Button Control
- BAS 3 – SAP Business Application Studio – Component Preload File with Sample App
- UI5 Tooling – Develop UI5 Apps in the Editor of your Choice – 1
- UI5 Tooling – Consume OData Service via UI5-Middleware-SimpleProxy – 2
- UI5 Tooling – How to Deploy UI5 App on Netlify – 3
- Advance SAPUI5 – 23 – Worklist App in SAP UI5 using a Responsive Table Control
- Advance SAPUI5 – 24 – How to use Annotation Modeler in SAP Web IDE to build FIORI Application
- Advance SAPUI5 – Part 25 – Working with GRID table in SAPUI5
- Advance SAPUI5 – Part 26 – Sorting Feature of SAPUI5 Grid table
- Advance SAPUI5 Part – 27 – SAPUI5 Responsive Table Data Export to CSV file
- Advance SAPUI5 Part – 28 – SAPUI5 Responsive table – Contextual width
- Advance SAPUI5 Part – 29 – Advanced features of SAPUI5 Grid table – Part 1
- Advance SAPUI5 Part – 30 – Advanced features of SAPUI5 Grid table – Part 2
- Advance SAPUI5 Part 31 – Working with VizFrame Charts in SAPUI5
- Advance SAPUI5 Part 32 – Working with SAPUI5 Controls | Icon Tab Bar – Part 1
- Advance SAPUI5 Part 33 – Working with SAPUI5 Controls | Icon Tab Bar – Part 2
Step by Step Virtual Data Model – VDM Tutorials
- VDM 1 – S/4HANA Embedded Analytics Using CDS Virtual Data Model
- VDM 2 – S/4HANA Embedded Analytics Using CDS Virtual Data Model – Value Helps & Annotations
- CDS Part 18 – Bar Chart & Donut Chart using CDS Views
- VDM 3 – S/4HANA Embedded Analytics Using CDS Virtual Data Model – Meta Data Extensions(MDE)
- VDM 4 – How to Expose & Consume CDS in Power BI?
- CDS – 26: Analyzing CDS with Analytical Annotation and Manipulating its Filter Options