on 06-22-2015 10:26 AM
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
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> |
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.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
7 | |
3 | |
2 | |
2 | |
1 | |
1 | |
1 | |
1 | |
1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.