cancel
Showing results for 
Search instead for 
Did you mean: 

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

Former Member
0 Kudos

Hello,

I have the display template ready with me, I got stuck in integrating the same with the UI in XML View.

Can anybody please help with your suggestions?

Thanks and Best Regards,

Venkatesh

Accepted Solutions (0)

Answers (3)

Answers (3)

Former Member
0 Kudos

Hi Sai,

I have tried to render the chart using the above mentioned code but I am getting the error as "com" not defined, in the below line:

var i5Chart = new com.sap.xmii.chart.hchart.i5Chart("i5Demo_Display", "i5Demo_Query");


what could be the issue? all the libraries are properly placed. Using JS view the piece of code is working fine, I mean the 'com' path issue.


Thanks and Best Regards,


Venkatesh

saivellanki
Active Contributor
0 Kudos

Hi Venkatesh,

Few things -

1. Did you include following bootstrap?

<SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>

2. Which UI5 library are you using (sap.m or sap.ui.commons)?

Regards,

Sai Vellanki.

Former Member
0 Kudos

Hi Sai.

I have included all of them. sap.m library.

saivellanki
Active Contributor
0 Kudos

Hi Venkatesh,


When you include correct library, then you shouldn't get "com" not defined issue.


Can you please create a new bootstrap.js file and include below code. Point this library file in the script. let me know if the issue still persists.



//BOOTSTRAP FILE

var moduleArray = ['MIIUI5Visualization','MIIi5Util','MIIi5Constants','MIIi5Global','MIIi5Exception','DataModel','ModelMetaData','ModelData','ChartComponentModel',

                   'QueryTemplate','Query','TAGQuery','XMLQuery','SQLQuery','KPIQuery','AlarmQuery','AggregateQuery','CatalogQuery','MDOQuery','OLAPQuery','PCoQuery','XacuteQuery',

                   'ChartTemplate','ChartPropertyConfig','AppToolBar','ExtendedMenuItem','ExtendedLabel','ToolBar','TitleBar','MessageArea','TimeBar'];

//Creates the RootNameSpace

function createRootNameSpace(){

    com = {

  sap : {

  xmii : {

  }

  }

    } 

};

//Get the Script Param

function getScriptParam(attr){

  var attrVal = '';

  var attrName = 'data-'+attr;

    var scripts = document.getElementsByTagName('script');

   

    for(i in scripts){

    currentScript = scripts[i];

    if((currentScript.attributes)&&(typeof currentScript.attributes[attrName]!= "undefined"))

    attrVal = currentScript.getAttribute(attrName);

    }

    return attrVal;

};

//Function loads Ui5Core along with other libs.This has to loaded synchronously.How to load synchronously?

function loadUI5Core(){

    var ui5Url = '<scr' + 'ipt id="sap-ui-bootstrap" type="text/javascript" src=';

    ui5Url = ui5Url+'"/sapui5/resources/sap-ui-core.js" data-sap-ui-libs="sap.viz,sap.m,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal">';

    ui5Url = ui5Url+'</scr' + 'ipt>';

   document.write(ui5Url);

};

//Load Module

function loadModuleFromFlat(moduleName){

    var moduleDetails = '<scr' + 'ipt type="text/javascript" src="/XMII/JavaScript/';

    moduleDetails = moduleDetails+moduleName+'.js'+'"></scr' + 'ipt>';

    document.write(moduleDetails);

};

//Load Specific Lib

function loadSpecificLib(libToBeLoaded){

    if(libToBeLoaded != "" && libToBeLoaded != undefined) {

  var libsArray = libToBeLoaded.split(',');

  for(var i=0; i<libsArray.length; i++) {

  if(libsArray[i]==='i5Chart')

      loadModuleFromFlat(libsArray[i]);

  else if(libsArray[i]==='i5Grid')

     loadModuleFromFlat(libsArray[i]);

  }

}

}

//Main Code

loadUI5Core();

var libToBeLoaded = getScriptParam("libs");

for(var j=0;j<moduleArray.length;j++){

    var moduleName = moduleArray[j];

    loadModuleFromFlat(moduleName);

}

loadSpecificLib(libToBeLoaded);


Regards,

Sai Vellanki.

saivellanki
Active Contributor
0 Kudos

Hi Venkatesh,

If possible, paste the code of irpt, xml view and controller here.

Regards,

Sai Vellanki.

Former Member
0 Kudos

hi Sai,

Please refer below:

     <script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap“  type="text/javascript"  
data-sap-ui-libs="sap.ui.commons,sap.viz,sap.m,sap.makit, sap.ui.layout","i5Chart,i5Grid"
data-sap-ui-theme="sap_bluecrystal">
</script>
saivellanki
Active Contributor
0 Kudos

Hi Venkatesh,


You're pointing to wrong library in the script, https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js is the URL where the UI5 library resources are located in the SAP HANA Cloud Platform delivery. This library doesn't consists of i5Grid and i5Chart libraries.


To make i5Grid/i5Chart working, you will have to point to SAP MII default bootstrap.


Try to access the following link :


http://<IP>:<PORT>/XMII/JavaScript/bootstrap.js


Few points to note:


1. When you're pointing to default SAP MII bootstrap, don't include another seperate script for UI5 library. Since, bootstrap already consists of SAPUI5 libraries in it.

2. Default SAP MII bootstrap doesn't consists of sap.m library. So include sap.m also whatever UI5 libraries required into default bootstrap.

3. If you check my previous response in this thread, there you can find the bootstrap that I'm pointing to, you can use the same code.

4. Create a new .js file in WEB and include the bootstrap code that has been provided in my response.

5. Now in your .irpt page, point the script to bootstrap that has been created.


My IRPT Page:



<!DOCTYPE HTML>

<HTML>

<HEAD>

<!—

*&=====================================================================

*&       [Company Name.]              

*&=====================================================================

*& Requirement Name: i5 Chart - SAPUI5 - XML

*& Author: Sai Vellanki                                           

*& Date Started: 23rd June, 2015                                                     

*&=====================================================================

*& Description:   

*&====================================================================

*&---------------------------------------------------------------------

*&                   C H A N G E  H I S T O R Y                      

*&---------------------------------------------------------------------

*&=====================================================================

*& Author:[Developer Name]                                           

*& Date Started:                                                     

*& Change Request:                                                   

*& Description:    [Brief explanation of the change]    

*&=====================================================================

-->

<TITLE>SAPMII - i5Chart - SAPUI5</TITLE>

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

  <meta http-equiv="cache-control" content="max-age=0">

  <meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Expires" content="0">

             <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

  <SCRIPT type="text/javascript" src="/XMII/CM/SaiVellanki/Practice/Bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>

<script>

  jQuery.sap.registerModulePath('I5Path', '/XMII/CM/SaiVellanki/Practice/i5Chart_Sample/');

  var oShell = sap.ui.getCore().byId("oShell");

  if (!oShell){

  var mainShell = new sap.m.Shell("oShell",{

  app : new sap.ui.core.ComponentContainer({

  name : "i5Chart_Sample.js"

  })

  });

  }

  mainShell.placeAt("appContent"); // place the App into the HTML document

</script>

<style>

  body{

  margin-top: 0px !important;

  margin-right: 0px !important;

  margin-left: 0px !important;

  margin-bottom: 0px !important;

  }

</style>

</HEAD>

<BODY>

  <input type="text" id = "lname" style="display:none" value = {lastname}>

  <input type="text" id = "fname" style="display:none" value = {firstname}>

<div id="appContent"></div>

</BODY>

</HTML>


Regards,

Sai Vellanki.

saivellanki
Active Contributor
0 Kudos

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.

<SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>


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 -


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

Regards,

Sai Vellanki

Former Member
0 Kudos

Hi Sai,

I have tried to render the chart using the above mentioned code but I am getting the error as "com" not defined, in the below line:

var i5Chart = new com.sap.xmii.chart.hchart.i5Chart("i5Demo_Display", "i5Demo_Query");


what could be the issue? all the libraries are properly placed. Using JS view the piece of code is working fine, I mean the 'com' path issue.


Thanks and Best Regards,


Venkatesh

swaroop_anasane
Active Contributor
0 Kudos

Hi Venkateshy,

In such scenarios, easiest way would be

- to test the display template.

- view the source code

- copy the code that renders the i5chart.

- paste it on the view that you created.

- rename the id and other stuffs.

- remove session id, if any.

For now your can refer below code:

var addProps =

'{"LabelColumns":"Year","MappedQueryTemplate":"Path/QueryTemplatePath","DisplayTemplate":"Path/DisplayTemplatePath","CachedQueryTemplate":"Path/QueryTemplatePath","MappedQueryParamColumns":"Ma

ppedColumns","Applet":"i5Chart","Height":"400","QueryTemplate":"Path/QueryTemplatePath","CachedQueryTemplateColumns":"[CachedCOlumns]","ValueColumns":"ValueColums","Width":"640","Content-Type"

:"image/png"}';

var c = new com.sap.xmii.chart.hchart.i5Chart('DisplayTemplatePath','QueryTemplatePath',addProps);

c.draw('content');

Just replace relevant properties with exact value.

Hope this works.

Best Regards,

Swaroop