SAPUI5-Which method to call once a view is displayed everytime?

Question

I want to do some logic before a view is displayed every time.I cannot go with before rendering method since it is called only once when the view is created and shown for the first-time.Pls help.Any ideas?

Answer 1

Why do you think the before rendering method of a control is called only once? Do you have any sample code?

I've created a quick a dirty example on jsbin (http://jsbin.com/qikokayo/1/edit?html,output) for you to have a look at. It clearly shows that onInit is called once but onBeforeRendering is called every time...

Also see this snippet from the OpenUI5 SDK which explains:

Lifecycle Hooks

onInit() - Called when a View is instantiated and its 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.

onExit() - Called when the View is destroyed. Use this one to free resources and finalize activities.

onAfterRendering() - Called when the View has been rendered (therefore its HTML is part of the document). Post-rendering manipulations of the HTML can be done here. This hook is the same one that SAPUI5 controls get after being rendered.

onBeforeRendering() - Is invoked before the Controller's View is re-rendered. You would use onInit() in the case that the hook shall be invoked only before the first rendering.

For Controllers without a View, no lifecycle hooks will be called.

Answer 2

For a modern SAPUI5 fiori-style application involving a Component and associated routing you could always attach a method to your view that would be called whenever there is a match with the supplied route pattern for that view. This route was historically supplied in the metadata of the Component class but since v1.30 it's declared in the manifest.json file.

In the onInit method of your view, you can do:

onInit: function() {
    this._oRouter = this.getOwnerComponent().getRouter();
    this._oRouter.getRoute("yourRouteForThisView").attachPatternMatched(this._onObjectMatched, this);
}

So you have the _onObjectMatched method that would be called every time you are on the view. Here you could place all your code here that should execute before your view is rendered.

_onObjectMatched: function(oEvent) {
    var oArgs = oEvent.getParameter("arguments");
    //If any values were passed in the URL then those will be available in oArgs
    //Do other stuff here
}

You can also use this for your landing page. The first view usually has an empty string "" as its route pattern in the manifest.

Answer 3

Another pattern is as below (with thanks to Matbtt)

onInit : function () {

    //...other code

    var router = this.getOwnerComponent().getRouter();
    var target = router.getTarget("<your route target name>");
    target.attachDisplay(this.onDisplay, this);
},

/** Fires evey time view is displayed.
 *
 * @param oEvent
 */
onDisplay: function(oEvent) {

    console.log('refreshData')
    this._refreshData()
},      

The onDisplay function is fired each time the view is displayed. In my own small experience the on-render events get fired more frequently than one would initially assume.

Answer 4

I have fixed the issue with onBeforeShow.Thanks jason for your efforts.