Simple SAPUI5 app to display Charts

This is a beginner’s guide on how to create a chart in SAPUI5 consuming ODATA Service.

Steps to create app include:

1. Create a project from template
2. Add a new OData Service
3. Add xml code
4. 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

1. 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/
2. 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!