Technical Articles
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:
- 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!
Good one Naseera.
Thank you!
Very informative
Thanks!
This blog is very detailed and informative.
Thank you!
Very Good Naseera Rahmathilahi
Thank you so much for sharing such a useful information. I will definitely share this with others.
FedLoan Servicing Account
As a beginner with SAPUI5 I greatly thank you for this! Great blog!
Thanks! 🙂
very usefully. it's nice.
Finally i found a good, detailed description to do my chart done 🙂 Thank you so much for sharing your ideas 🙂
Thank you 🙂
I did the steps up to the part before the annotation, the container chart does not appear for me.
when I debug I find this error: sap.ui.comp.navpopover.SemanticObjectController: Service 'CrossApplicationNavigation' could not be obtained -
I think this error is related to this tag.
knowing that I work with the sapui5 version 1.52.13
Hi Fettah,
Did you solve this problem? I'm having the same one.
Thanks!
Raphael
Hi Raphael,
I had the same issue and it worked running the app with "Run as SAP Fiori Launchpad Sandbox" or deploy it to your backend and include it in your SAP Fiori Launchpad.
Regards,
Andreas
It is not working for me.
The Chartcontainer is visible. I can also choose the dimensions and measures from service, but chart is busy.
"Uncaught TypeError: Cannot read property 'findQueryResultByName' of undefined".
Does someone have an idea why this might be?
Hi Lloyd
have you provided technical names for the keyfigures in the BEx Query?
Source:
https://blogs.sap.com/2019/10/14/simple-sapui5-app-to-display-charts/
Wolfgang
Hi,
for me, the chart is also not displayed. I see only a blue bar at the top of the page.
I have no idea, what is the problem. Where I can find the reason?
Sven
Hello Sven,
Trust you doing great,
have you solved this issue? For me, the chart also not displayed and only see blue bar at the top of page. use 1.52 sapui version due to my backend compability.
Is anyone have idea for this problem?
Hi Naseera!
Can't I do the annotations steps on "Business Aplication Studio"?
I didn't found these option.
Best regards,
Raphael
Hello. Did you solved this ? and how ?
Can anyone help me with creating simple bar chart for weather forecasting in sapui5 webide.
What is your requirement?