4

Hello Sapui5 developers,

Today i get into a situation where i have 5 charts to display each of different style and uses different data so I thought instead of using viz frames multiple times in my page i want to write a custom control which takes grapghtype,FlattenedDataset data,DimensionDefinition value,MeasureDefinition name value ,list of feed items.

SO general code is as below

<viz:VizFrame id="idVizFrame" 
              uiConfig="{applicationSet:'fiori'}"
              height='100%' 
              width="100%" 
              vizType='donut'>
  <viz:dataset>
    <viz.data:FlattenedDataset data="{/milk}">
      <viz.data:dimensions>
        <viz.data:DimensionDefinition name="Store Name"
                                      value="{Store Name}" />
      </viz.data:dimensions>
      <viz.data:measures>
        <viz.data:MeasureDefinition name="Revenue"
                                    value="{Revenue}" />
      </viz.data:measures>
    </viz.data:FlattenedDataset>
  </viz:dataset>

  <viz:feeds>
    <viz.feeds:FeedItem uid="size" 
                        type="Measure"
                        values="Revenue" />
    <viz.feeds:FeedItem uid="color" 
                        type="Dimension"
                        values="Store Name" />
  </viz:feeds>
</viz:VizFrame>

I want it to be like

<chart frameType="donut" 
       flattenedData="{/milk}" 
       dimensionDefinationData="{Store Name}" 
       measureDefinationData="{Revenue}" />

then in should render a donut graph.

this is what i have tried

shadowChart.js:

sap.ui.define([
  "sap/ui/core/Control",
  "sap/viz/ui5/controls/VizFrame",
  "sap/viz/ui5/data/FlattenedDataset",
  "sap/viz/ui5/controls/common/feeds/FeedItem"
], function(Control, gViz, gData, gFeeds) {

  "use strict";

  return Control.extend("NWS.control.shadowCharts",  {

    "metadata": {
        "properties": {
            "value": {
                "type": "float",
                "defaultValue": 0
            },
            "frameType": {
                "type": "string",
                "defaultValue": "bar"
            },
            "flattenedData": {
                "type": "object",
                "defaultValue": ""
            },
            "dimensionDefinationData": {
                "type": "string",
                "defaultValue": ""
            },
            "measureDefinationData": {
                "type": "string",
                "defaultValue": ""
            },
            "height": {
                "type": "string",
                "defaultValue": "90%"
            },
            "width": {
                "type": "string",
                "defaultValue": "90%"
            }
        },
        "aggregations": {
            "_vizFrames": {
                "type": "sap.viz.ui5.controls.VizFrame",
                "multiple": false,
                "visibility": "hidden"
            }

        }
    },

    init: function() {

        var oDataSet = new sap.viz.ui5.data.FlattenedDataset({
            "data": {
                "path": this.getFlattenedData()
            },
            "dimensions": [{
                "name": "dimensionNameHere",
                "value": this.getDimensionDefinationData()
            }],
            "measures": [{
                "name": "measureNameHere",
                "value": this.getMeasureDefinationData()
            }]
        });
        var feedItem1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": "ValueAxis",
            "type": "Measure",
            "values": ["measureNameHere"]
        });
        var feedItem2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": "categoryAxis",
            "type": "Dimension",
            "values": ["dimensionNameHere"]
        });
        var vizFrame = new sap.viz.ui5.controls.VizFrame({
            "vizType": this.getFrameType(),
            "dataset": oDataSet,
            "feeds": [feedItem1, feedItem2],
            "iConfig" : "{applicationSet:'fiori'}",
            "selectData": this._dataSelect.bind(this)
        })
        this.setAggregation("_vizFrames", vizFrame);


    },

    _dataSelect: function(oEvent) {


    },

    renderer: function(oRM, oControl) {
        oRM.write("<div");
        oRM.writeControlData(oControl);
        oRM.addClass("customVizFrame");
        oRM.writeClasses();
        oRM.write(">");
        oRM.renderControl(oControl.getAggregation("_vizFrames"));

        oRM.write("</div>");
    }
  });
});

in login view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
    controllerName="view.Login" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:cViz="NWS.control">
  <Page title="{i18n>Title}" >
    <content>
      <VBox class="sapUiSmallMargin">
         <cViz:shadowCharts frameType="donut" 
                            flattenedData="{gDataModel>/milk}"     
                            dimensionDefinationData="{Store Name}"                     
                            measureDefinationData="{Revenue}" />
      </VBox>
    </content>
  </Page>
</mvc:View>

The error while debugging (in init function) is with passing binding data.. as i am getting

this.getFrameType() as "bar" but not "donut",this.getFlattenedData() as ""

probably it has something to do with properties type.

Kindly help me out with requirement

2
  • So you want somebody to write the control for you? What if you try first and come back with some concrete problems?
    – cschuff
    Aug 11, 2016 at 18:52
  • i have updated the question please have a look Aug 12, 2016 at 9:47

2 Answers 2

1

I figured out the issue with help of my friends.

so problem here is we can't get property values in init function so i shifted the code to renderer function.

chartController.js

sap.ui.define([
"sap/ui/core/Control",
"sap/viz/ui5/controls/VizFrame",
"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem"], function(Control, gViz, gData, gFeeds) {
"use strict";

return Control.extend("NWS.control.shadowCharts", {

    "metadata": {
        "properties": {
            "value": {
                "type": "float"

            },

            "frameType": {
                "type": "string"
            },
            "flattenedData": {
                "type": "string"
            },
            "dimensionDefinationData": {
                "type": "string"

            },
            "measureDefinationData": {
                "type": "string"

            },
            "height": {
                "type": "string"

            },
            "width": {
                "type": "string"

            },
            "press":{
                "type":"string"
            }
        },
        "aggregations": {
            "_vizFrames": {
                "type": "sap.viz.ui5.controls.VizFrame",
                "multiple": false,
                "visibility": "hidden"
            }

        },
        "events":{
            press:{}
        }
    },

    init: function() {
      this.getControlInstance=this;
    },

    _dataSelect: function(oEvent) {

          this.fireEvent("press");

    },



    renderer: function(oRM, oControl) {

        var oDataSet = new sap.viz.ui5.data.FlattenedDataset({
            "data": {
                "path": oControl.getFlattenedData()
            },
            "dimensions": [{
                "name": oControl.getDimensionDefinationData(),
                "value": "{"+oControl.getDimensionDefinationData()+"}"
            }],
            "measures": [{
                "name": oControl.getMeasureDefinationData(),
                "value": "{"+oControl.getMeasureDefinationData()+"}"
            }]
        });
        var gType=oControl.getFrameType();
        var measureUid="";
        var dimesionUid="";
        switch(gType){
            case "donut":measureUid="size";dimesionUid="color";break;
            case "bar":measureUid="valueAxis";dimesionUid="categoryAxis";break;
            default:throw "error beacause of unknown graph type"

        }
        var feedItem1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": measureUid,
            "type": "Measure",
            "values": [oControl.getMeasureDefinationData()]
        });
        var feedItem2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
            "uid": dimesionUid,
            "type": "Dimension",
            "values": [oControl.getDimensionDefinationData()]
        });
        var vizFrame = new sap.viz.ui5.controls.VizFrame({
            "vizType": oControl.getFrameType(),
            "dataset": oDataSet,
            "feeds": [feedItem1, feedItem2],
            "iConfig": "{applicationSet:'fiori'}",
            "selectData": oControl._dataSelect.bind(oControl.getControlInstance)
        })
            vizFrame.setVizProperties({

                    title: {
                        visible: false,
                        text: 'Statastics'
                    }
                });
        oControl.setAggregation("_vizFrames", vizFrame);
        oRM.write("<div");
        oRM.writeControlData(oControl);
        oRM.addClass("customVizFrame");
        oRM.writeClasses();
        oRM.write(">");
        oRM.renderControl(oControl.getAggregation("_vizFrames"));

        oRM.write("</div>");
    }
});});

so my controller usage in xml is:

 <cViz:shadowCharts frameType="bar" flattenedData="/milk" dimensionDefinationData="Store Name" measureDefinationData="Revenue" press="shadowChartsClick"></cViz:shadowCharts>

there is scope for optimization :-)

0

You could try to implement logging inside the “INIT”-function. Make sure that this.getFrameType refers to the proper instance and to verify that the “INIT”-function is not being executed twice since it could also be a timing problem.

You might also try to implement a specific setter function (setValue) to make sure that the setter is called before the “INIT”-function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.