how to add dom elements into sap ui Panel or dialog box?

[Former Member]

Hi Team,

I am trying to add plain HTML Dom elements like div,buttons into sap ui dialog box but unable do that becuase sap ui components only accepts sap ui controls .Is there any way to add plain html components into sap ui dialog box?

div html tag element:

sideBar = document.createElement("div");

sap ui dialog box:

editorDialog = new sap.ui.commons.Dialog();

editorDialog.addContent(sideBar);

Thanks

Varathan A

[former_member191660]

using native HTML should be the last resort. That having said, you can use the sap.ui.core.HTML Control, see sap.ui.core.HTML | SAPUI5 API Reference

[Former Member]

Hi Haller,

thanks for reply...

I have checked this api but there is no method to add dom content to sap.ui.core.HTML object.

Could you please give some samples if possible?

Thanks

Varathan A

[former_member191660]

Hi Varathan,

the control has the content property, which takes the HTML as string:

...HTML content to be displayed, defined as a string. The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well...

That would be something like

new sap.ui.core.HRML({content: "<div>foo bar</div>"});

if it is really a dom element at hand, you could either try

var domElement = /* your dom element */
new sap.ui.core.HRML({content: domElement}); // assuming jQuery will handle that internally

or

var domElement = /* your dom element */
new sap.ui.core.HRML({content: domElement.outerHRML"});

[Former Member]

Thanks for the samples ,I will try...