[SAPUI5] Load local JSON model directly from the manifest.json

#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?