How to Check If an UI5 Control Is Rendered?

Question

I am opening a popover on a specific control inside a FlexColumnLayout. Depending on the screensize it will not be rendered once the mid column is expanded.

I'd like to check if the cotrol is rendered before opening the popover, but i cant seem to find a property that allows that.

Already tried the solutions of this post: Check if a control is currently rendered and visible

If you want to test around in actuall code just use the demo App of the FlexColumnLayout and try to open a popup on one of the hidden buttons when the begin column is expanded.

Thanks for your help, Eric

Edit 27.08.18 (code in question):

Controller:

/**
* Listner. Triggered when help is canceled.
* Closes popover.
* @author WN00096217 (Eric Schuster)
* @memberof xxxxxxxxxxxx
* @function onHelpCancel
*/
onHelpCancel: function () {
    var iHelp = this._oHelpModel.getProperty("/counter");
    this._oHelpModel.setProperty("/counter", 0);
    this._oHelpModel.getProperty("/p" + iHelp).close();
},

/**
 * Listner. Triggered when help is continue.
 * Closes popover, opens next popover.
 * @author WN00096217 (Eric Schuster)
 * @memberof xxxxxxxxxxxxxxxxxxx
 * @function onHelpNext
 */
onHelpNext: function () {
    var iHelp = this._oHelpModel.getProperty("/counter");
    this._oHelpModel.setProperty("/counter", iHelp + 1);
    this._oHelpModel.getProperty("/p" + iHelp).close();
    this._oHelpModel.getProperty("/p" + (iHelp + 1)).openBy(this._oHelpModel.getProperty("/c" + (iHelp + 1)));
},

controller (part of innit):

this._oHelpModel.setProperty("/c0", this._oView.byId("xxxxx"));
this._oHelpModel.setProperty("/c1", this._oView.byId("xxxx"));
this._oHelpModel.setProperty("/c2", this._oView.byId("xxxxx"));
this._oHelpModel.setProperty("/c3", this._oView.byId("xxxxxx"));
this._oHelpModel.setProperty("/c4", this._oView.byId("xxxxxx"));
this._oHelpModel.setProperty("/c5", this._oView.byId("xxxxx"));
this._oHelpModel.setProperty("/c6", this._oView.byId("xxxxx"));
this._oHelpModel.setProperty("/c7", this._oView.byId("xxxxxx"));
this._oHelpModel.setProperty("/c8", this._oView.byId("xxxxx"));

Component (part of innit):

//p eq popover c eq controll
var oHelpModel = new JSONModel({
    counter: 0,
    p0: null,
    c0: null,
    p1: null,
    c1: null,
    p2: null,
    c2: null,
    p3: null,
    c3: null,
    p4: null,
    c4: null,
    p5: null,
    c5: null,
    p6: null,
    c6: null,
    p7: null,
    c7: null,
    p8: null,
    c8: null
});
this.setModel(oHelpModel, "helpModel");

What i d like the controler to look like:

/**
 * Listner. Triggered when help is continue.
 * Closes popover, opens next popover.
 * @author WN00096217 (Eric Schuster)
 * @memberof xxxxxxxxxxxxxxxxx
 * @function onHelpNext
 */
onHelpNext: function () {
    var iHelp = this._oHelpModel.getProperty("/counter");
    if("control is rendered"){
        this._oHelpModel.setProperty("/counter", iHelp + 1);
        this._oHelpModel.getProperty("/p" + iHelp).close();
        this._oHelpModel.getProperty("/p" + (iHelp + 1)).openBy(this._oHelpModel.getProperty("/c" + (iHelp + 1)));
    } else {
        this._oHelpModel.setProperty("/counter", iHelp + 1);
        this.onHelpNext();
        return;
    }
},

n01dea · Answer 1 · 2018-09-06T13:15:37.457

2

use the control's onAfterRendering event. in your corresponding view's controller:

var oControl = this.byId("yourControl");

oControl.addEventDelegate({
    onAfterRendering: function() {

        // your confirmation that the control is rendered

    }
}

UPDATE after op's clarification:

give the control an id if it doesn't have an id yet. get the control by its id. check if the control is active. in your corresponding view's controller:

var oControl = this.byId("yourControl");

oControl.isActive(); // true if the control is visible

edited Sep 06 '18 at 13:15

answered Aug 24 '18 at 11:16

n01dea

1,532
1
16
33

At the beginning (begin column expanded) the is ALWAYS rendered, but once u navigate to mid column expanded it may or may not be rendered! So the onAfterRendering will be called in ANY case, so it wouldnt be a confirmation if the controll is rendered at this very moment – Erch Aug 27 '18 at 05:19
Hi Erch, could you provide some code? Think would make things easier. – dotchuZ Aug 27 '18 at 06:22
@zYrEx code is now edited into the question, doubt it will help though – Erch Aug 27 '18 at 10:52

How to Check If an UI5 Control Is Rendered?

1 Answers1