This is a beginner's guide on how to create a chart in SAPUI5 consuming ODATA Service.
Steps to create app include:
- Create a project from template
- Add a new OData Service
- Add xml code
- Create annotations
And the
output will look something like this -
First chart represents Preventive Maintenance Count by District.
Second chart represents PM Count ACTUAL and PLAN values with respect to district.
Prerequisites
- Created ODATA Service - You can also create ODATA Service using BEx Query Designer -Refer https://blogs.sap.com/2019/10/08/bex-query-based-fiori-app/
- Setup WebIDE on Hana Cloud Platform - If you haven't already set up WebIDE on Hana Cloud Platform, you can use this link to get it done - https://blogs.sap.com/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1/
Step 1: Create a Project in WEbIDE
Step 2: Add a new OData Service
Destination in HCP is configured during WebIDE setup. Refer to
https://blogs.sap.com/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1/ for more details.
Step 3: Modify xml code
Browse through the folder structure and open View1.view.xml file using code editor.
We are going to modify the contents of View1.view.xml. But before we start, lets keep a copy of controllerName details present in this file.
controllerName="com.testing.Simple_Fiori_Chart.controller.View1"
Now, let's add the code for Smart Chart.
Go to link -
https://sapui5.hana.ondemand.com/#/controls
Search for
Smart Chart and select the first sample.
Copy the entire SmartChart.view.xml code. Replace the entire code in the xml file in our project with the copied code.
Now replace the controllerName with what we had already saved.
controllerName="com.testing.Simple_Fiori_Chart.controller.View1"
We need to make one more change before we are done. We need to change the
entitySet property of SmartChart.
entitySet="ZFIORI_SAMPLEResults"
You can look for the entitySet Name in the metadata of your ODATA Service by using this url-
http://<ip>:<port>/sap/opu/odata/sap/<ODATA_SRV>/$metadata
This is what your code should look like now:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:smartchart="sap.ui.comp.smartchart"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:sl="sap.ui.comp.navpopover"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns="sap.m"
controllerName="com.testing.Simple_Fiori_Chart.controller.View1">
<VBox fitContainer="true">
<smartchart:SmartChart id ="smartChartGeneral" enableAutoBinding="true"
entitySet="ZFIORI_SAMPLEResults" useVariantManagement="true"
persistencyKey="PKeyChartExample9" useChartPersonalisation="true"
header="" showFullScreenButton="true" selectionMode="Multi"
showChartTooltip="true" showDrillBreadcrumbs="false"
showDetailsButton="false" showDrillButtons="true"
showSemanticNavigationButton="true"
data:dateFormatSettings='\{"pattern":"y MMMM d"\}'>
<smartchart:semanticObjectController>
<sl:SemanticObjectController
navigationTargetsObtained="onNavigationTargetsObtained" navigate="onNavigate" />
</smartchart:semanticObjectController>
</smartchart:SmartChart>
</VBox>
</mvc:View>
Save all files and run the app.
Output as of now :
We have managed to get the chart container. Now to get the bars we need to define annotations.
Step 4: Add annotations
Right click on webapp folder and add new Annotation file
Open the newly added annotation file using annotation modeler and perform below steps to add Chart and its measure and dimension.
In the same manner add the dimension. And final annotation file will look like this-
Save and Run
For the second chart, add one more dimension and dimension attribute for value type-
and now the output is -
And with these steps we have created a UI5 app to display charts consuming ODATA service.
I hope you enjoyed the read. Feedback and questions are welcome!