In this blog, I am going to explain How create a different type of Vizframes dynamically using ODATA Service.
Problem:
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.
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.
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.
Conclusion:
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.
Thanks,
Shravan Kumar.
Problem:
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="http://www.w3.org/1999/xhtml"
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.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz="sap.viz.ui5.controls" class="sapUiSizeCompact">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Input width="25%" value="{valueModel>/input}" placeholder="{i18n>inputText}" />
<ComboBox items="{path: 'comboModel>/items'}" selectedKey="{valueModel>/comboBox}"
value="{valueModel>/comboBox}" placeholder="{i18n>comboText}">
<items>
<core:Item key="{comboModel>viztype}" text="{comboModel>viztype}"/>
</items>
</ComboBox>
<Button type="Emphasized" text="Submit" press="onSubmitInput" class="sapUiSmallMarginBegin"/>
<VBox>
<chart:ChartContainer visible="{valueModel>/visibleChart}">
<chart:ChartContainerContent>
<chart:content>
<viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}" vizProperties="{employeeData>/properties}"
vizType="{employeeData>/vizType}" height="300px">
<viz:dataset>
<viz.data:FlattenedDataset data="{path: 'employeeData>/'}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="performance" value="{employeeData>/Name}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="op2022" value="{employeeData>/Op2022}"/>
<viz.data:MeasureDefinition name="op2021" value="{employeeData>/Op2021}"/>
<viz.data:MeasureDefinition name="op2023" value="{employeeData>/Op2023}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem type="Measure" uid="{employeeData>/measureUid}" values="op2022,op2021,op2023"/>
<viz.feeds:FeedItem type="Dimension" uid="{employeeData>/dimensionUid}" values="performance"/>
</viz:feeds>
</viz:VizFrame>
</chart:content>
</chart:ChartContainerContent>
</chart:ChartContainer>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>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.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageBox"
], function(Controller, JSONModel, MessageBox) {
"use strict";
return Controller.extend("com.dynamicChartsdynamicCharts.controller.View1", {
onInit: function() {
var that = this;
var oModel = new JSONModel(jQuery.sap.getModulePath("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;
that.handlingInput(url);
},
/*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..."
});
busyDialog.open();
oModel1.read("/" + entity, {
success: function(oData) {
busyDialog.close();
var oModel = new JSONModel(oData);
if (oData !== "") {
that.getView().getModel("valueModel").setProperty("/visibleChart", true);
that.handlingVizTypes(oData, vizType);
that.getView().setModel(oModel, "employeeData");
} else {
oModel.setData({
results: []
});
}
},
error: function(err) {
busyDialog.close();
var error = JSON.parse(err.response.body).error.message.value;
sap.m.MessageBox.error(error);
}
});
},
/*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.
oData.properties = 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.
oData.properties = 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.
oData.properties = 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.
oData.properties = 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.
Conclusion:
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.
Thanks,
Shravan Kumar.
- SAP Managed Tags:
2 Comments
