namespace sap/ui/core/ComponentSupport

Visiblity: public
Available since: N/A
Module: sap/ui/core/ComponentSupport
Application Component:

The module sap/ui/core/ComponentSupport provides functionality which is used to find declared Components in the HTML page and to create the Component instances which will be put into a sap.ui.core.ComponentContainer.

The module:sap/ui/core/ComponentSupport.run function is called automatically once the module has been required. This allows declarative support for components.

Usage

To enable the sap/ui/core/ComponentSupport include it as the oninit module in the bootstrap:

<script id="sap-ui-bootstrap"
    src="/resources/sap-ui-core.js"
    ...
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    ...>
</script>

To load and render components inside the HTML page, a special data attribute has to be specified on the respective DOM elements: data-sap-ui-component. All DOM elements marked with this data attribute will be regarded as container elements for the created ComponentContainer instances.

<body id="content" class="sapUiBody sapUiSizeCompact">
    ...
    <div data-sap-ui-component
        data-id="container"
        data-name="sap.ui.core.samples.formatting"
        ...
        data-handle-validation="true"
        ...>
    </div>
    ...
</body>

Configuration

All configuration settings for the ComponentContainer have to be defined as data attributes on the respective HTML tags. Each data attribute will be interpreted as a setting and parsed considering the data type of the matching property in the ComponentContainer.

As HTML is case-insensitive, in order to define a property with upper-case characters, you have to "escape" them with a dash character, similar to CSS attributes. The following code gives an example:

<div data-sap-ui-component ... data-handle-validation="true" ...></div>

Beware:

The ComponentSupport module enforces asynchronous loading of the respective component and its library dependencies. This is done by applying default settings for the following properties of the ComponentContainer:

See Declarative API for Initial Components.


Nodes Overview

Node Description

Methods Overview

Method Description
module:sap/ui/core/ComponentSupport.run

Find all DOM elements with the attribute data-sap-ui-component and parse the attributes from these DOM elements for the settings of the ComponentContainer which will be placed into these DOM elements.

This function is called automatically once the module has been required.

module:sap/ui/core/ComponentSupport.run

Find all DOM elements with the attribute data-sap-ui-component and parse the attributes from these DOM elements for the settings of the ComponentContainer which will be placed into these DOM elements.

This function is called automatically once the module has been required.

Param Type DefaultValue Description