
<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>
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"));
}
}
});
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
23 | |
23 | |
9 | |
5 | |
5 | |
5 | |
5 | |
5 | |
4 | |
4 |