View not displaying Model Data from Manifest.json - data-binding

Question

I'm trying to setup my app descriptor file (manifest.json) to include a named model, 'inputs' in its "models" object. From my understanding, after doing so, the model should be available throughout the app when provided the correct path (see XML View).
The reason I'd like to setup this manifest.json is because it's a best practice to configure all models in here.
In the controller, I'd like to get and then set the 'inputs' Model defined in the manifest.json --but how can this be done?
manifest.json (Where I have configured the 'inputs' model)
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "pricingTool",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"ach": "ach",
"resources": "resources.json",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.30.3"
},
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "pricingTool.view.Main",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"inputs": {
"type": "sap.ui.model.json.JSONModel",
"uri": "model/inputs.json"
},
},
}
Main.controller.js (where the 'inputs' model should be set from the manifest file)
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/ui/model/Filter',
'sap/ui/model/FilterOperator',
'sap/m/MessageToast',
'pricingTool/model/viewControls',
'pricingTool/model/formatter',
'pricingTool/model/Utility',
'sap/ui/core/util/Export',
'sap/ui/core/util/ExportTypeCSV',
],
function (jQuery, Controller, JSONModel, Filter, FilterOperator, MessageToast, viewControls, formatter, Utility, Export, ExportTypeCSV) {
"use strict";
var mainController = Controller.extend("pricingTool.controller.Main", {
onInit: function(oEvent) {
//define named/default model(s)
var inputs = new JSONModel("./model/inputs.json");
//set model(s) to current xml view
this.getView().setModel(inputs, "inputs");
//this is one solution I have tried, but doesn't do anything:
// this.getView().setModel(this.getOwnerComponent().getModel("inputs"), "inputs");
//another solution I have tried:
//var inputs = this.getModel('input') <--I was hoping this would find the inputs defined in the manifest.json, but this doesn't work either
// this.getView().setModel(inputs, "inputs");
},
...
inputs.json
{
"propA" : "testVal"
}
XML View
<Button text="{inputs>propA}"></Button>
Components.js (Not sure what to do in the Component.js)
sap.ui.define([
'sap/ui/core/UIComponent'
],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("pricingTool.Component", {
metadata : {
metadata : {
manifest: "json"
},
rootView : "pricingTool.view.Main",
dependencies : {
libs : [
"sap.m",
"sap.ui.layout"
]
},
config : {
sample : {
files : [
"Main.view.xml",
"Main.controller.js"
]
}
}
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
return Component;
});
The problem is that the model property ("propA") is not displaying when I test it on a button control. Can anyone tell me why the model is not displaying in the app?
Summarizing Question
How can I define a model in manifest.json, and then set that model in the controller so I can use it in my xml view?

Answer 1

try putting a forward slash before your property name...
<Button text="{inputs>/propA}"></Button>
...and update your manifest file so that your model definition points to your dataSource defined under sap.app as follows...
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "pricingTool",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"ach": "ach",
"resources": "resources.json",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.30.3"
},
"dataSources": {
"inputsData": {
"type" : "JSON",
"uri": "model/inputs.json"
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "pricingTool.view.Main",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"products": {
"type": "sap.ui.model.json.JSONModel",
"uri": "model/products.json"
},
"inputs": {
"type": "sap.ui.model.json.JSONModel",
"dataSource" : "inputsData"
}
}
}
}
...change your Component.js file to point to your manifest file...
sap.ui.define([
'sap/ui/core/UIComponent'
],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("pricingTool.Component", {
metadata : {
manifest: "json",
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});
... and remove the onInit logic within your controller to set the model (this is handled by the component)

Answer 2

Those models you define in the manifest.json file are created in the Component context (if your app based on Component). To make it available in the XML view you have to obtain it from Component and then attach to the view. The code snippet you can use in onInit controller event looks like this:
this.getView().setModel(this.getOwnerComponent().getModel("<your_model_name>"), "<your_model_name>");
if you are using standard template then most likely you have a BaseController as an ancestor, in that case the code can look shorter:
this.setModel(this.getComponentModel("<your_model_name>"), "<your_model_name>");

Answer 3

Here is a minimal example of what you'd like to achieve: https://embed.plnkr.co/l1XF5O/
Models defined in manifest.json (aka. "app descriptor") will be set to the component (since v1.30).
If a descriptor is used, almost all properties of your component's metadata other than manifest: "json" are deprecated and should be avoided. Deprecated properties are listed here.
Views (and their controls inside) inside the root view instantiated by your component inherit models automatically from the component. Thus, setting models to your view explicitly is not needed anymore. Your view already knows the model that is set to the component.*
The binding syntax should be used correctly according to your situation:
Use relative binding syntax (modelName>property) only if a parent control has already a context bound (e.g. the parent control uses aggregation binding, or element binding).
In other cases, use absolute binding syntax. It starts with a slash (modelName>/property), so that the control doesn't look for the binding context of its parent.
*Although the model, which is set on the component, can be used seamlessly in the XMLView, retrieving the component model by calling view.getModel inside the onInit handler will return undefined. More about this: https://stackoverflow.com/a/43941380/5846045