Skip to Content
Technical Articles
Author's profile photo Shravan Kumar RYAKAM

Dynamically creating different type of Vizframes using ODATA service

In this blog, I am going to explain How create a different type of Vizframes dynamically using ODATA Service.


                In order to create different types of Vizframes dynamically using ODATA Service to display the data in graphical representation.

Steps Include:

Right click on the workspace and hover on New and select Project from Template.

Select template type as SAPUI5 Application and click on Next.

Give the Project name and namespace of the project and click on the Next.

If you want to change the View Name or View Type, you can change in below screen. I choose for this project is View type is “XML” and View Name is View1 which will be show by default and click on finish.

Project will be created in the workspace as below.

To integrate the ODATA service to the project right click on project-> New -> oData Service as below.

In the sources, select Service Catalog and click on the drop down of the available destinations and choose the right destination as below.

Select the services which you are going to use as below and click on Next.

Click on Finish as below.

Please follow the view code from below, here I used Input to type the URL of ODATA service, ComboBox  is to select the vizType and Submit button is to handle the URL when click on it.

<mvc:View controllerName="com.dynamicChartsdynamicCharts.controller.View1" xmlns:html=""
	xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout"
	xmlns:chart="sap.suite.ui.commons" xmlns:f="sap.ui.layout.form"""
	xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz="sap.viz.ui5.controls" class="sapUiSizeCompact">
			<Page title="{i18n>title}">
					<Input width="25%" value="{valueModel>/input}" placeholder="{i18n>inputText}" />
					<ComboBox items="{path: 'comboModel>/items'}" selectedKey="{valueModel>/comboBox}" 
						value="{valueModel>/comboBox}" placeholder="{i18n>comboText}">
							<core:Item key="{comboModel>viztype}" text="{comboModel>viztype}"/>
					<Button type="Emphasized" text="Submit" press="onSubmitInput" class="sapUiSmallMarginBegin"/>
						<chart:ChartContainer visible="{valueModel>/visibleChart}">
									<viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}" vizProperties="{employeeData>/properties}"
										vizType="{employeeData>/vizType}" height="300px">
											< data="{path: 'employeeData>/'}">
													< name="performance" value="{employeeData>/Name}"/>
													< name="op2022" value="{employeeData>/Op2022}"/>
													< name="op2021" value="{employeeData>/Op2021}"/>
													< name="op2023" value="{employeeData>/Op2023}"/>
											<viz.feeds:FeedItem type="Measure" uid="{employeeData>/measureUid}" values="op2022,op2021,op2023"/>
											<viz.feeds:FeedItem type="Dimension" uid="{employeeData>/dimensionUid}" values="performance"/>

This is the model which I am going to bind to the comboBox from below json file from model folder.

Below code is the controller code for the above view.

], function(Controller, JSONModel, MessageBox) {
	"use strict";

	return Controller.extend("com.dynamicChartsdynamicCharts.controller.View1", {

		onInit: function() {
			var that = this;
			var oModel = new JSONModel("com.dynamicChartsdynamicCharts", "/model/comboModel.json"));
			that.getView().setModel(oModel, "comboModel");
			var value = new JSONModel({
				input: "",
				comboBox: "",
				visibleChart: false
			that.getView().setModel(value, "valueModel");
		onSubmitInput: function() {
			var that = this;
			var url = that.getView().getModel("valueModel").getData().input;
/*Below code is to handle the input and to make the URL to separate the service and entity and store in 2 different variables.*/
		handlingInput: function(url) {
			var that = this;
			var input = that.getView().getModel("valueModel").getData().input;
			var vizType = that.getView().getModel("valueModel").getData().comboBox;
			var array = input.split("/", "7");
			var entity = array.slice(-1).toString();
			var uri = input.replace(entity, "");
			that.getData(uri, entity, vizType);

/*This function is responsible to mock the entity of a service and get the data and store in a model.*/
		getData: function(url, entity, vizType) {
			var that = this;
			var oModel1 = new sap.ui.model.odata.ODataModel(url, true);
			var busyDialog = new sap.m.BusyDialog({
				text: "Data loading please wait..."
			});;"/" + entity, {
				success: function(oData) {
					var oModel = new JSONModel(oData);
					if (oData !== "") {
						that.getView().getModel("valueModel").setProperty("/visibleChart", true);
						that.handlingVizTypes(oData, vizType);
						that.getView().setModel(oModel, "employeeData");
					} else {
							results: []
				error: function(err) {
					var error = JSON.parse(err.response.body).error.message.value;
/*This function is responsible for inserting some of the properties into the object of an ODATA.*/
		handlingVizTypes: function(oData, vizType) {
			var that = this;
			if (vizType === "pie") {
				oData.vizType = "pie";
				oData.measureUid = "size";
				oData.dimensionUid = "color";
				// getting vizProperties as string from i18n and assigning to the key of the object(oData) in object format. = JSON.parse(that.getView().getModel("i18n").getResourceBundle().getText("vizPropertiesPie"));
			} else if (vizType === "donut") {
				oData.vizType = "donut";
				oData.measureUid = "size";
				oData.dimensionUid = "color";
				// getting vizProperties as string from i18n and assigning to the key of the object(oData) in object format. = JSON.parse(that.getView().getModel("i18n").getResourceBundle().getText("vizPropertiesDonut"));
			} else if (vizType === "bar") {
				oData.vizType = "bar";
				oData.measureUid = "valueAxis";
				oData.dimensionUid = "categoryAxis";
				// getting vizProperties as string from i18n and assigning to the key of the object(oData) in object format. = JSON.parse(that.getView().getModel("i18n").getResourceBundle().getText("vizPropertiesBar"));
			} else if (vizType === "column") {
				oData.vizType = "column";
				oData.measureUid = "valueAxis";
				oData.dimensionUid = "categoryAxis";
				// getting vizProperties as string from i18n and assigning to the key of the object(oData) in object format. = JSON.parse(that.getView().getModel("i18n").getResourceBundle().getText("vizPropertiesColumn"));

This will be the Initial output for the above code.

Please Enter the URL and select viztype as below and click on Submit button.

This will be the output for Bar type vizframe.

This will be the output for Pie type vizframe.

This will be the output for Donut type vizframe.

This will be the output for Column type vizframe.


This would covers displaying the data in the graphical representation dynamically by entering URL in the Input and selection of viz types from dropdown.

For references, please go through the links.

Vizframes used for the above example click here.

Adding ODATA service and new SAPUI5 Model click here.

Please leave your comments and suggestions so that I can improve the blog.


Shravan Kumar.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Marian Zeis
      Marian Zeis

      I know Web IDE is used by a lot of people and will be till 2027, but it´s already deprecated and BAS and VS Code is just in so many ways better and easier to develop.

      Why are you still using Web IDE? Not able to because of restrictions?

      Author's profile photo Shravan Kumar RYAKAM
      Shravan Kumar RYAKAM
      Blog Post Author

      Hi Marian Zeis, Thanks for reading my blog posted. It is just because of issue with my BAS of adding ODATA service to it, even though I mostly used to work on BAS.