Skip to Content

SAPUI5 XMLView aggregation binding path for the parent aggregation in child aggregation

I am trying to generate n no. of charts based on configuration data read from a service. Here is my json structure (partial)

{
"opr": 
{
    "c1":{"data": [{"period": "Apr-16",
            "bmx": "1.133",
            "bsl": "0.083"}],
                              "props":{"title":"Monthly Production ","viztype":"dual_stacked_combination","dimension":[{"name":"period","value":"period"}],
                         "vizproperties":"{legendGroup :{layout :{position : 'bottom'},forceToShow: true,linesOfWrap: 2}}",
                         "measures":[   {"name":"BMX","value":"bmx"},       {"name":"BSL","value":"bsl"}],
                                             "feeds":[{"uid":"valueAxis2","type":"Measure","values":"BMX"},{"uid":"valueAxis2","type":"Measure","values":"BSL" },{"uid":"categoryAxis","type":"Dimension","values":"period" }]}},
    "c2":{"data": [],
                                 "props":{"dimension":[],"feeds":[],"measures":[]}

Here is my xmlviewcode

<HBox width="100%" items="{path:'infoChartModel>/opr',templateShareable:false}">
        <su:ChartContainer
                            showFullScreen="true"
                            showPersonalization="false"
                            autoAdjustHeight="false"
                            showZoom="false"
                            title="{infoChartModel>props/title}">                           
                            <su:content>
                                <su:ChartContainerContent icon="sap-icon://line-chart" title="Chart View">
                                    <su:content>                            
                                        <viz:VizFrame width="100%" vizType='{infoChartModel>props/viztype}'
                                        vizProperties="{infoChartModel>props/vizproperties}" feeds="{path:'infoChartModel>props/feeds',templateShareable:false}"> 
                                            <viz:dataset>
                                                <viz.data:FlattenedDataset data="{infoChartModel>data}"
                                                measures="{path:'infoChartModel>props/measures',templateShareable:false}" 
                                                dimensions="{path:'infoChartModel>props/dimension',templateShareable:false}" >
                                                    <viz.data:dimensions >
                                                        <viz.data:DimensionDefinition name="{infoChartModel>name}" value="{parts:[{path:'infoChartModel>value'},{path:'infoChartModel>/opr/data'}],formatter:'.getDimVal'}" />
                                                    </viz.data:dimensions>
                                                    <viz.data:measures>
                                                        <viz.data:MeasureDefinition name="{infoChartModel>name}" value="{parts:[{path:'infoChartModel>value'},{path:'infoChartModel>/opr/data'}],formatter:'.getMeasureVal'}" />
                                                    </viz.data:measures>
                                                </viz.data:FlattenedDataset>
                                            </viz:dataset>
                                            <viz:feeds>
                                                <viz.feeds:FeedItem uid="{infoChartModel>uid}" type="{infoChartModel>type}" values="{infoChartModel>values}" />
                                            </viz:feeds>
                                        </viz:VizFrame>
                                    </su:content>
                                </su:ChartContainerContent>
                        </su:content>       
                        </su:ChartContainer>
                </HBox>

The challenge I am facing is how to bind the "value" property of dimension/measure aggregation to a value from FlattenedDataset's data.(from a parent). Its nested aggregation issue referring to parent value from child aggregation.

Similar point is discussed here .(17:51hrs response from user dlgrasse)

Thanks in advance for any help.

Regards

Raja

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Dec 27, 2017 at 03:08 AM

    You could try the following:

    1. define the JSON structure as a variable like

    var oParams = {"opr":{c1:{...}, c2:{...}}}

    2. use bindAggregation like below for measures, dimensions and data definition:

    var oDataset = new sap.viz.ui5.data.FlattenedDataset();
    oDataset.bindAggregation("measures",{
      path: '/opr/c1/props/measures',
      factory: function(sId, oContext){
        var oMeasureDefinition = new sap.viz.ui5.data.MeasureDefinition({
          name: "{name}",
          value:{path: oContext.getProperty("value")}
        });
        return oMeasureDefinition;
      }
    });
    oDataset.bindAggregation("dimensions", {
      path: "/opr/c1/props/dimension",
      factory: function(sId, oContext){
        var oDimensionDefinition = new sap.viz.ui5.data.DimensionDefinition({
          title: "{name}",
          name: "{name}",
          value: {path: oContext.getProperty("value")}
        });
        return oDimensionDefinition;
      }
    });
    oDataset.bindAggregation("data", {path: "/opr/c1/data"});

    3. feed the dimensions and measures to vizFrame like the following:

    var oFeeds = oParams.opr.c1.props.feeds;
    oFeeds.forEach(function(feedItem){oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem(feedItem))})
    Add comment
    10|10000 characters needed characters exceeded

  • Dec 27, 2017 at 04:42 AM

    Thank you very much. Will definitely try this approach. For now, created a custom control to manage the scenario, (custom control idea from here

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 27, 2017 at 07:29 AM

    Thank you very much Chapman Wong. Successfully adopted your solution in XMLView.

    JSON structure

    {"opr":  [{"data":[],  "dimensions":[],  "measures":[],  "feeds":[],  "vizproperties":{},  "viztype":""},{"data":[],  "dimensions":[],  "measures":[],  "feeds":[],  "vizproperties":{},  "viztype":""}]}

    XMLView code

    <l:Grid id="cchbox" defaultSpan="L4 M6 S6" class="sapUiSmallMarginTop" width="100%" content="{path:'infoChartModel>/opr',templateShareable:false}">
    
    			<l:content>
    
    						<su:ChartContainer
    
    								showFullScreen="true"
    
    								showPersonalization="false"
    
    								autoAdjustHeight="false"
    
    								showZoom="false"
    
    								title="{infoChartModel>title}">							
    
    								<su:content>
    
    									<su:ChartContainerContent icon="sap-icon://line-chart" title="Chart View">
    
    										<su:content>							
    
    											<viz:VizFrame width="100%" vizType='{infoChartModel>viztype}' vizProperties="{path:'infoChartModel>vizproperties',formatter:'.vizPropertyFormatter'}"
    
    											feeds="{path:'infoChartModel>feeds',templateShareable:false,factory:'.feedsFactory'}"> 
    
    								                <viz:dataset>
    
    								                    <viz.data:FlattenedDataset data="{infoChartModel>data}"
    
    								                    measures="{path:'infoChartModel>measures',factory:'.measuresFactory'}" 
    
    								                    dimensions="{path:'infoChartModel>dimensions',factory:'.dimsFactory'}" >
    
    								                    </viz.data:FlattenedDataset>
    
    								                </viz:dataset>
    
    								            </viz:VizFrame>
    
    										</su:content>
    
    									</su:ChartContainerContent>
    
    							</su:content>		
    
    							</su:ChartContainer>
    
    			</l:content>
    
    			</l:Grid>
    

    Controller Code

    vizPropertyFormatter: function(vp){
    
    		return(vp);
    
    	},
    
    	feedsFactory: function(sId, oContext){
    
    		 var oFeed = new sap.viz.ui5.controls.common.feeds.FeedItem({
    
    	            uid: "{infoChartModel>uid}",
    
    	            type: "{infoChartModel>type}",
    
    	            values: [oContext.getProperty("values")]
    
    	        });
    
    		 return oFeed ;
    
    	},
    
    	measuresFactory: function(sId, oContext){
    
    		 var oMeasureDefinition = new sap.viz.ui5.data.MeasureDefinition({
    
    		      name: "{infoChartModel>name}",
    
    		      value:{path: oContext.getProperty("value")}
    
    		    });
    
    		    return oMeasureDefinition;
    
    
    
    	},
    
    	dimsFactory: function(sId, oContext){
    
    		var oDimensionDefinition = new sap.viz.ui5.data.DimensionDefinition({
    
    		      title: "{infoChartModel>name}",
    
    		      name: "{infoChartModel>name}",
    
    		      value: {path: oContext.getProperty("value")}
    
    		    });
    
    		    return oDimensionDefinition;
    
    
    
    	},
    

    Thank you very much.

    Regards

    Raja

    Add comment
    10|10000 characters needed characters exceeded