F4 Helper JSON Model

Often there is data you only need to load once at runtime.
For example:

• Languages
• Countrys
• Titles
• Departments
• …
  For this data you often need formatters to convert the key to the value. In the following I will show you how I deal with these “F4 Key Value Datasets”.

model/TitleF4.js

The JSONModel is pretty simple. We have a method to load the data aswell as a method that converts keys to values.

sap.ui.define([
	"sap/ui/model/json/JSONModel"
], function (JSONModel) {
	return JSONModel.extend("XXX.model.TitleF4", {

		/**
		 * @class TitleF4
		 * @summary TitleF4 Help. Will be loaded once at runtime
		 * @extends sap.ui.model.json.JSONModel
		 * @example
		 * this.setModel( new TitleF4(this), "TitleF4");
		 */

		constructor: function (controller) {
			JSONModel.prototype.constructor.call(this, []);
			this._oParentController = controller || void 0;
			this._oServiceModel = this._oParentController.getModel();
			this.setData({
				"busy": true,
				"data": void 0
			});
		},
		/**
		 * @memberOf TitleF4
		 * @description Read F4Helps
		 */
		readTitleF4: function () {
			return new Promise(function (resolve, reject) {
				this._oServiceModel.read("/TitleF4Set", {
					success: function (data) {
						this.setProperty("/busy", false);
						this.setProperty("/data", data.results);
					}.bind(this),
					error: function (err) {
						this.setProperty("/busy", false);
					}
				})
			}.bind(this));
		},
		/** 
		 * @memberOf TitleF4
		 * @description Read TitleTxt By Key
		 * @param {string} sKey - Key of an Title
		 */
		getTitleByKey: function (sKey) {
			var aTitles = this.getProperty("/data");
			for (var i = 0; i < aTitles.length; i++) {
				if (aTitles[i].Title === sKey) {
					return aTitles[i].TitleMedi;
				}
			}
			return "";
		}

	});
});

model/models.js

The models.js file is a factory for creating models that are used by our application. So we add our new JSONModel here.

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/Device",
	"sap/base/util/ObjectPath",
	"XXX/model/TitleF4"
], function (JSONModel, Device, ObjectPath, TitleF4) {
	"use strict";

	return {
	
		createTitleF4Model: function (controller) {
			var oModel = new TitleF4(controller);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		}
		
	};
});

Component.js

In the Component.js we just have to instantiate the JSONModel via the models.js factory function and call the readTitleF4 function in the init function of the Component.js.

You could also instantiate the JSONModel or load the data somewhere else that’s up to you. I prefer instantiating such JSONModels in the Component.js so i can access these from everywhere in my application.

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"./model/models",
	"./controller/ErrorHandler"
], function (UIComponent, Device, models, ErrorHandler) {

	//set TitleF4 Model
			this.setModel(models.createTitleF4Model(this), "TitleF4");
			this.getModel("TitleF4").readTitleF4().then(function (data) {
					// Do Stuff ?!
			});

model/formatter.js

		getTitleByKey: function (sTitle) {
			if (!sTitle) {
				return "";
			}
			return this.getOwnerComponent().getModel("TitleF4").getTitleByKey(sTitle);
		}

So with that we can format keys to values.

	<QuickViewGroupElement label="Title" value="{ path: 'Title', formatter: '.formatter.getTitleByKey'}" type="text"/>

Conclusion

• Good Performance - We only load the data once at runtime.
• Clean Code - We seperate the coding via the JSONModel and don’t have it in our View-Controller.js or somewhere else.
• Reuse - We easily can reuse the coding in other applications by just copying the JSONModel and adjust the namespace.
• Easy Extensibility