UI5: Check if a control is currently rendered and visible

Question

In a SAPUI5 application I would like to update the content of a control (e. g. a tile) only when this is currently visible to the user. I created a function like this:

Answer 1

You can utilize jQuery do achieve that.

// determine whether your control is still part of the active DOM
jQuery.contains(document, yourControl.$());

// determine whether your control is visible (in terms of CSS)
yourControl.$().is(':visible');

// combined
MyControl.prototype.isVisible = function() {
  return this.$().length && // has rendered at all
    jQuery.contains(document, this.$()) && // is part of active DOM
    this.$().is(':visible'); // is visible
};

Elements could still be invisible to the user by being:

• out of the viewport
• visibility: hidden
• opacity: 0
• ...

Also check this answer

BR Chris

http://api.jquery.com/jQuery.contains/

http://api.jquery.com/visible-selector/