SelectData SAPUI5 viz

The following code gives me a nice line chart as shown below:
//Code snippet to create dataset
var oDataset1 = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{axis : 1,name :'BUSINESS_DATE', value :"BUSINESS_DATE"}]
measures :  [{name : 'Profit', value : '{Profit}'}],//Define the Y-axis parameter
data :   {path : "/GRAPHDATA",filters: [oFilter1,oFilter2,oFilter3],parameters: {select: 'BUSINESS_DATE,PROFIT'}}}); //set the data and filter
Define line chart:
var oLineChart = new sap.viz.ui5.Line({width : "100%",height : "300px",
  //plotArea : {'colorPalette' :['#748CB2','#FFC200']},
  title : {visible : true,text : 'BusinessDate Vs Profit'},
  dataset : oDataset1,
  selectData : function(oEvent) {
alert("Need to extend code");                  
Now, when I click on a single data point I need to get the values of X-axis and Y-axis of that data point selected. Could anyone suggest how this could be done? Any example solutions. Thanks

Hello Krishna,
Well the requirement is that, when I click on a point onto the chart, I need to get the value of X-axis and Y-axis. I am trying this:
selectData : function(oEvent) {
  var yAxisIndex= oEvent.getParameter("data"[0].data[0].ctx.path.dii_a1);
  console.log(yAxisIndex);
  console.log(oModel3.getProperty("/GRAPHDATA"+('"+yAxisIndex+"')"+"/BUSINESS_DATE")); }
But the problem here is that I have set filters in my dataset(as shown in my code above) like this:
data :   {path : "/GRAPHDATA",filters: [oFilter1,oFilter2,oFilter3],parameters: {select: 'BUSINESS_DATE,PROFIT'}}});
But now if I use
console.log(oModel3.getProperty("/GRAPHDATA"+('"+yAxisIndex+"')"+"/BUSINESS_DATE")); }
then, it sends a query for the whole table without filters to get the value.This gives me a wrong value. I just have to send this query to the filtered dataset. Any ideas?
I hope my question is clear. If not let me know.

Similar Messages

  • SAPUI5 Viz select Xaxis and Yaxis values

    The following code gives me a nice line chart as shown below:
    //Code snippet to create dataset 
    var oDataset1 = new sap.viz.ui5.data.FlattenedDataset({ 
    dimensions : [{axis : 1,name :'BUSINESS_DATE', value :"BUSINESS_DATE"}] 
    measures :  [{name : 'Profit', value : '{Profit}'}],//Define the Y-axis parameter 
    data :   {path : "/GRAPHDATA",filters: [oFilter1,oFilter2,oFilter3],parameters: {select: 'BUSINESS_DATE,PROFIT'}}}); //set the data and filter
    Define line chart:
    var oLineChart = new sap.viz.ui5.Line({width : "100%",height : "300px", 
      //plotArea : {'colorPalette' :['#748CB2','#FFC200']}, 
      title : {visible : true,text : 'BusinessDate Vs Profit'}, 
      dataset : oDataset1, 
      selectData : function(oEvent) { 
    alert("Need to extend code");                    
    Now, when I click on a single data point, I need to get the values of both X-axis and Y-axis of that data point selected. Is there a possibility of such thing in SAPUI5?
    I am already trying this:
    selectData : function(oEvent) {
      var yAxisIndex= oEvent.getParameter("data"[0].data[0].ctx.path.dii_a1);
      console.log(yAxisIndex);
      console.log(oModel3.getProperty("/GRAPHDATA"+('"+yAxisIndex+"')"+"/BUSINESS_DATE")); }
    But the problem I am facing with this, I have explained it here Re: selectData SAPUI5 viz
    Could anyone suggest how this could be done? Any example solutions. Thanks in advance.

    Hello
    See if you can start from here, rather than selectData use attachSelectData
    var oLineChart = new sap.viz.ui5.Line({width : "100%",height : "300px",   
      //plotArea : {'colorPalette' :['#748CB2','#FFC200']},   
      title : {visible : true,text : 'BusinessDate Vs Profit'},   
      dataset : oDataset1,   
      attachSelectData: function(oEvent) {   
    alert(oEvent.mParameters.data[0].data[0].val);                      
    I haven't done much with this but, tell me if it works for you

  • SAPUI5 in SAP MII 14.0 - error on running index.html

    Dear All,
    I am working on SAP MII 14.0.
    I am trying to run a sample example on SAPUI5 implementation in SAP MII 14.0 taken from link: http://scn.sap.com/community/manufacturing/mii/blog/2013/03/21/making-engaging-ui-on-sap-mii-with-sapui5
    But I got an Error when I tested index.html page !!
    Problem Description:
    My index.html code is :
    <!DOCTYPE HTML>  
    <html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <script src="/sapui5/resources/sap-ui-core.js" 
                          id="sap-ui-bootstrap“  type="text/javascript" 
                          data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.viz, sap.ui.ux3" 
                          data-sap-ui-theme="sap_goldreflection" > 
    </script>
      </head>  
          <body class="sapUiBody" role="application">  
          <div id='plantkpiDiv'></div>
    <script>  
      alert("1"); // this comes
      //register the application  
    jQuery.sap.registerModulePath("kpidashboard", "/XMII/CM/547555/SAPUI5/kpidashboard/webcontent"); 
      alert("2");   // this comes
    //instantiate the view
      var plantView = sap.ui.view({id:"idPlantView", viewName:"kpidashboard.PlantView", type:sap.ui.core.mvc.ViewType.JS});  
       //add the view to the div 
    alert("3"); // this does not come
      plantView.placeAt("plantkpiDiv");    
       </script> 
           </body>
    </html>  
    Folder Structure in Workbench is as follows:  /XMII/CM/547555/SAPUI5/kpidashboard/webcontent
    Inside webcontent I have created three files i.e. PlantView.controller.js , PlantView.view.js and index.html.
    Webpage error details
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
    Timestamp: Tue, 11 Mar 2014 10:32:30 UTC
    Message: Unterminated string constant
    Line: 13
    Char: 260
    Code: 0
    URI: http://inpuneme01:50200/XMII/CM/547555/SAPUI5/kpidashboard/webcontent/index.html?JSESSIONID=G59R-clhqrId7QDW_a_VBOSXQqyvRAEC2ZsB_SAPqh1fgxWruoAQAKceTGLKZ-6J
    Message: failed to load 'kpidashboard.PlantView.view' from /XMII/CM/547555/SAPUI5/kpidashboard/webcontent/PlantView.view.js: SyntaxError: Unterminated string constant
    Line: 41
    Char: 11332
    Code: 0
    URI: http://inpuneme01:50200/sapui5/resources/sap-ui-core.js
    Thanks and Regards,
    Anshul Arora

    Hi Rohit,
    I checked and found that PCo Mgmt service was not started. SO I started it and now I am able to get the XML when I open PCO Mgmt URL in the browser of PCo Server
    But,
    When my agent is running, I don't get Browse button enabled in "Subscription Items" tab.
    When I stop the agent instance, I can see Browse button enabled in "Subscription Items" tab. But when I click on browse, it gives me following error:
    Not sure what's wrong?
    Soham

  • SAPUI5 App in Fiori Client - Double tap will not work.

    Hi ,
    I have developed a SAPUI5 app  and when i try to access the app in an iPhone using the Fiori Client , the app works fine , but double tab will not work when i am in the app, double tap works when i am on the launchpad.
    Please help.
    i have used sap.m.splitapp and viz charts.
    Thanks

    Did you solve this? I have the same issue.

  • Clickable pie chart in sapui5

    Hi,
    how to display clickable pie chart in sapui5?
    when i click on particular area on the pie chart it need to give a popup showing all the information about that.
    Thanks & Regards
    Chitti Babu

    hi,
    Pie chart has 'selectdata' event which can be registered to an event handler.
      Please refer below sample code:
    pie.attachSelectData(selPiefn);
    selPiefn=
    function(oEventParam){
    var oSelectData = oEventParam.getParameter("data");
    Thanks,
    Monalisa

  • Where can I download the sap.viz chart library?

    Hi,
    I develop a web software with using sap.ui.communs, sap.ui.table, sap.ui.core and sap.viz chart libraries.
    I found where I can download sap.ui.communs, sap.ui.table, sap.ui.core libraries to perform my software (OpenUI5 - Download)
    But there's no sap.viz chart library... so for the moment I have to use in my page html this javascript code:
    src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core-nojQuery.js"
    I would like to use a local src and not a online src... so where can I download the sap.viz chart library (without jquery)?
    Best regards
    Yannick

    Hi Yannick
    UInfortunately, this is posted in an incorrect SCN Topic Space. Before posting, always check the Overview of the Sapce to see what it covers. E.g.; this Space:
    To find the best Space for your query, please see the SCN Site Index
    - Ludek
    Senior Support Engineer AGS Product Support, Global Support Center Canada
    Follow us on Twitter

  • How to get value of selected part in sap.viz.ui5.pie chart

    Hi,
       I have designed a basic Pie Chart. But i am looking for the code to get the value of the selected part of the Pie Chart,so that i can report a details based on it.
    Is their is any sample code snippets available for all event handlers of sap.viz.ui5 charts..
    Thanks,
    Prakash

    Hi Prakash,
    Refer this thread How to get the value of Selected Dimension in a Pie Chart ?
    I shared example code in this thread and I hope it will solve your question.
    also you can see example at this link https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/viz/demokit/VIZCharts.html?sap-ui-debug=true&sap-ui-language=en-US&sap-ui-theme=sap_bluecrystal&sap-ui-accessibility=true&sap-ui-jqueryversion=1.7.1
    see the eventing section and source code to know all event handles.
    Regards,
    Chandra

  • Error when using MII with SAPUI5

    I get the following error - "Unable to get value of the property 'getElementsByTagName':object is null or undefined
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta name="description" content="UI5 table example with local JSON model" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <META http-equiv="X-UA-Compatible" content="IE=edge">
    <META http-equiv='cache-control' content='no-cache'>
    <META http-equiv='expires' content='0'>
    <META http-equiv='pragma' content='no-cache'>
    <TITLE>SAPUI5 Projects Status - Applications</TITLE>
    <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"
        type="text/javascript" src="/sapui5/resources/sap-ui-core.js" data-sap-ui-theme="sap_goldreflection"
                      data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.commons,sap.ui.table">
    </SCRIPT>
    <script>
    var xmlHttp = new XMLHttpRequest();
    var xmlDOM;
      xmlHttp.open("GET","ProjectsStatus/Transactions/ProjectsStatus", false);
      xmlHttp.send();
      xmlDOM = xmlHttp.responseXML.documentElement;
    var opElement = xmlDOM.getElementsByTagName("Row")[0].firstChild;    <<<<<< I get error here - 'getElementsByTagName':object is null or undefined
    var aData = eval(opElement.firstChild.data); 
      /* Define the table, with toolbar controls, update button */ 
    var oTable = new sap.ui.table.DataTable("table", {  
      editable : true, 
      visibleRowCount :5
    oTable.setSelectionMode(sap.ui.table.SelectionMode.Multi); 
    oTable.setToolbar(new sap.ui.commons.Toolbar({items: [ 
    new sap.ui.commons.Button({text: "Update Data", press: updateData}), 
    new sap.ui.commons.Label({text: "First Visible Row"}), 
    new sap.ui.commons.TextField({tooltip: "First Visible Row", width: "30px", change: function(oEvent) { oTable.setFirstVisibleRow(parseInt(oEvent.getParameter("newValue"))); }}),  
    new sap.ui.commons.Label({text: "Visible Row Count"}), 
    new sap.ui.commons.TextField({tooltip: "Visible Row Count", width: "30px", change: function(oEvent) { oTable.setVisibleRowCount(parseInt(oEvent.getParameter("newValue"))); }}) 
    /* Define the table columns */  
    var oControl = new sap.ui.commons.TextView({text:"{Applications}"}); // short binding notation
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Applications"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
    oControl = new sap.ui.commons.TextField().bindProperty("value", "PercentComplete"); // more verbose binding notationt
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PercentComplete"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
    oControl = new sap.ui.commons.TextField().bindProperty("value", "Date_Due"); // more verbose binding notationt
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Date_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
    oControl = new sap.ui.commons.TextField().bindProperty("value", "Testing_Due"); // more verbose binding notationt
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Testing_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
    /* Define the JSON model */ 
    var oModel = new sap.ui.model.json.JSONModel(); 
    oModel.setData({modelData: aData}); 
    /* Connect the data table to the JSON model */ 
    oTable.setModel(oModel); 
    oTable.bindRows("modelData");     
    oTable.placeAt("content"); 
    /* Function to save the updated data in the grid.*/
    function updateData() { 
    /* get the selected row context  and using the context read the required values from the selected row*/ 
    var selRowContext = oTable.getContextByIndex(oTable.getSelectedIndex());  
    var selectedId = oModel.getProperty("giid", selRowContext); 
    var selectedApp = oModel.getProperty("application", selRowContext); 
    var selectedDate = oModel.getProperty("datedue", selRowContext); 
    document.icmd_common.setQueryTemplate("ProjectsStatus/MDO_Transactions/Projects_MDO_Select"); 
    var commCommandQueryTemplate =  document.icmd_common.getQueryObject(); 
    commCommandQueryTemplate.setParam(1, selectedApplications); 
    commCommandQueryTemplate.setParam(2,selectedPercentComplete); 
    commCommandQueryTemplate.setParam(3, selectedDate_Due); 
    commCommandQueryTemplate.setParam(4, selectedTesting_Due); 
    document.icmd_common.executeCommand(); 
    /* Display a success message */ 
    sap.ui.commons.MessageBox.alert("Actual quantity updated successfully.");  } 
    </script>
    </head>
    <body class='sapUiBody'>
    <h><b>Applications</b></h><br><br>
    <table style="width:100%">
      <div id='content1'></div>
    </table> <br><br><br>
    </body>
    <body class='sapUiBody'>
    <h><b>Applications Changes</b></h><br><br>
    <table style="width:100%">
      <div id='content2'></div>
    </table><br><br><br>
    </body>
    <body class='sapUiBody'>
    <h><b>Infrastructure Changes</b></h><br><br>
    <table style="width:100%">
      <div id='content3'></div>
    </table><br><br><br>
    </body>
    </html>

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
        <meta name="description" content="UI5 table example with local JSON model" />
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        <META http-equiv="X-UA-Compatible" content="IE=edge">
        <META http-equiv='cache-control' content='no-cache'>
        <META http-equiv='expires' content='0'>
        <META http-equiv='pragma' content='no-cache'>
        <TITLE>SAPUI5 Projects Status - Applications</TITLE>
    <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"
                 type="text/javascript" src="/sapui5/resources/sap-ui-core.js" data-sap-ui-theme="sap_goldreflection"
                            data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.commons,sap.ui.table">
        </SCRIPT>
        <script>
            function PageLoad()
            GetMDoData();
        // create the DataTable control
            var oTable = new sap.ui.table.Table({editable:true});
            // define the Table columns
            var oControl = new sap.ui.commons.TextView({text:"{Applications}"}); // short binding notation
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Applications"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "PercentComplete"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PercentComplete"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "Date_Due"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Date_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "Testing_Due"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Testing_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            // create some local data
            var aData = [
                {Applications: "WVL BOD 9212", PercentComplete: "75", Date_Due: "6/16/2014", Testing_Due: "6/23/2014" },
                {Applications: "WVL BOD 9211", PercentComplete: "75", Date_Due: "6/16/2014", Testing_Due: "6/24/2014" },
                {Applications: "WVL BOD 3303", PercentComplete: "75", Date_Due: "6/16/2016", Testing_Due: "6/25/2014" },
                {Applications: "ETW BOD 3304", PercentComplete: "75", Date_Due: "6/16/2014", Testing_Due: "6/26/2014" },
                {Applications: "CLE BOD 1902", PercentComplete: "75", Date_Due: "6/16/2014", Testing_Due: "6/27/2014" },
                {Applications: "ISO HAZ", PercentComplete: "80", Date_Due: "6/1/2014", Testing_Due: "6/8/2014" },
                {Applications: "ISO CWO", PercentComplete: "80", Date_Due: "6/01/2014", Testing_Due: "6/8/2014" },
                {Applications: "WVL 3 Stream ", PercentComplete: "60", Date_Due: "6/29/2014", Testing_Due: "" },
                {Applications: "ISO Integration", PercentComplete: "10", Date_Due: "6/1/2014", Testing_Due: "6/8/2014" },
                {Applications: "WVL 7 QM Charts", PercentComplete: "15", Date_Due: "6/15/2014", Testing_Due: "" },
                {Applications: "SCB PCO", PercentComplete: "100", Date_Due: "?", Testing_Due: "" },
                {Applications: "SCB Top Chart ", PercentComplete: "10", Date_Due: "5/20/2014", Testing_Due: "" },
                {Applications: "Project Status", PercentComplete: "25", Date_Due: "7/25/2014", Testing_Due: "" },
                {Applications: "WVL LOI", PercentComplete: "100", Date_Due: "4/20/2014", Testing_Due: ""},
                {Applications: "DSS (HTML5)", PercentComplete: "100", Date_Due: "3/31/2013", Testing_Due: ""},
                {Applications: "ETW 3304 BOD Pilot",PercentComplete: "100", Date_Due: "11/16/2013", Testing_Due: ""},
                {Applications: "HTMl 5 Table Tools",PercentComplete: "100", Date_Due: "2/12/2014", Testing_Due: ""},
                {Applications: "ISO JAX",PercentComplete: "100", Date_Due: "7/31/2013", Testing_Due: ""},
                {Applications: "ISO FEN",PercentComplete: "100", Date_Due: "1/10/2014", Testing_Due: ""},
                {Applications: "WVL QM Display",PercentComplete: "100", Date_Due: "2/12/2014", Testing_Due: ""},
        /* =================================== */
        /* Obtain Json object filled with Data*                             <<<<<< This is where it shows "no data" in the table
        /* =================================== */
                var xmlHttp = new XMLHttpRequest();
                var xmlDom;
               xmlHttp.open( "GET", "/XMII/Runner?Transaction=ProjectsStatus/Transactions/ProjectsStatus&OutputParameter=JSONData&Content-Type=text/xml", false );
                xmlHttp.send();
               xmlDom= xmlHttp.responseXML;
      // xmlDom = xmlHttp.responseText;
            // create a JSONModel, fill in the data and bind the Table to this model
    //      var oModel = new sap.ui.model.json.JSONModel();
            var oModel = new sap.ui.model.xml.XMLModel();
            oModel.setData({modelData: xmlDom});
            oModel.setXML(xmlDom);
            oTable.setModel(oModel);
            oTable.bindRows("/element"); //where element is the node that represents that data which forms each row of the table
            // finally place the Table into the UI
            oTable.placeAt("content1");
        </script>
            <script>
        // create the DataTable control
            var oTable = new sap.ui.table.Table({editable:true});
            // define the Table columns
            var oControl = new sap.ui.commons.TextView({text:"{Applications}"}); // short binding notation
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Applications"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "PercentComplete"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PercentComplete"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "Date_Due"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Date_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "Testing_Due"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Testing_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            // create some local data
            var aData = [
                {Applications: "ISO IE11 BUG FIXES", PercentComplete: "0", Date_Due: "6/1/2014", Testing_Due: "" },
                {Applications: "ISO Fernley TimeOut", PercentComplete: "0", Date_Due: "6/1/2014", Testing_Due: "" },
                {Applications: "IE 11 Testing", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "IE 11 Testing_ISO Application", PercentComplete: "100", Date_Due: "5/16/2014", Testing_Due: "5/16/214" },
                {Applications: "IE 11 Testing_ISO DSS", PercentComplete: "100", Date_Due: "5/16/2014", Testing_Due: "5/16/214" },
                {Applications: "IE 11 Testing_BOD/EPAmericas", PercentComplete: "100", Date_Due: "5/16/2014", Testing_Due: "5/16/214" },
                {Applications: "IE 11 Testing_TOOLS", PercentComplete: "100", Date_Due: "5/16/2014", Testing_Due: "5/16/214" },
                {Applications: "IE 11 Testing_STATUS", PercentComplete: "100", Date_Due: "5/16/2014", Testing_Due: "5/16/214" },
            // create a JSONModel, fill in the data and bind the Table to this model
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({modelData: aData});
            oTable.setModel(oModel);
            oTable.bindRows("/modelData");
            // finally place the Table into the UI
            oTable.placeAt("content2");
        </script>
        <script>
        // create the DataTable control
            var oTable = new sap.ui.table.Table({editable:true});
            // define the Table columns
            var oControl = new sap.ui.commons.TextView({text:"{Applications}"}); // short binding notation
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Applications"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "PercentComplete"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PercentComplete"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "Date_Due"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Date_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            oControl = new sap.ui.commons.TextField().bindProperty("value", "Testing_Due"); // more verbose binding notationt
            oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Testing_Due"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
            // create some local data
            var aData = [
                {Applications: "CIMX", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMX - Connections", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMX - NWDI", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMX - Security", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMX - Integration", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMID", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMID - Connections", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMID - NWDI", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                                        {Applications: "CIMID - Security", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMID - Integration", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMIP", PercentComplete: "99.5", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMIP - Connections", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMIP - NWDI", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMIP - Security", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIMIP - Integration", PercentComplete: "98", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM1", PercentComplete: "99.5", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM1 - Connections", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM1 - NWDI", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM1 - Security", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM1 - Integration", PercentComplete: "98", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM2", PercentComplete: "85", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM2 - Connections", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM2 - NWDI", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM2 - Security", PercentComplete: "90", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM2 - Integration", PercentComplete: "50", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM3", PercentComplete: "85", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM3 - Connections", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM3 - NWDI", PercentComplete: "100", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM3 - Security", PercentComplete: "90", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM3 - Integration", PercentComplete: "50", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM4", PercentComplete: "85", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM4 - Connections", PercentComplete: "0", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM4 - NWDI", PercentComplete: "0", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM4 - Security", PercentComplete: "0", Date_Due: "", Testing_Due: "" },
                {Applications: "CIM4 - Integration", PercentComplete: "0", Date_Due: "", Testing_Due: "" },
            // create a JSONModel, fill in the data and bind the Table to this model
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({modelData: aData});
            oTable.setModel(oModel);
            oTable.bindRows("/modelData");
            // finally place the Table into the UI
            oTable.placeAt("content3");
        </script>
        </head>
        <body class='sapUiBody'>
    <h><b>Applications</b></h><br><br>
    <table style="width:100%">
            <div id='content1'></div>
    </table> <br><br><br>
        </body>
        <body class='sapUiBody'>
    <h><b>Applications Changes</b></h><br><br>
    <table style="width:100%">
            <div id='content2'></div>
    </table><br><br><br>
        </body>
        <body class='sapUiBody'>
    <h><b>Infrastructure Changes</b></h><br><br>
    <table style="width:100%">
            <div id='content3'></div>
    </table><br><br><br>
        </body>
    </html>

  • SAPUI5 Application is not working in EP 7.01

    Hi All,
    I have SAPUI5 application developed and hosted in SAP ABAP Web Application server ( GW Server), this app is already integrated with SAP Enterprise Portal 7.01 ( SP15), It is working fine without any issue in Chrome Browser.
    But NOT in IE11 from only Portal.
    Note: the same application is working fine in IE11 by using direct app link from ABAP WAS, the problem is only when the UI5 application is called from Portal iview ( SAPUI5 iview) in IE11.
    Please suggest what could be the reason behind this. is there any other way to run Ui5 application from Portal 7.01 in IE11.
    Thanks
    Sathya

    Thanks Santhosh.
    I am going through the First help link, I have already set the Property(Standard mode - while Launching Portal in new window) from Portal iview, and "Handover Portal stylesheet" to 'NO'
    I hv already gone the remaining Forum threads and Notes as well, but i did not get exact any other help to fix this issue.
    I am getting different Error now - Unable to get property 'addDelegate' of undefined or null reference
    Pls. let me know if you can help me.
    Thanks
    Sathya

  • Why doesn't SAP use SAPUI5 for this and that

    This is my personal opinion about this topic! Again and again I stumble about this and now I want to share some of my thoughts about this topic. I want to share this from a point of view, when I was not a SAP Employee - I worked at a SAP Partner company - because this best reflects the view from the outside.
    1. SAP "wants" us to use SAPUI5
    I don't think that "wants" is the right word - the right word is offers! In terms of: hey now even included in your license and open sourced (because you wanted it so). Look - we build sooo many Fiori apps with it - and put in some great enterprise features (right to left, accessibility, translation, ...) and it is responsive. So if you want to build Fiori-like "apps" - there you go - this is your technology to go! This is what I understood.
    I was very very very happy that it was build with open standards. But the main point for me another thing - (because I worked with Sybase Unwired Platform and SAP Mobile Platform) OMG an open data protocol!!! OData FTW! I could use ANY front-end technology and consume SAP data - the protocol is REST based - a dream came true. And so I did - yes I played around with Sencha Touch and OData, I used data.js and used it in a standard HTML5 application. We played around with an iOS application we already had and consumed the data. I feed the data into d3.js. I prototyped around with SAPUI5 and I have build apps with it. Brilliant, so I could choose whatever UI technology I wanted.
    I always had the feeling, that SAPUI5 was meant for B2E applications - and building many of that - and they should look and feel the same and I can theme the apps. I can use it when I want to make my applications SAP like - so that the user thinks the apps are all the same and everything fits nicely into the Fiori launchpad - great if you want to build partner apps. In my ex company we won a SAP Pinnacle Award - for a native iOS app, no SAPUI5 in sight - but we have received an award, so SAP did not "want us" to use SAPUI5 ;-)
    2. Is it the right UI technology for everything?
    At my ex-company I was dealing with mobile applications and web apps. I always knew that I get the best user experience when I write a real native application and if you want it to look like in a very specific way with awesome UI --> you would not do it with a write-once-run-everywhere HTML5 super-styled wrapped (phone gap/cordova) app - you would write the apps for the specific platform and it should feel like it was written for the platform. SAP offered us the SAP Fiori Client that I could enhance the user experience for the Fiori apps, but I was never told to use SAPUI5 it for everything.
    The same discussion goes on with: why was the new SAP website not build with SAPUI5, or the UX Explorer (eat your own dog food), or a useful internal app - why Angular, or the other way around why do we even use SAPUI5 and not Angular JS itself. Back to the past - SAP did never tell me to build a website with it, or to build something tiny and small with it (a widget) - or to enhance parts of a website with it - or to build something super-specific with it.
    And yes maybe the UI in a mobile app was not SAPUI5 but do you know if it uses Gateway with OData or the SAP Mobile Platform, was the API managed with Apigee, was HCI involved in getting the data from different sources, was it maybe wrapped with SAP Mobile Secure, did it maybe use a HANA backend or some of its features (predictions, text analytics, ...) - are some backend parts maybe hosted on HCP - who knows? So yeah, maybe other SAP technology was involved which you don't see, but in the end it made your life simpler.
    Instead of arguing around why this and that was used for this and that - can we save our energy and instead look at the result - which is all what counts - that it was the right UI technology with the right user interface which makes the user happy? I stated something like - does Google use AngularJS for everything? Nope. They offer us something great we can use. Right, maybe AngularJS is not as important for Google like SAPUI5 is for us. But we have something with which we can build our day-to-day business apps with and we do so.
    3. We missed great opportunity in not using SAPUI5 for this and that
    Let's think about how projects are going: you want something, you look at the costs, you choose most efficient option. Yes this could mean reusing an existing native application which was written long ago and you pimped it up. Or you had outsourced it to a company which wrote a similar app. Or you bought the source code. Or you have some cheap internal staff which could do it (students, trainee), or you could outsource it cheaply. Or all you have is people with experience in this and that technology. Or it must look in a very very specific way (because marketing says so) and you go native. Or it maybe should even differentiate itself and should look NOT like a Fiori app. And no - I don't think - this is my employees view - we are not for example an event app producer. We normally build business applications. And I don't think that we can write an app from scratch "just" for an event in a certain technology. Yes it would be nice if this and that would use SAPUI5, I think if it would be possible in terms of time and costs and UI wishes and hundreds of other factors we would do it with SAPUI5.
    Working at the partner SAP showed me over 50 Fiori apps, now hundreds of Fiori apps are released. SAP now showed that SAPUI5 is going big with S/4HANA. We have seen the Simple Finance solution. I was walking around at the CeBIT this year and I was impressed myself which cool apps and screens have been shown with SAPUI5. I used the SAPUI5 app on a Samsung Smart Watch myself. The SAP Web IDE itself is built with SAPUI5 in its heart. I don't need any other "proves" that SAPUI5 is great. I have seen great use cases for it, but I also know myself when I would use other stuff.
    4. My conclusion
    There is never every anything which can cover all different use cases. One-size-fits-all clothes also does not fit for everyone even if it says so. If someone creates something great don't judge it by the UI technology. Judge it by the experience and the value it creates. There are reasons why this and that was chosen. Use what fits your needs best with your requirements. Make the end user happy!

    Hey Denise,
    Thanks for pulling this discussion into SCN. Makes it much easier to discuss compared to Twitter. But I also have to apologize in the beginning that my answer now exceeds 140 characters by 50 times.
    Let me share my thoughts and personal opinion as well. I will try to look at it from a strategic point of view, as you – as the technical UI5 expert - have already covered the technical perspective.
    SAP recommends using SAPUI5 where it fits to customers’ requirements
    Let me begin with a clear statement from my perspective: It makes no sense that SAP takes customer decisions.
    Of course, customers expect SAP to help them with their strategies and decisions and of course we are helping. But at the end, the decisions have to be taken by the customer who needs to take the specific conditions of the company into account. The most important condition in the context of UX is the end user. But we shouldn't forget the business strategy as the most important influence factor. I’m not saying that technical decisions are completely unimportant, but I would like to point out that other things are more important for a company.
    As a result, it wouldn't make a lot of sense if SAP would just want every customer to use SAPUI5. To me, customers need recommendations leading to solutions that satisfy their needs and requirements.
    There is not that one UI technology that serves all needs
    This headline might be a challenging statement and I can already imagine reactions to it. But in fact I can confirm this sentence easily. You always have to combine different technologies. Some of them are from SAP others not. The selection and combination of these technologies is different from customer to customer because the requirements are different. There are still reasons to use Web Dynpro ABAP and I’m still recommending SAP NetWeaver Business Client, POWL (Power Lists), WDA Chips, FPM based on the given environment of the customer. And obviously there are also reasons for UI5.
    SAP already proves the usage of SAPUI5
    In general, I see two different use cases here: Developing custom applications vs. adopting applications from SAP.
    In the one case, customers want recommendations on development environments and UI technologies that consider their development requirements and existing conditions (e.g. existing skills, given implementations). SAPUI5 is a great UI technology and there are some special aspects that make the decision obviously easy. If I want to create simple business applications that can be connected with my SAP system easily, especially in combination under responsive conditions on multiple devices and targeted for casual and/or occasional users UI5 might be the right choice for many.  Exactly this pattern is what many customers are searching for these days. So, the recommendation for UI5 comes quite often.
    Whether or not SAP proves the usage of SAPUI5 in their own world is to me more connected to the use case where customers want to adopt SAP applications. And in deed, SAP is using SAPUI5. There are hundreds of SAP Fiori applications that have been built with SAPUI5 and there have been a lot of other applications developed using SAPUI5, too. And again, there is a huge need for applications for casual and/or occasional users, so that’s a big reason for SAP to create such applications.
    Websites vs. Business Applications
    This discussion was triggered by some statements in twitter, that SAP sites such as sap.com, SAP UX Explorer or the latest mobile conference app are not developed using UI5. Actually I see these to be websites but not business applications. I have never told a customer to build a website in UI5 and I would continue to do so.
    Maybe we need to discuss the difference between a website and a business application. I guess it is not easy to find a common understanding here, as the borderlines between several worlds have disappeared in the last years.
    Some years ago it was more or less easy to differ between:
    Native desktop applications running on a specific desktop OS
    Native mobile applications running on a specific mobile OS
    Browser-based applications running in specific browsers
    Websites, basically running on many browsers
    In the first three categories we saw business applications. 1 and 2 were selected especially when specific functions of the device and OS where needed to be accessed (for example the camera of the mobile device, the fast rendering capability of the desktop). 3 was also used for business applications but in most cases on desktop browsers.
    Today, one can develop browser-based applications that look like native applications and even can access the devices like native applications. Responsive design breaks the borderlines even more. Now, browser-based content can be rendered perfectly on a desktop browser as well as on a mobile phone and a user might even not be able to judge whether it was originally intended to be developed for the one or the other.
    So maybe there is no big difference anymore between websites and browser-based applications. But there is still a difference between browser-based applications and browser-based business applications, where additional requirements such as integration into business systems are drivers. Here I see SAPUI5 as a very cool UI technology.
    That’s just my 2 (personal) cents,
    JJ

  • How to run sapui5 components in a native dynpro?

    Hello,
    I like to run sapui5 components in a native Dynpro - is that principle possible? For first example i want to implement the description from this site http://scn.sap.com/docs/DOC-48653 (How to Create and Run a Simple SAPUI5 Application from Scratch within 20 Seconds) via HTML-View in a native ABAP-Dynpro:
    This is, what I have done till now:
    - Dynpro with CustomContainer
    - PBO for dynpro: create object instanz for  cl_gui_custom_container and  cl_gui_html_viewer
    - Tx SMW0 - WebRepository: HTML-Template for my site (html code see example above)
    - Tx SMW0 - WebRepository: Binäry data for sapui5 javascript file (here I used "sap-ui-core-all.js")
    When I now start my report do display the html file, the html viewer works, but the button "Hello World" doesn't appear?
    Here my questions:
    - is it principle possible to use sapui5 components in a custom container with html viewer in a native ABAP-Dynpro?
    - what ist the best way (where ist best place) for storing the needed sapui5 files?
    - which sapui5 files are needed?
    At the end, I only want to show charts e.g. with the MaKit-control in a custom container with html viewer!
    Thanks a lot for every hint or tip!
    Best regards
    martin

    After adding/removing components to/from a panel try:
    panel.revalidate();
    panel.repaint() // sometimes this is also needed, I'm
    not sure whyI'm not certain, but I think that panel.revalidate() implicitly calls repaint() only if something actually changed in the layout. If nothing changed, it sees no reason to repaint; hence, if something changed in appearance but not in layout, you have to repaint it yourself.
    Or something like that. I'm no expert. ;)

  • In case of bookmarks.Hash routing not working with SAPUI5

    Hi All,
    I have the below code with in SAPUI5
    The issue is that the url is correctly set when navigation from entry screen to detailed screen and also proper navigation happens, but when detailed screen is bookmarked the navigation always takes back to entry screen.
    For example:
    In my entry screen below I enter 'hi' then press enter to navigate to deatiled screen and you can see that both URL and navigation are fine
    But now if I bookmark or enter the URL 'http://localhost:8001/#/detailedScreen/1234' directly then instead of navigating to detailed screen, I am taken to entry screen.
    Below is the code.
        App.js
        (function () {
            'use strict';   
            //registering the module path
            jQuery.sap.registerModulePath('appointy', 'javascript/appointy');   
            $.sap.require('sap.ui.core.routing.HashChanger');
            $.sap.require('sap.ui.core.routing.Route');
            $.sap.require('sap.ui.core.routing.Router');
            //Somewhere at the start of your application
            var oRoutes = {
                // name used for listening or navigating to this route
                "searchScreen": {
                    "pattern": "detailedScreen/{id}" // will be the url and from has to be provided in the data
                "catchAll": {
                    "pattern": ":all*:"
            var oRouter = new sap.ui.core.routing.Router(oRoutes);
        //this is used to retrieve the instance again
            oRouter.register("appRouter");
        //starts reacting on the hashchange + parses the current hash and notifies callbacks
            oRouter.initialize();
            //var iRouter = sap.ui.core.routing.Router.getRouter("appRouter");
            oRouter.attachRouteMatched(function (oEvent) {
                if (oEvent.getParameter("name") == "searchScreen") {
                    _selectItemWithId(oEvent.getParameter("arguments").id);
                if (oEvent.getParameter("name") == "catchAll") {
                    _setContent(mContent.home);
                //bind the this pointer to the callback
            }, this);
            var _selectItemWithId = function (id) {
                //implementation eg: select an item in a list
                var homeNext = sap.ui.view({
                    type: sap.ui.core.mvc.ViewType.JS,
                    id: 'homeNext',
                    viewName: 'appointy.HomeNext'
                homeNext.getController().parameterId = id;
                sap.ui.getCore().byId("oShell").setContent(homeNext);   
            // build the application root view and place on page
            var oRootView = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                id: 'mainView',
                viewName: 'appointy.Main'
            var _setContent = function (oContent) {
                iShell.setContent(oContent, true);
            var mContent = {};
            var iShell = sap.ui.getCore().byId("oShell");
            mContent.home = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                id: 'homeView',
                viewName: 'appointy.Home'
            //setting initial content for oSHELL
            _setContent(mContent.home);
            //switching contents of oSHELL
            iShell.attachWorksetItemSelected(function (evt) {
                var key = evt.getParameter("key");
                iShell.setContent(mContent[key]); // switch content
            oRootView.placeAt('content');  
    Main.view.js
        (function () {
            'use strict';
            sap.ui.jsview('appointy.Main', {
                getControllerName: function () {
                    return 'appointy.Main';
                createContent: function (oController) {
                    var oShell = new sap.ui.ux3.Shell('oShell');
                    oShell.addWorksetItem(new sap.ui.ux3.NavigationItem({
                        key: "home",
                        text: "Home"
                    return oShell;
                //local handling of events of this View
            sap.ui.controller('appointy.Main', {
                onInit: function () {
                onBeforeRendering: function () {
                onAfterRendering: function () {
                onExit: function () {
                model: null   
    Home.view.js
    (function () {
        'use strict';
        sap.ui.jsview('appointy.Home', {
            getControllerName: function () {
                return 'appointy.Home';
            createContent: function (oController) {
                var oSearchField = new sap.ui.commons.SearchField('js-business-search', {
                    search: [ oController.onSearch, oController ]
                //oSearchField.attachSearch(oController.onSearch);  --> Alternative way to attach event trigger to the searchField
                var oLayout = new sap.ui.commons.layout.VerticalLayout({
                    width : "100%"
                oLayout.addContent(oSearchField);
                return oLayout;
        sap.ui.controller('appointy.Home', {
            onSearch: function(oEvent) {   
                //using Routing example
                var changeURL = new sap.ui.core.routing.HashChanger ();
                var hash = 'detailedScreen' + '/' + oEvent.getParameter("query")
                changeURL.setHash(hash);
            onInit: function () {
            onBeforeRendering: function () {
            onAfterRendering: function () {
            onExit: function () {
            model: null
    HomeNext.view.js
    (function () {
        'use strict';
        sap.ui.jsview('appointy.HomeNext', {
            getControllerName: function () {
                return 'appointy.HomeNext';
            createContent: function (oController) {
                var oLabel = new sap.ui.commons.Label("l2");
                //oLabel.setText(sap.ui.getCore().byId('js-business-search').getValue());
                oLabel.setDesign(sap.ui.commons.LabelDesign.Bold);
                var oLayout = new sap.ui.commons.layout.VerticalLayout({
                    width : "100%"
                oLayout.addContent(oLabel);
                return oLayout;
          sap.ui.controller('appointy.HomeNext', {
            onInit: function () {
            onBeforeRendering: function () {
                var that = this,
                    oLabel = sap.ui.getCore().byId('l2');
                oLabel.setText(that.parameterId);
            onAfterRendering: function () {
            onExit: function () {
            showAlert: function(sChannelId, sEventId, oParam) {
                alert(oParam.searchQuery);
            parameterId: null,
            model: null
    Regards,
    Chidan

    You can open the JSBin in "Output Only (with live reload)" mode in a separate window, and in that window (tab) the URL can change.
    Here is a incomplete routing sandbox on JSBin (open each in a separate window, note that JSBin may want to update the revision from 3 to 4):
    Edit URL: http://jsbin.com/bamuh/3/edit?js
    Output URL: http://jsbin.com/bamuh/3#square
    (change the hash manually to #circle to see the routing trigger)
    Enjoy,
    Shawn

  • How to create and use Data Vault with HTML/JavaScript (SAPUI5) for Mobile Apps?

    Hello,
    I am creating a demo Enterprise Mobile App, for cross platform and I want to use the Data Vault.
    I am not able to figure out how to implement the Data Vault with HTML/JavaScript i.e. SAPUI5 for cross platform mobile apps I have a tutorial, but it is for Android based apps. Where as I want it for iOS as well. I guess, in this case, implementing the Data Vault using SAPUI5 over HTML and JavaScript would be  better.
    If anyone has any links or sample code to implement Data vault in HTML/JavaScript (SAPUI5) or specific for iOS apps, it would be great.
    Thank you.

    Hi,
    This is the "SAP Mobile Documents" community, so this seems to be the wrong place for asking your question related to Data Vault / SAPUI5.
    Maybe you should post your question here: http://scn.sap.com/community/developer-center/front-end.
    best regards,
    Ingo

  • SAPUI5 Chart not working in OverlayContainer

    Hi Experts,
    I am trying to show a Bar graph in an Overlay Container. But the same is not shown up in the screen. I checked the inspect element property, and the SVG object is rendered. Any Hope? I am adding my codes below.
    var overlay;
    jQuery.sap.require("sap.viz.ui5.Bar");
    jQuery.sap.require("sap.viz.ui5.data.FlattenedDataset");
    sap.ui.jsview("overlay.Main", {
      /** Specifies the Controller belonging to this View.
      * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
      * @memberOf overlay.Main
      getControllerName : function() {
      return "overlay.Main";
      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
      * Since the Controller is given to this method, its event handlers can be attached right away.
      * @memberOf overlay.Main
      createContent : function(oController) {
      overlay = new sap.ui.ux3.OverlayContainer();
      return new sap.ui.commons.Button({
      text : "Press for overLay",
      press : function(){
      overlay.addContent(getChart());
      overlay.open();
    function getChart(){
      var oModel = new sap.ui.model.json.JSONModel({
      businessData : [
      {Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
      {Country :"China",revenue:338.29,profit:133.82, population:1339724852},
      {Country :"France",revenue:487.66,profit:348.76, population:65350000},
      {Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
      {Country :"India",revenue:170.93,profit:117.00, population:1210193422},
      {Country :"United States",revenue:905.08,profit:609.16, population:313490000}
        // A Dataset defines how the model data is mapped to the chart
      var oDataset = new sap.viz.ui5.data.FlattenedDataset({
      // a Bar Chart requires exactly one dimension (x-axis)
      dimensions : [
      axis : 1, // must be one for the x-axis, 2 for y-axis
      name : 'Country',
      value : "{Country}"
      // it can show multiple measures, each results in a new set of bars in a new color
      measures : [
         // measure 1
      name : 'Profit', // 'name' is used as label in the Legend
      value : '{profit}' // 'value' defines the binding for the displayed value  
      name : 'Revenue',
      value : '{revenue}'
      // 'data' is used to bind the whole data collection that is to be displayed in the chart
      data : {
      path : "/businessData"
        // create a Bar chart
        // you also might use Combination, Line, StackedColumn100, StackedColumn or Column
        // for Donut and Pie please remove one of the two measures in the above Dataset. 
      var oBarChart = new sap.viz.ui5.Bar({
      width : "80%",
      height : "400px",
      plotArea : {
      //'colorPalette' : d3.scale.category20().range()
      title : {
      visible : true,
      text : 'Profit and Revenue By Country'
      dataset : oDataset
        // attach the model to the chart and display it
      oBarChart.setModel(oModel);
      return oBarChart;
    Regards
    Sreehari

    Hi Wenjun,
    Can I do the same for Bullet charts?
    This is my code
    sap.ui.controller("sap.ui.demo.myFiori.view.Master", {
      onInit : function(oEvent) {
        var oVizFrame = this.getView().byId("idVizFrameBullet_with_forecast_and_additional_value");
        var oPopOver = this.getView().byId("idPopOver");
        var oModel = new sap.ui.model.json.JSONModel({
          "Products":[
                     "Part no.": ["Product1","level1"],
                     "Profit": 100,
                     "Forcast": 200,
                     "Current": 20,
                     "Trigger": 50,
                     "KabanOrder": 0,
                     "Trigger3": 100,
                     "Trigger4": 512,
                       "Part no.": ["Product2","level2"],
                       "Profit": 159,
                       "Forcast": 140,
                       "Current": 50,
                       "Trigger": 30,
                       "KabanOrder": 70,
                       "Trigger3": 100
                       "Part no.": ["Product3","level3"],
                       "Profit": 129,
                       "Forcast": 120,
                       "Current": 10,
                       "Trigger": 15,
                       "KabanOrder": 0,
                       "Trigger3": 100
                       "Part no.": ["Product4","level4"],
                       "Profit": 58,
                       "Forcast": 60,
                       "Current": 80,
                       "Trigger": 20,
                       "KabanOrder": 20,
                       "Trigger3": 100
                       "Part no.": ["Product5", "level5"],
                       "Profit": 149,
                       "Forcast": 120,
                       "Current": 20,
                       "Trigger": 10,
                       "KabanOrder": 40,
                       "Trigger3": 100
                       "Part no.": ["Product6","level6"],
                       "Profit": 49,
                       "Forcast": 60,
                       "Current": 65,
                       "Trigger": 40,
                       "KabanOrder": 40,
                       "Trigger3": 100
                       "Part no.":  ["Product7","level7"],
                       "Profit": 58,
                       "Forcast": 60,
                       "Current": 80,
                       "Trigger": 20,
                       "KabanOrder": 20,
                       "Trigger3": 100
                       "Part no.": ["Product8","level8"],
                       "Profit": 149,
                       "Forcast": 120,
                       "Current": 20,
                       "Trigger": 10,
                       "KabanOrder": 40,
                       "Trigger3": 100
                       "Part no.":  ["Product9","level9"],
                       "Profit": 49,
                       "Forcast": 60,
                       "Current": 65,
                       "Trigger": 40,
                       "KabanOrder": 40,
                       "Trigger3": 100
        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
           dimensions: [{
          axis:1,
             name: 'Part no.',
             value: "{Part no.}"
          axis:1,
             name: 'Profit',
             value: "{Profit}"
           measures: [
             {group:1,
               name : 'Current',
               value : '{Current}'
             {group:2,
               name : "Trigger",
               value : "{Trigger}"
             {group:3,
               name : 'KabanOrder',
               value : '{KabanOrder}'
             {group:3,
               name : "Trigger3",
               value : "{Trigger3}"
           data: {
             path: "/Products"
        oVizFrame.setVizProperties({ 
          plotArea: {
         colorPalette :  ['#CC0000','#339966','#66CC99'],
          legend : {
            title: {visible : true}
              title: {
                  visible: true,
                  text: 'Title'
        oVizFrame.setDataset(oDataset);
    //    oVizFrame.attachInitialized(this,function(){
    //     align=function(){
    //     window.setTimeout (function (){
    //     $('.v-forecast').each( function( i, val ) {
    //      wi=$(this).next().attr('width');
    //      $(this).attr('width',wi);
    //      tr=$(this).next().attr('transform');
    //      tr=tr.substring(0,tr.indexOf(',')) +')';
    //      $(this).attr('transform',tr);
    //     }, 500);
    //     $(window).resize(align);
    //     align();
    //     $('.v-m-root>defs:first').html('<linearGradient y2="1" x2="1" id="grad" x1="1" y1="0" spreadMethod="repeat">\
    //     <stop stop-color="rgb(255, 255, 255)" offset="0" stop-opacity="0"/>\
    //     <stop stop-color="rgb(0, 0, 0)" offset="0.0217"/>\
    //     <stop stop-color="rgb(0, 0, 0)" offset="0.0517"/>\
    //     <stop stop-color="rgb(255, 255, 255)" offset="0.0717" stop-opacity="0"/>\
    //     </linearGradient>');
        oVizFrame.setModel(oModel);
       var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
         'uid' : "primaryValues",
         'type' : "Measure",
         'values' : ["Trigger","KabanOrder"
                    // ,"Trigger3",
        feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
          'uid' : "valueAxis",
          'type' : "Dimension",
          'values' : ["Part no.","Profit"]
        feedTargetValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
          'uid' : "targetValues",
          'type' : "Measure",
          'values' : ["Current"]
        feedForecastValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
          'uid' : "forecastValues",
          'type' : "Measure",
          'values' : ["Trigger3"]
        oVizFrame.addFeed(feedPrimaryValues);
        oVizFrame.addFeed(feedAxisLabels);
        oVizFrame.addFeed(feedTargetValues);
      oVizFrame.addFeed(feedForecastValues);
        oPopOver.connect(oVizFrame.getVizUid());
    I am getting this error
    Failed to create chart:[50005] - categoryAxis : does not meet the minimum or maximum number of feeds definition.

  • Deep Creation is not working in SAPUI5

    Hi Gurus,
    I have created GW service with deep_create_entity but I am not able to post value from SAPUI5 oMobel.create() method
    I am waiting for response
    thanks in advance

    Thanks Santhosh.
    I am going through the First help link, I have already set the Property(Standard mode - while Launching Portal in new window) from Portal iview, and "Handover Portal stylesheet" to 'NO'
    I hv already gone the remaining Forum threads and Notes as well, but i did not get exact any other help to fix this issue.
    I am getting different Error now - Unable to get property 'addDelegate' of undefined or null reference
    Pls. let me know if you can help me.
    Thanks
    Sathya

Maybe you are looking for

  • Java.sql.SQLException: Login failed for user 'ccms'.

    Windows Server 2003 R2 Enterprise x64 Edition service pack 1 SQL Server 2000 Enterprise edition 32 bit, SP4 : 2000.8.00.2039 jdbc driver: jtds connection string: jdbc:jtdsqlserver://ZH-DATA-4:1434/[dbname];instance=[instance name] the connectivity wo

  • Down Payment entries not reflecting in J1INMIS report

    Dear Guru's, TDS deducted at  the time of down payment made to vendor is not reflecting in J1inmis report. Is J1INMIS report does not reflect down payment entries? What will be the reason for this? Which alternative report to followed for J1INMIS !!!

  • How to maintain entry in V_T160M_CS

    Hi, Can anybody help me to know, how to maintain entry in table V_T160M_CS? Raj

  • I do not know how to repair broken links

    Greetings,   I am attempting to repair all broken links for a assignment in Dreamweaver CS5  C7  and I could not find any instruction in the text  on how to repair broken links.. How is it done?

  • Two users editing in the same project?

    We are using PP CS6 Mac and i would like to know if this is possible. The project is on a server that both users have access to. Is it possible for user A to edit sequence 1 and 2 and user B to edit sequence 3 at the same time?