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

[athavanraja]

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

[former_member196805 · Accepted solution]

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))})

[athavanraja]

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

[athavanraja]

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