0

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?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
SAP Learner
  • 61
  • 4
  • 17
  • 1
    Does this answer your question? ["onBeforeRendering" or "onAfterRendering" is not called every time the view is opened](https://stackoverflow.com/questions/55082731/onbeforerendering-or-onafterrendering-is-not-called-every-time-the-view-is-o) – Boghyon Hoffmann Dec 21 '20 at 00:31
  • > _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._ ... I can't reproduce it. Here you can see that it's accessible there: https://embed.plnkr.co/wp6yes?show=controller/Next.controller.js,preview. For other solutions, see the linked [answer](https://stackoverflow.com/a/55099341/5846045) in my previous comment. – Boghyon Hoffmann Dec 21 '20 at 00:49

1 Answers1

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

Rahul Bhardwaj
  • 2,303
  • 1
  • 17
  • 28
  • Hi Rahul, Thanks for your input. Your solution did the job for me. It worked fine with onAfterShow() :) I am wondering why this information is not present in sapui5 documentation.. Or is it such that I missed it!!?? Also, can you please differentiate between onAfterRendering() and onAfterShow()? – SAP Learner Aug 11 '17 at 09:31