UI5: accessing DOM ref of a view after rendering during each navigation

Question

I have two UI5 XML views and the navigation has been implemented between both the views. Whenever I visit the second view, I manipulate the HTML DOM (using jQuery and CSS) to do some look and feel related changes which is not readily available in UI5 by default.

My issue is: When I wrote jQuery code to manipulate DOM in (route)patternMatched handler of second view, it is not working as DOM does not exist at that point. When I put the jQuery code in onAfterRendering() of second view, it gets executed only during first visit so not giving the desired result during 2nd visit onwards.

Can you tell me how to get rid of this issue or what design change I should make here?

Also, do we have any setting in UI5 by which onAfterRendering() will be called every time when I navigate to a view?

Answer 1

You can use the onBeforeShow method to do the manipulations required by you.

The onBeforeShow will be called every time the view is about to be shown to the screen.

But first you have to attach the event to the view in onInit. Code:

onInit : function () {
    this.getView().addEventDelegate({
        onBeforeShow : jQuery.proxy(function(evt) {
            this.onBeforeShow(evt);
        }, this)
    });
},

onBeforeShow: function() {

    console.log('called from on Before show');
    // DO manipulation here
}

If, you still don't find the DOM elements in this event handler, remember onBeforeShow has a sister: onAfterShow which will be called after the view is shown on screen.

API Link :NavContainerChild