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.

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

Leave a Reply