All geek questions in one place

View not displaying model data from Manifest.json

I am trying to customize an application descriptor file (manifest.json) to include a named model, "inputs" in my "models" object. In my opinion, after this, the model should be available throughout the application, provided that the path is correct (see XML representation).

The reason I want to customize this manifest. json is what is best to configure all models here.

In the controller, I would like to get and then install the model of "inputs" defined in the manifest. json - but how can this be done?

manifest.json (where I set up 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 must be installed 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 representation

<Button text="{inputs>propA}"></Button>

Components.js ( , 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;

});

, model ( "propA" ) , . - , ?

manifest.json, , XML?

+4
3

...

<Button text="{inputs>/propA}"></Button>

... , , sap.app, ...

{
"_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"
        }
      }
    }
}

... Component.js ...

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

        }
    });
});

... onInit , ( )

+3

, manifest.json, Component ( Component). XML, . , onInit, :

this.getView().setModel(this.getOwnerComponent().getModel("<your_model_name>"), "<your_model_name>");

, , , BaseController , :

this.setModel(this.getComponentModel("<your_model_name>"), "<your_model_name>");
+1

, : https://embed.plnkr.co/l1XF5O/

  • , manifest.json(. " " ) ( 1.3).
  • , metadata, manifest: "json", . .
  • ( ) , , . , . , . *
  • :
    • (modelName>property), (, ).
    • In other cases, use absolute binding syntax. It starts with a slash ( modelName>/property), so the control does not look for the binding context of its parent.

* Although the model installed on the component can be easily used in XMLView, retrieving the component model by calling view.getModelinside the onInit handler will return undefined. More on this: fooobar.com/questions/1667709 / ...

+1
source

Source: https://habr.com/ru/post/1667706/

More articles:


All Articles