How to set manifest data model to XML view?

[naveen_inuganti2]

Hi,

I am trying to map odata service to stacked bar chart on XML view. I've configured the manifest.json file with odata service that I created for this.

Take a look at code that is working as expected.

Code from init function of view controller:

        var oView = this.getView();
		var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/ZSRV_SRV");
    	oView.setModel(oModel);

Code from XML view:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" xmlns:chart="sap.chart" xmlns:data="sap.chart.data" controllerName="generated.app.controller.page_1">
    <m:Page showHeader="true" title="Responsive Page Title" showFooter="true" showNavButton="false">
        <m:content>
            <chart:Chart id="vda" width="100%" height="450px" 
            data="{/ResultSet}"
            visibleDimensions="Utyptext" visibleMeasures="LicQty,MsrQty" 
            chartType="stacked_bar" isAnalytical="false" selectionMode="Single" uiConfig="{}" 
            vizProperties="{plotArea:{dataLabel:{visible: true,hideWhenOverlap:true}}}">
                <chart:dimensions>
                    <data:Dimension name="Utyptext" label="Week" role="category"/>
                </chart:dimensions>
                <chart:measures>
                    <data:Measure name="LicQty" label="Cost1" role="axis2"/>
                    <data:Measure name="MsrQty" label="Cost2" role="axis2"/>
                </chart:measures>
            </chart:Chart>
        </m:content>
    </m:Page>
</mvc:View>

So, /ResultSet is my entity set. Utyptext, LicQty and MsrQty are fields in it. As I mentioned this code is working fine.

Concern is, I am not able to use model from manifest.json in this case.

Code from models section of manifest.json:

	"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"NAV": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneTime",
					"defaultCountMode": "Request"
				},
				"dataSource": "main",
				"preload": true
			}
		},

Code from Data Source Section:

		"dataSources": {
			"main": {
				"uri": "/sap/opu/odata/sap/ZSE_USM_LCOUNT_SRV/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/ZSE_USM_LCOUNT_SRV/metadata.xml"
				}
			}
		},

This indicates my mode name is NAV and data source is 'main'.

Now, when I modify code in init function of view controller. It should work right?

        var oView = this.getView();
		var oModel = this.getOwnerComponent().getModel("NAV");
    	oView.setModel(oModel);	

What's wrong with it? Why is it giving below error?

Uncaught TypeError: Cannot read property 'findQueryResultByName' of undefined!

Also,

Is it possible to find a solution within XML view for this? I mean should I really come to controller every time to bind data to the view? I tried to use 'content="{/ResultSet}" for the view and page.. no result. I think worked for objects other than charts.

Suggest me the best approach to bind manifest.json model to view. (May be above it the best approach, help me to fix the issue).

Thanks for checking this!!

Regards,

Naveen

[naveen_inuganti2 · Accepted solution]

Yes, this was fixed. Sorry for the delay in update.

Actually, I didn't do anything different than what I posted in my query. I was just playing around it and realized navigation path (routing calls) are having some dummy code which was causing this issue. I've generated design code from BUILD tool, may be that was causing issue.

Hers's working code:

View Controller Code:

this.getView().setModel(this.getOwnerComponent().getModel());        
this.getView().byId("CHART001").bindData({"path": "/C1Set"});

View Code:

<chart:Chart id="CHART001" width="100%" height="90%" visibleDimensions="Utyptext" visibleMeasures="MsrQty,MsrQtyx,LicQty" chartType="column" isAnalytical="false" selectionMode="Single" uiConfig="{}" vizProperties="{plotArea:{dataLabel:{visible: true,hideWhenOverlap:true}}}" selectData="_onStackedBarChartSelectData"> 

<chart:dimensions>
<data:Dimension name="Utyptext" label="License Category" role="category"/> 
</chart:dimensions> 

<chart:measures> 
<data:Measure name="MsrQty" label="Measured (Filtered)" role="axis2"/>
<data:Measure name="MsrQtyx" label="Measured" role="axis2"/> 
<data:Measure name="LicQty" label="Licensed" role="axis2"/> 
</chart:measures>
</chart:Chart>

Regards,

Naveen

[Former Member]

Hi Naveen,

Just wondering that did you fixed the issue yet? I have the same issue with charts and getting the same error that you had.

would you mind share your solution if you got it solved.

Thanks.

Zhen Wang

[former_member340030]

Hi Naveen ,

Can you just tell your whole manifest file .. I just wanted to check whether you are defining your data source = "main" in the sap.app

thanks

Viplove

[naveen_inuganti2]

Yes, I defined it as main.

[former_member365727]

"Component.js" file created ?? and "metadata" defined in "Component.js" ??

Also in the code....if a model is defined in 'manifest.json' then it is accessible to all the views ....which means you donot need to set the model in the view again...

        var oView = this.getView();
		var oModel = this.getOwnerComponent().getModel("NAV");
    	oView.setModel(oModel);	 //-------> This is not required

To resolve the issue first try to access "this.getOwnerComponent()" and print to the console.....and I beleive this is "undefined"

[naveen_inuganti2]

yes. Component.js is created (I generated whole code from SAP Build).

Below is the code:

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"generated/app/model/models"
], function(UIComponent, Device, models) {
	"use strict";


	var navigationWithContext = {
	
	};


	return UIComponent.extend("generated.app.Component", {


		metadata: {
			manifest: "json"
		},
		


		/**
		 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
		 * @public
		 * @override
		 */
		init: function() {
			
		  	 //var oModel = this.getModel("NAV");


			 //this.setModel(oModel,"NV");


			// set the device model
			this.setModel(models.createDeviceModel(), "device");
			// set the FLP model
			this.setModel(models.createFLPModel(), "FLP");
			


			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);


			// create the views based on the url/hash
			this.getRouter().initialize();
		},


		createContent: function() {




			var app = new sap.m.App({
				id: "App"
			});
			var appType = "App";
			var appBackgroundColor = "#FFFFFF";
			if (appType === "App" && appBackgroundColor) {
				app.setBackgroundColor(appBackgroundColor);
			}


			return app;
		},


		getNavigationPropertyForNavigationWithContext: function(entityNameSet, targetPageName) {
			var entityNavigations = navigationWithContext[entityNameSet];
			return entityNavigations == null ? null : entityNavigations[targetPageName];
		}
	});


});

[naveen_inuganti2]

and,

this is the console log for this.getOwnerComponent()

[former_member365727]

for the console.log output of this.getOwnerComponent()....expand "oModels" and see if the model with name "NAV" is defined or not......if model is defined then it can be accessed using the code "this.getOwnerComponent().getModel('NAV')"

[naveen_inuganti2]

Yes, it is coming here.

[naveen_inuganti2]

And, below is the console for 'NAV' model. I see nothing in Bindings.

[former_member365727]

change binding for the chart.....aggregation binding of the chart "data" should be data="{NAV>/ResultSet}"

            <chart:Chart id="vda" width="100%" height="450px" 
            data="{NAV>/ResultSet}"
            visibleDimensions="Utyptext" visibleMeasures="LicQty,MsrQty" 
            chartType="stacked_bar" isAnalytical="false" selectionMode="Single" uiConfig="{}" 
            vizProperties="{plotArea:{dataLabel:{visible: true,hideWhenOverlap:true}}}">
                <chart:dimensions>
                    <data:Dimension name="Utyptext" label="Week" role="category"/>
                </chart:dimensions>
                <chart:measures>
                    <data:Measure name="LicQty" label="Cost1" role="axis2"/>
                    <data:Measure name="MsrQty" label="Cost2" role="axis2"/>
                </chart:measures>
            </chart:Chart>

[naveen_inuganti2]

I tried that. it's not working.