CODEWITHSUNDEEP
sapui5
SAPUI5 Newbie
SAPUI5 Newbie

Reputation: 23

SAP UI5 - How to append HTML DOM Object to XML View

I'm trying to append an HTML DOM Object to XML View, but it isn't showing up.

I'm trying to hit a BAPI service which returns me an XML, which is then transformed into HTML DOM using an XSLT

resultDocument is an documentFragment paneXml is the panel id

if (document.implementation && document.implementation.createDocument) {
                    xsltProcessor = new XSLTProcessor();
                    xsltProcessor.importStylesheet(xsl);
                    resultDocument = xsltProcessor.transformToFragment(xml, document);
                    var viewHtml = new sap.ui.core.HTML().setDOMContent(resultDocument);
                    this.getView().byId('panelXml').placeAt('viewHtml');
             }

XML View <Panel id="panelXml" width="100%" style="display:block;" ></Panel>

Upvotes: 2

Views: 13730

Answers (2)

Pedro Castillo
Pedro Castillo

Reputation: 71

For fiori app SAPUI5 1.44, this link http://jsfiddle.net/C4FW7/ works. You only must do following

<App>
     <Page title="SAPUI5 App">
         <core:HTML id="html" content="hello"/>
     </Page>
  </App>

and in your contoller

sap.ui.controller("my.own.controller", {
    onInit: function(){
         var that=this;
         $.get( "/8rmAU/show/light", function( data ) {
            that.getView().byId('html').setContent(data);
        });
    }
});

Upvotes: 0

keshet
keshet

Reputation: 1826

Here:

var viewHtml = new sap.ui.core.HTML().setDOMContent(resultDocument);

you create control which should be added then to your view to be displayed.

And here:

this.getView().byId('panelXml').placeAt('viewHtml');

you place your control (your panel) into html tag 'viewHtml' (the tag, maybe, does not exist at all if you didn't define it), and not into your previously defined viewHtml control, speaking of which, you can't placeAt() your control into another control (placeAt() works for html tags).

You should add your viewHtml control into your view (the control should be previously defined in your view. Then you just call it by its id and assign new content to it).

If you want to add your panel to the resultDocument, you should do it not in your view, but in controller after you create this resultDocument (I'm not sure if it'll work though).

In general, if you want to append HTML DOM Object to XML View, you need to define your control in the view (I don't use xml views much, so the following view code may be not 100% accurate):

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="myApp" xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
  <content>
    <html:div id="htmlId">hihi</html:div>
  </content>
</Page>
</mvc:View>

and then, in controller:

var resultDocument = xsltProcessor.transformToFragment(xml, document);
this.getView().byId("htmlId").setDOMContent(resultDocument);

Upvotes: 4

Related Questions