class sap.ui.core.HTML

Control sample: sap.ui.core.HTML
Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/core/HTML
Application Component: CA-UI5-COR

Embeds standard HTML in an SAPUI5 control tree.

Security Hint: By default, the HTML content (property 'content') is not sanitized and therefore open to XSS attacks. Applications that want to show user defined input in an HTML control, should either sanitize the content on their own or activate automatic sanitizing through the sanitizeContent property.

Although this control inherits the tooltip aggregation/property and the hasStyleClass, addStyleClass, removeStyleClass and toggleStyleClass methods from its base class, it doesn't support them. Instead, the defined HTML content can contain a tooltip (title attribute) or custom CSS classes.

For further hints about usage restrictions for this control, see also the documentation of the content property.


Constructor

Constructor for a new HTML.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.ui.core.HTML(sId?, mSettings?)
Param Type Default Value Description
sId? string

id for the new control, generated automatically if no id is given

mSettings? object

initial settings for the new control


Properties

Name Type Default Value Description
content string

HTML content to be displayed, defined as a string.

The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well.

Some of these restrictions (there might be others!) are:

  • the content must be enclosed in tags, pure text is not supported.
  • if the content contains script tags, they will be executed but they will not appear in the resulting DOM tree. When the contained code tries to find the corresponding script tag, it will fail.

Please consider to consult the jQuery documentation as well.

The HTML control currently doesn't prevent the usage of multiple root nodes in its DOM content (e.g. setContent("<div></div><div></div>")), but this is not a guaranteed feature. The accepted content might be restricted to single root nodes in future versions. To notify applications about this fact, a warning is written in the log when multiple root nodes are used.

When changing the content dynamically, ensure that the ID of the root node remains the same as the HTML control's ID. Otherwise it cannot be guaranteed that certain lifecycle events take place.

Visibility: public
preferDOM boolean true

Whether existing DOM content is preferred over the given content string.

There are two scenarios where this flag is relevant (when set to true):

  • for the initial rendering: when an HTML control is added to a UIArea for the first time and if the root node of that UIArea contained DOM content with the same id as the HTML control, then that content will be used for rendering instead of any specified string content
  • any follow-up rendering: when an HTML control is rendered for the second or any later time and the preferDOM flag is set, then the DOM from the first rendering is preserved and not replaced by the string content

As preserving the existing DOM is the most common use case of the HTML control, the default value is true.

Visibility: public
sanitizeContent boolean false

Whether to run the HTML sanitizer once the content (HTML markup) is applied or not.

To configure the set of allowed URLs, you can use the URLListValidator API.

Visibility: public
visible boolean true

Specifies whether the control is visible. Invisible controls are not rendered.

Visibility: public

Borrowed Properties

Name Type Default Value Description
blocked boolean false

Whether the control is currently in blocked state.

Visibility: public
busy boolean false

Whether the control is currently in busy state.

Visibility: public
busyIndicatorDelay int 1000

The delay in milliseconds, after which the busy indicator will show up for this control.

Visibility: public
busyIndicatorSize sap.ui.core.BusyIndicatorSize Medium

The size of the BusyIndicator. For controls with a width smaller 3rem a sap.ui.core.BusyIndicatorSize.Small should be used. If the size could vary in width and the width could get smaller than 3rem, the sap.ui.core.BusyIndicatorSize.Auto option could be used. The default is set to sap.ui.core.BusyIndicatorSize.Medium For a full screen BusyIndicator use sap.ui.core.BusyIndicatorSize.Large.

Since: 1.54.

Visibility: public
fieldGroupIds string[]

The IDs of a logical field group that this control belongs to.

All fields in a logical field group should share the same fieldGroupId. Once a logical field group is left, the validateFieldGroup event is fired.

For backward compatibility with older releases, field group IDs are syntactically not limited, but it is suggested to use only valid sap.ui.core.IDs.

See #attachValidateFieldGroup or consult the Field Group documentation.

Since: 1.31.

Visibility: public
visible boolean true

Whether the control should be visible on the screen.

If set to false, a placeholder will be rendered to mark the location of the invisible control in the DOM of the current page. The placeholder will be hidden and have zero dimensions (display: none).

Also see InvisibleRenderer.

Visibility: public

Borrowed Aggregations

Name Cardinality Type Description
customData 0..n sap.ui.core.CustomData

Custom Data, a data structure like a map containing arbitrary key value pairs.

dependents 0..n sap.ui.core.Element

Dependents are not rendered, but their databinding context and lifecycle are bound to the aggregating Element.

Since: 1.19.

dragDropConfig 0..n sap.ui.core.dnd.DragDropBase

Defines the drag-and-drop configuration. Note: This configuration might be ignored due to control metadata restrictions.

Since: 1.56.

layoutData 0..1 sap.ui.core.LayoutData

Defines the layout constraints for this control when it is used inside a Layout. LayoutData classes are typed classes and must match the embedding Layout. See VariantLayoutData for aggregating multiple alternative LayoutData instances to a single Element.

tooltip 0..1 sap.ui.core.TooltipBase

The tooltip that should be shown for this Element.

In the most simple case, a tooltip is a string that will be rendered by the control and displayed by the browser when the mouse pointer hovers over the control's DOM. In this variant, tooltip behaves like a simple control property.

Controls need to explicitly support this kind of tooltip as they have to render it, but most controls do. Exceptions will be documented for the corresponding controls (e.g. sap.ui.core.HTML does not support tooltips).

Alternatively, tooltip can act like a 0..1 aggregation and can be set to a tooltip control (an instance of a subclass of sap.ui.core.TooltipBase). In that case, the framework will take care of rendering the tooltip control in a popup-like manner. Such a tooltip control can display arbitrary content, not only a string.

UI5 currently does not provide a recommended implementation of TooltipBase as the use of content-rich tooltips is discouraged by the Fiori Design Guidelines. Existing subclasses of TooltipBase therefore have been deprecated. However, apps can still subclass from TooltipBase and create their own implementation when needed (potentially taking the deprecated implementations as a starting point).

See the section Using Tooltips in the Fiori Design Guideline.


Events Overview

Event Description
afterRendering

Fired after the HTML control has been rendered. Allows to manipulate the resulting DOM.

When the control doesn't have string content and no preserved DOM existed for this control, then this event will fire, but there won't be a DOM node for this control.

afterRendering

Fired after the HTML control has been rendered. Allows to manipulate the resulting DOM.

When the control doesn't have string content and no preserved DOM existed for this control, then this event will fire, but there won't be a DOM node for this control.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
isPreservedDOM boolean

Whether the current DOM of the control has been preserved (true) or not (e.g. rendered from content property or it is an empty HTML control).


Methods Overview

Method Description
attachAfterRendering

Attaches event handler fnFunction to the afterRendering event of this sap.ui.core.HTML.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.core.HTML itself.

Fired after the HTML control has been rendered. Allows to manipulate the resulting DOM.

When the control doesn't have string content and no preserved DOM existed for this control, then this event will fire, but there won't be a DOM node for this control.

detachAfterRendering

Detaches event handler fnFunction from the afterRendering event of this sap.ui.core.HTML.

The passed function and listener object must match the ones used for event registration.

sap.ui.core.HTML.extend

Creates a new subclass of class sap.ui.core.HTML with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

fireAfterRendering

Fires event afterRendering to attached listeners.

getContent

Gets current value of property content.

HTML content to be displayed, defined as a string.

The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well.

Some of these restrictions (there might be others!) are:

  • the content must be enclosed in tags, pure text is not supported.
  • if the content contains script tags, they will be executed but they will not appear in the resulting DOM tree. When the contained code tries to find the corresponding script tag, it will fail.

Please consider to consult the jQuery documentation as well.

The HTML control currently doesn't prevent the usage of multiple root nodes in its DOM content (e.g. setContent("<div></div><div></div>")), but this is not a guaranteed feature. The accepted content might be restricted to single root nodes in future versions. To notify applications about this fact, a warning is written in the log when multiple root nodes are used.

When changing the content dynamically, ensure that the ID of the root node remains the same as the HTML control's ID. Otherwise it cannot be guaranteed that certain lifecycle events take place.

getDomRef
sap.ui.core.HTML.getMetadata

Returns a metadata object for class sap.ui.core.HTML.

getPreferDOM

Gets current value of property preferDOM.

Whether existing DOM content is preferred over the given content string.

There are two scenarios where this flag is relevant (when set to true):

  • for the initial rendering: when an HTML control is added to a UIArea for the first time and if the root node of that UIArea contained DOM content with the same id as the HTML control, then that content will be used for rendering instead of any specified string content
  • any follow-up rendering: when an HTML control is rendered for the second or any later time and the preferDOM flag is set, then the DOM from the first rendering is preserved and not replaced by the string content

As preserving the existing DOM is the most common use case of the HTML control, the default value is true.

Default value is true.

getSanitizeContent

Gets current value of property sanitizeContent.

Whether to run the HTML sanitizer once the content (HTML markup) is applied or not.

To configure the set of allowed URLs, you can use the URLListValidator API.

Default value is false.

getVisible

Gets current value of property visible.

Specifies whether the control is visible. Invisible controls are not rendered.

Default value is true.

setContent

Sets a new value for property content.

HTML content to be displayed, defined as a string.

The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well.

Some of these restrictions (there might be others!) are:

  • the content must be enclosed in tags, pure text is not supported.
  • if the content contains script tags, they will be executed but they will not appear in the resulting DOM tree. When the contained code tries to find the corresponding script tag, it will fail.

Please consider to consult the jQuery documentation as well.

The HTML control currently doesn't prevent the usage of multiple root nodes in its DOM content (e.g. setContent("<div></div><div></div>")), but this is not a guaranteed feature. The accepted content might be restricted to single root nodes in future versions. To notify applications about this fact, a warning is written in the log when multiple root nodes are used.

When changing the content dynamically, ensure that the ID of the root node remains the same as the HTML control's ID. Otherwise it cannot be guaranteed that certain lifecycle events take place.

When called with a value of null or undefined, the default value of the property will be restored.

setDOMContent

Sets some new DOM content for this HTML control. The content will replace the existing content after the next rendering. Properties are not modified, but preferDOM should be set to true.

setPreferDOM

Sets a new value for property preferDOM.

Whether existing DOM content is preferred over the given content string.

There are two scenarios where this flag is relevant (when set to true):

  • for the initial rendering: when an HTML control is added to a UIArea for the first time and if the root node of that UIArea contained DOM content with the same id as the HTML control, then that content will be used for rendering instead of any specified string content
  • any follow-up rendering: when an HTML control is rendered for the second or any later time and the preferDOM flag is set, then the DOM from the first rendering is preserved and not replaced by the string content

As preserving the existing DOM is the most common use case of the HTML control, the default value is true.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setSanitizeContent

Sets a new value for property sanitizeContent.

Whether to run the HTML sanitizer once the content (HTML markup) is applied or not.

To configure the set of allowed URLs, you can use the URLListValidator API.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

setVisible

Sets a new value for property visible.

Specifies whether the control is visible. Invisible controls are not rendered.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

attachAfterRendering

Attaches event handler fnFunction to the afterRendering event of this sap.ui.core.HTML.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.core.HTML itself.

Fired after the HTML control has been rendered. Allows to manipulate the resulting DOM.

When the control doesn't have string content and no preserved DOM existed for this control, then this event will fire, but there won't be a DOM node for this control.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.core.HTML itself

detachAfterRendering

Detaches event handler fnFunction from the afterRendering event of this sap.ui.core.HTML.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.ui.core.HTML.extend

Creates a new subclass of class sap.ui.core.HTML with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireAfterRendering

Fires event afterRendering to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

isPreservedDOM boolean

Whether the current DOM of the control has been preserved (true) or not (e.g. rendered from content property or it is an empty HTML control).

getContent

Gets current value of property content.

HTML content to be displayed, defined as a string.

The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well.

Some of these restrictions (there might be others!) are:

Please consider to consult the jQuery documentation as well.

The HTML control currently doesn't prevent the usage of multiple root nodes in its DOM content (e.g. setContent("<div></div><div></div>")), but this is not a guaranteed feature. The accepted content might be restricted to single root nodes in future versions. To notify applications about this fact, a warning is written in the log when multiple root nodes are used.

When changing the content dynamically, ensure that the ID of the root node remains the same as the HTML control's ID. Otherwise it cannot be guaranteed that certain lifecycle events take place.

getDomRef

Param Type DefaultValue Description
sSuffix string ''

Suffix of the Element to be retrieved or empty

sap.ui.core.HTML.getMetadata

Returns a metadata object for class sap.ui.core.HTML.

getPreferDOM

Gets current value of property preferDOM.

Whether existing DOM content is preferred over the given content string.

There are two scenarios where this flag is relevant (when set to true):

As preserving the existing DOM is the most common use case of the HTML control, the default value is true.

Default value is true.

getSanitizeContent

Gets current value of property sanitizeContent.

Whether to run the HTML sanitizer once the content (HTML markup) is applied or not.

To configure the set of allowed URLs, you can use the URLListValidator API.

Default value is false.

getVisible

Gets current value of property visible.

Specifies whether the control is visible. Invisible controls are not rendered.

Default value is true.

setContent

Sets a new value for property content.

HTML content to be displayed, defined as a string.

The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well.

Some of these restrictions (there might be others!) are:

Please consider to consult the jQuery documentation as well.

The HTML control currently doesn't prevent the usage of multiple root nodes in its DOM content (e.g. setContent("<div></div><div></div>")), but this is not a guaranteed feature. The accepted content might be restricted to single root nodes in future versions. To notify applications about this fact, a warning is written in the log when multiple root nodes are used.

When changing the content dynamically, ensure that the ID of the root node remains the same as the HTML control's ID. Otherwise it cannot be guaranteed that certain lifecycle events take place.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sContent string

New value for property content

setDOMContent

Sets some new DOM content for this HTML control. The content will replace the existing content after the next rendering. Properties are not modified, but preferDOM should be set to true.

Param Type DefaultValue Description
oDom Element

the new DOM content

setPreferDOM

Sets a new value for property preferDOM.

Whether existing DOM content is preferred over the given content string.

There are two scenarios where this flag is relevant (when set to true):

As preserving the existing DOM is the most common use case of the HTML control, the default value is true.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bPreferDOM boolean true

New value for property preferDOM

setSanitizeContent

Sets a new value for property sanitizeContent.

Whether to run the HTML sanitizer once the content (HTML markup) is applied or not.

To configure the set of allowed URLs, you can use the URLListValidator API.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Param Type DefaultValue Description
bSanitizeContent boolean false

New value for property sanitizeContent

setVisible

Sets a new value for property visible.

Specifies whether the control is visible. Invisible controls are not rendered.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bVisible boolean true

New value for property visible