Re: Can anybody give me a demo code example of display templates(like i5Chart) in XML view?

Hi Venkatesh,

You can achieve it using DOM manipulation.

----------------------------------------------------------------------------------------------------------------------------------------

Versions used for testing below scenario -

MII Version - 14.0 SP5 Patch 11

UI5 Library used - sap.m

UI5 Library version - 1.22.2

-----------------------------------------------------------------------------------------------------------------------------------------

1. Please ensure you have included i5Chart/i5Grid libraries in .irpt file. It should be something like this.

2. I have below code in my XML view.

<mvc:View

  controllerName="I5Path.Controllers.i5Home"

xmlns:u="sap.ui.unified"

xmlns:s="sap.suite.ui.commons"

  xmlns:core="sap.ui.core"

  xmlns:mvc="sap.ui.core.mvc"

  xmlns="sap.m">

  <Page id="Main"

    title="Page"

    class="marginBoxContent" >

    <customHeader>

      <Toolbar>

        <ToolbarSpacer/>

      <Label

        text="i5Chart Sample" />

        <ToolbarSpacer/>

      </Toolbar>

    </customHeader>

<content>

<Panel id="chartPanel" />

</content>

</Page>

</mvc:View>

3. Now, I need to place i5Chart in "chartPanel"

4. I have a controller attached to the view, where I need to have generated i5Chart code (You can generate it using Script Assistant).

sap.ui.controller("I5Path.Controllers.i5Home", {

onInit: function() {

  var that = this;

}

,serviceList:{}

,onAfterRendering: function() {

  var oChart = new com.sap.xmii.chart.hchart.i5Chart("SaiVellanki/i5Chart_Display", "SaiVellanki/i5Chart_Query");

  oChart.setChartWidth("640px");

  oChart.setChartHeight("400px");

  oChart.draw("home--chartPanel");

    }

});

5. In my scenario, I wanted to plot the i5Chart on a Panel. So, I made an inspect element on the panel and got the section id, hence I used  "home--chartPanel" id.

6. In your scenario, please check the DOM section id where you wanted to plot the chart, using Google Chrome inspect element option.

7. Final Output will be -

Image may be NSFW.
Clik here to view.

Please let me know if you have any issues/concerns.

Regards,

Sai Vellanki