javascript - UI5: How to access html element defined inside view? - Stack Overflow

admin管理员组

文章数量:1399269

I have a UIComponent with this view:

<mvc:View controllerName="myponents.webmap.controller.Map"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns="sap.m"
   xmlns:html="">
   <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.

I have a UIComponent with this view:

<mvc:View controllerName="my.ponents.webmap.controller.Map"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns="sap.m"
   xmlns:html="http://www.w3/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.

• javascript
• html
• sapui5

Share Improve this question Follow edited Feb 3, 2020 at 9:53 Boghyon Hoffmann 18.1k1414 gold badges9393 silver badges205205 bronze badges asked May 11, 2016 at 16:40 user1025184user1025184 5733 silver badges77 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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/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.

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.

本文标签： javascriptUI5 How to access html element defined inside viewStack Overflow