SAPUI5. Which method to call as soon as the view is displayed every time?

Question

I want to do some logic before the view is displayed every time. I can’t go up to the rendering method, as it is called only once when the view is created and displayed for the first time. Help on files. Any ideas?

Answer 1

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

I quickly created a dirty jsbin example ( http://jsbin.com/qikokayo/1/edit?html,output ) so you can take a look at it. This clearly shows that onInit is called once, but onBeforeRendering is called every time ...

Also see this snippet from the OpenUI5 SDK that explains:

Lifecycle Hooks

onInit() - Called when an instance of View is created and its controls (if available) are already created. Can be used to change the view before being displayed to bind event handlers and perform other one-time initializations.

onExit() - Called when the view is destroyed. Use this to free resources and complete activities.

onAfterRendering() - Called when the view has been rendered (so its HTML is part of the document). Post-rendering of HTML manipulation can be done here. This hook is the same as that controlled by SAPUI5 get after rendering.

onBeforeRendering() - called before being re-rendered. You should use onInit () in case the hook should only be called before the first rendering.

For controllers without View, lifecycle traps will not be called.

Answer 2

For a modern fiori-style application in SAPUI5 involving Component and related routing you can always attach a method to your view, which will be called whenever there is a match with the provided route pattern for this view. This route was historically represented in the metadata of the Component class, but since v1.30 it is 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, which will be called every time you are in sight. Here you can place all of your code here, which must be executed before your view is displayed.

 _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 a route pattern in manifest .

Answer 3

Another template is as follows (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 runs every time a view is displayed. In my own little experience, on-render events are fired more often than originally intended.

Answer 4

I fixed the problem using onBeforeShow . Thank you for your efforts. Jason

Answer 5

I can give you an answer, but only related to the old approach to navigation in UI5. But maybe you used this as a starting point and had the same problem as me.

Here's a JSBin with a controller that handles navigation from the main to the detailed view → http://jsbin.com/xomuvi/2/edit

Here you can see the call:

 page.rerender(); 

It fires the onBeforeRendering and onAfterRendering events again.

But calling to for the first time raises events twice, take care of this.