Cannot programmatically add content to simple HTML DIV Element in XML view

Question

I have a simple XML view (fragment) like this:

<html:div id="holder"></html:div>

I want to add content programmatically like this:

var holder = this.byId("holder");
var label = new sap.m.Label({
    text: "Label"
});

holder.addContent(label);

Effect is nothing, no error, no added content. Why does it not work?

Answer 1

This is because content is not an aggregation (an easy mistake to make, since content usually is an aggregation).

sap.ui.core.HTML's content metadata object is a property of type string. From the jsdoc:

HTML content to be displayed, defined as a string.

You will need to use a different container for your label, such as sap.ui.layout.VerticalLayout, or you could just use raw HTML to stick in your holder object, rather than that sap.m.Label type.

Here is a jsbin that takes the XML view part of this question out of the equation.

Note: See @hirse's comment below for an important distinction when using html:div in XML views

Answer 2

The HTML element and the UI5 Controls are not directly compatible. UI5 Controls are JavaScript objects that have a render function. The render function creates a html fragment on demand. That html fragment ist then inserted into the page.

I have never tried it, but a solution could be to use the placeAt() method of your label:

label.placeAt("holder");

If you are using an XML View, the holder id will be prefixed. Then you should use something like this:

label.placeAt(this.getView().createId("holder"));

Answer 3

You can get DOM element of UI5 control by using getDomRef of sap.ui.core.Element class.

Then add your content to this DOM element by using placeAt()

Here is working example.