CODEWITHSUNDEEP
sapui5
vanthome
vanthome

Reputation: 4924

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

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?

Upvotes: 2

Views: 4010

Answers (3)

Ashish Patil
Ashish Patil

Reputation: 1742

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.

Upvotes: 1

Jonathan.Brink
Jonathan.Brink

Reputation: 25443

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

Upvotes: 1

schnoedel
schnoedel

Reputation: 3948

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"));

Upvotes: 1

Related Questions