SAPUI5 Controllers

Hello readers,

In this post, I am going to write on the well known concept of SAPUI5 controllers. As you know, SAPUI5 follows the MVC (Model, View and Controller) architecture. In this architecture, the controller is responsible for responding to the user input and perform interactions on the view as well as the back end data. The controller can receive the input, then validate the input and then perform the business operation that modifies the state of the data model.

Every view has its own controller although it is not mandatory for an view to have an controller. Usually a controller has the same name as the view except in the case of base controller.

The controller in SAPUI5 is always in the JavaScript format, with the “.controller.js” extension. The controller primarily consists of functions that are call from the views whenever a event occurs.

Types of controllers in SAPUI5 :

In SAPUI5, controllers can be defined in two ways :

• Using Asynchronous Module Definition (AMD) Structure :

sap.ui.define([
         "sap/ui/core/mvc/Controller",
         "sap/ui/core/EventBus",
         "sap/ui/model/json/JSONModel"
               ],function(Controller,EventBus,JSONModel){
	              "use strict";
	  return Controller.extend("sap.ui.myApp.controller.App",{
		  
		  
			onInit:function(){
				
			},
		  
	  });
		  
});

• Not using the AMD Structure :

sap.ui.controller("sap.ui.myApp.controller.one", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf example_two.one
*/
	onInit: function() {

	},

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf example_two.one
*/
	onBeforeRendering: function() {
		 
	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf example_two.one
*/
	onAfterRendering: function() {
		
	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf example_two.one
*/
	onExit: function() {

	}

	
});

The AMD structure is more preferred as we can add dependencies as well as extend other components such as base controller using the AMD structure.

Controller Life-Cycle in SAPUI5 :

The lifecycle of a Controller is mainly determined by the foll. methods (also known as the hook methods):

• init: The controller is born! It is called when a view is instantiated and its controls Function is called by the framework during constructor execution. All the initialization stuff here.It is used to modify the view before it is displayed to bind event handlers .
• onBeforeRendering: Called by the framework before the rendering of the control is started. Triggers before every (re)rendering.
• onAfterRendering: Called by the framework after the rendering of the control has completed. Triggers after every (re)rendering.
• exit: Called before destroying the view. Cleans up the instances before destruction. Called by the framework. It frees the resources and finalizes activities.

Base Controller :

The base controller is a controller which contains some reusable methods, in the sub-controllers. All the other controllers in the project can extend the base to access the base controller’s functions and use them inside the program.  A base controller usually looks like :

sap.ui.define([
		"sap/ui/core/mvc/Controller"
	], function (Controller) {
		"use strict";

		return Controller.extend("sap.ui.myApp..controller.BaseController", {
			/**
			 * Convenience method for accessing the router.
			 * @public
			 * @returns {sap.ui.core.routing.Router} the router for this component
			 */
			getRouter : function () {
				return sap.ui.core.UIComponent.getRouterFor(this);
			},

			/**
			 * Convenience method for getting the view model by name.
			 * @public
			 * @param {string} [sName] the model name
			 * @returns {sap.ui.model.Model} the model instance
			 */
			getModel : function (sName) {
				return this.getView().getModel(sName);
			},

			/**
			 * Convenience method for setting the view model.
			 * @public
			 * @param {sap.ui.model.Model} oModel the model instance
			 * @param {string} sName the model name
			 * @returns {sap.ui.mvc.View} the view instance
			 */
			setModel : function (oModel, sName) {
				return this.getView().setModel(oModel, sName);
			},

			/**
			 * Getter for the resource bundle.
			 * @public
			 * @returns {sap.ui.model.resource.ResourceModel} the resourceModel of the component
			 */
			getResourceBundle : function () {
				return this.getOwnerComponent().getModel("i18n").getResourceBundle();
			},

			/**
			 * Event handler when the share by E-Mail button has been clicked
			 * @public
			 */
			onShareEmailPress : function () {
				var oViewModel = (this.getModel("objectView") || this.getModel("worklistView"));
				sap.m.URLHelper.triggerEmail(
					null,
					oViewModel.getProperty("/shareSendEmailSubject"),
					oViewModel.getProperty("/shareSendEmailMessage")
				);
			}

		});

	}
);

Extending the base controller within another controller :

sap.ui.define([
	"wave/reports/controller/BaseController"
], function(BaseController) {
	"use strict";

	return BaseController.extend("sap.ui.myApp.controller.contRoller", {
                          //Your controller code
	});
});

Thank you,

Regards,

Arjun Biswas