Skip to Content

#tipoftheday will be a series of blog post that I’m mirroring from my Medium account.

Before SAPUI5 1.30 you were forced to init your JSON model inside your Component.js like this:

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel) {
	"use strict";

	return UIComponent.extend("com.openui5.example.Component", {

		metadata: {
			manifest: "json"
		},

		init: function() {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);
			
			//Create the model and load data from the local JSON file
			var oModel = new JSONModel("./model/init_data.json");
			oModel.setDefaultBindingMode("OneWay");

			// set the device model
			this.setModel(oModel, "init_data");
		}
	});

});

Why waste time and code when you can simply load it directly from the manifest.json?

I’ve created a stripped manifest that will show you only the interesting parts to copy/past.

{
	"_version": "1.1.0",
	"sap.app": {
		"dataSources": {
			"init_data_alias": {
				"uri": "model/init_data.json",
				"type": "JSON"
			}
		}
	},
	"sap.ui5": {
		"_version": "1.1.0",
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "com.openui5.example.i18n.i18n"
				}
			},
			"init_data": {
				"type": "sap.ui.model.json.JSONModel",
				"dataSource": "init_data_alias"
			}
		}
	}
}
  1. Create an entry inside the sap.app dataSources with an alias name like “init_data_alias”. You must at least specify the uri of the source that can be a local path to the json file or an URL to the service. Also you can specify the type of the data (default oData)
  2. Create an entry inside the sap.ui5 models. The name used for the entry name will be the name of the model. Leave it alone if you want to replace the default component model. Now you just need to specify the type (in my case sap.ui.model.json.JSONModel) and which is the dataSource alias we used inside sap.app.dataSources

Pretty easy uh?

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. Nitin Singh

    Hi Emanuele,

    It was very helpful and nicely explained. Only question bothering me is if I have to add add source for OData I will do something like this

    “dataSources”: {
       “localService”: {
         “uri”: “/”,
         “type”: “OData”,
         “settings”: {
           “odataVersion”: “2.0”,
           “localUri”: “localService/metadata.xml”
         }
      }

    }

     

    What will happen when I will add remote OData endpoints? Do I need to update manifest? can I add two data source for OData i.e for local and remote?

    (0) 
    1. Emanuele Ricci Post author

      Hi @Nitin, here’s a working example:

        "dataSources": {
          "ODATA_NAME": {
            "uri": "/sap//ODATA_NAME/",
            "type": "OData",
            "settings": {
              "odataVersion": "2.0",
              "localUri": "localService/ODATA_NAME_metadata.xml"
            }
          }
        }

      Could also please reformat your code in order to let other user read it properly?

       

      Cheers, Emanuele.

      (0) 
  2. Michael Paonam

    Hi @Emanuele,

    I followed your article and I gave an entry in the datasources with an alias name “airline_data_alias” as follows –

    	"dataSources": {
    			"mainService": {
    				"uri": "../destinations/Planner/Aviation/aviationservices.xsodata/",
    				"type": "OData",
    				"settings": {
    					"odataVersion": "2.0",
    					"localUri": "localService/metadata.xml",
    					"annotations": [
    						"annotation0"
    					]
    				}
    			},
    			"annotation0": {
    				"type": "ODataAnnotation",
    				"uri": "annotation0.xml",
    				"settings": {
    					"localUri": "annotation0.xml"
    				}
    			},
    			"airine_data_alias": {
    				"uri": "model/airlineData.json",
    				"type": "JSON"
    		}

    and gave a model definition as well –

    	"models" : {
                         "airline_data": {
    				"type": "sap.ui.model.json.JSONModel",
    				"dataSource": "airline_data_alias"
    			}
                         }
    

    But for some reason,  I am not able to use the JSONModel when I use the alias inside the Controller –

    onInit: function(){}
    
        var localModel = new JSONModel("airline_data_alias");
        localModel.attachRequestCompleted(function(){
        	console.log(localModel.getData());
              });
    		  
    	     }	

    I tried using –

    var localModel = new sap.ui.model.json.JSONModel(“airline_data”);

     

    It still didn’t work.

     

    It worked only when I gave the url to the JSON file –

    var localModel = new sap.ui.model.json.JSONModel(“model/airlineData.json”);

     

    Is there a way to avoid the usage of url ?

     

    Regards,

    Michael Paonam

    (1) 
  3. Emanuele Ricci Post author

    I’ve not tested your code yet but I can see a typo inside your “dataSources” definition.

    You typed  airine_data_alias instead of airline_data_alias. You’re missing an l 😉

    (0) 
    1. Emanuele Ricci Post author

      Hi Vishnu as far as I can see it is possible to do that.

      This is the documentation about manifest.json (really poor). Take a look at the “models” section. You have to use the settings attribute that will pass all the object configuration to the ODataModel constructor.

      I’ve not personally tested it but you can go with something like this:

       

      "your_model_name": {
      	"type": "sap.ui.model.odata.ODataModel",
      	"dataSource": "your_manifest_datasource",
      	"settings": {
      		"defaultBindingMode": "TwoWay"
      	}
      },
      (0) 
      1. Vishnu Kant Raman

        Hi Ricci, Thank you for the reply. I have tried this but this is not setting up the model. By default, I could see the model is TwoWay in debugger. In manifest, i want to set it to OneWay, but not happening. Any other leads?

        (0) 
  4. Michael Smith

    Emanuele,

    Great post.  Thank you for sharing.  I do have a question though: What if I want to temporarily provide the app server (protocol, hostname, port) for the odata service while testing on my local machine?  Is there a simple way to do that (other than hard-coding it with the uri in the manifest.json, then removing later before I deploy to the server)?

    Thanks,

    Michael Smith

    (0) 
  5. garreth kelly

    At what point does the model become available ,

    i downloaded the sample shop administration app from :

    https://openui5nightly.hana.ondemand.com/#/demoapps

    Sample app is:

    https://openui5nightly.hana.ondemand.com/test-resources/sap/tnt/demokit/toolpageapp/webapp/index.html

     

    in the App.controller.js i tried the following in the init() function

    var oBundle = this.getModel(“i18n”).getResourceBundle();

    However in the console it returns :

    Cannot read property ‘getResourceBundle’ of undefined

    Manifest does have :

    "models": { "models": {  "i18n": { "type": "sap.ui.model.resource.ResourceModel", "settings": {  "bundleName": "sap.ui.demo.toolpageapp.i18n.i18n" }  }

     

    and Component.js has

    metadata: { metadata: { manifest: "json" }

    kind regards,

    Garreth.

    (0) 
    1. Emanuele Ricci Post author

      Hi Garreth,

       

      as far as I can see Component and Controllers are loaded async and in parallel.

      This means that it could happen that in the onInit of the main controller all models loaded from the manifest could still be undefined/null.

      In the other hands, if your data binding is still done in the xml you should not have any problem because those bindings are refreshed when the data model is updated.

      (0) 
  6. NARENDER SINGH

    Hi Emanuele Ric,

    I am getting a 404(Not Found) error. i followed the below steps.

     

    1. changes in Manifest.json file
      1. defined a model under models section

     

    "models": {
    			"i18n": {
    				"type": "sap.ui.model.resource.ResourceModel",
    				"settings": {
    					"bundleName": "test.i18n.i18n"
    				}
    			},
    			"image": {
    				"type": "sap.ui.model.json.JSONModel",
    				"dataSource": "image"
    			},
    			"personData":{
    				"type": "sap.ui.model.json.JSONModel",
    				"dataSource": "personData_alias"
    			}	
    		},

     

    2. defined the datasource under dataSources section

    "personData_alias":{
    				"uri": "model/personData.json",
    				"type": "JSON"
    			}

     

    3. created a new json file in model folder with name “personData.json”

    4. tried to access the model using

    var oPersonDataModel = new JSONModel("personData_alis");
    var name = oPersonDataModel .getProperty("name");

    i dont get any error (like undefined) in accessing oPersonDataModel variable but i can not see any property that i have defined in personData.json file. The console shows error 404 (Not Found) for personData_alis.

    Could you please help

    (0) 

Leave a Reply