UI5: How to access html element defined inside view?

Question

I have a UIComponent with this view:

<mvc:View controllerName="my.components.webmap.controller.Map"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns="sap.m"
   xmlns:html="http://www.w3.org/1999/xhtml">
   <html:div id='myDiv' style='height:inherit'></html:div>
   <Button id="helloWorld" text="Say Hello" press=".onShowHello" />
</mvc:View>

In the View controller, I can get the Button and its id from

this.getView().byId("helloWorld").sId

but I can't get the ID of the div using the byId() method.

this.getView().byId("myDiv"); // returns undefined

How can I get the ID of the div in order to access the element? I need the ID of the div so I can append some additional 3rd party controls to it.

Answer 1

You can use the createId to convert your lokal ID to a global one and use that with getElementById:

// After rendering
var divId = this.createId("myDiv"); // this == controller instance
document.getElementById(divId).whatEver

Answer 2

There are some possible solutions. Let's see the preferred one from UI5 point of view. Your view:

<mvc:View controllerName="yourcontroller" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml"> <Button press="btn" /> <layout:VerticalLayout id="layout"> </layout:VerticalLayout> </mvc:View>

You can any use any layout, which fits your requirements, and of course you can set layout properties as well. In your controller, the event handler of the button:

btn: function(oEvent) { var oLayout = this.getView().byId("layout"); oLayout.addContent(new sap.m.Text({text: "test"})); }

-o-

If your api supports only a div container, you should use some jQuery tricks:

var oDiv = $('[id*="myDiv"]');

However, with this solution you will lose the UI5 specific control handling.

Answer 3

To answer your question how to get the ID of the HTML element (div) - you can also assemble the ID in your controller like this:

var sHTMLElementID = this.getView().sId.concat("--".concat("viewDiv"));

So UI5 still handles the view's id and prefixes.