Calling events on SAPUI5 Controls

1
votes

I am developing an SAPUI5 application that contains user configurations and user capability to move the screen around. i.e. Let's assume that the screen is a Dynamic Side Content Layout sap.ui.layout.DynamicSideContent with an option with the user to either place it on the left or right. The user also has an option to close/open the side content based on their usage.

To facilitate this, there is a button (see snapshots below) which gives the user a pullout kind of feeling on the screen. The button has absolute position so its width is calculated based on the browser window and the side content's size and position.To calculate the first time the screen is rendered, I have used `window.load event.

enter image description here enter image description here But it does not behave properly in all scenarios. How can I trigger renderComplete event on the layout(for that matter, on any sap.ui.core.Control). I have tried using the following code but none of the events were triggered.

controlName.addEventDelegate({
                onBeforeShow: function() {
                    console.log("on Before Show");
                },
                onAfterShow: function() {
                    console.log("on After Show")
                }
            })

I can't use onAfterRendering of the view since it is called before the Page is loaded with all dependent resources and the $.load() function does not work as well.

What could be the best approach for a scenario like this?

Thanks in Advance

Edit: Adding my Code.

onAfterRendering: function(){
        var dynamicContainer= this.getView().byId("idKPIWORDynamicSideContent");
            dynamicContainer.addDelegate({
                onAfterRendering: function(){
                    alert("After Rendering");
                }   
            });
}
2
sapui5

2 Answers

2
votes

You can use Control's onAfterRendering method as below:

For e.g. sap.m.ComboBox control, 

oComboBox.onAfterRendering = function(){
    if (sap.m.ComboBox.prototype.onAfterRendering){
        sap.m.ComboBox.prototype.onAfterRendering.apply(this);
    }
    // your stuff
}
1
votes

I had a case which might be similar from the technical point of view. I had to color table cells after the data binding based on the value of the cell. This solved my issue. Here "this" is controller. So I would suggest to put the following code in onAfterRendering() of your controller.

control.addDelegate({
    onAfterRendering: $.proxy(this.functionToExecute, control)
});