Skip to Content

SAPUI5 table binding is showing no content


I have a table binding in SAPUI5 but is showing no content please advice:

<!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>

<h><b>Applications</b></h><br><br>

<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*
/* =================================== */
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.responseText;
document.getElementById("myDiv").innerHTML= xmlHttp.responseText;



// 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: xmlDom});
oTable.setModel(oModel);
oTable.bindRows("/modelData");

// finally place the Table into the UI
oTable.placeAt("content1");


</script>


</head>
<body class='sapUiBody'>
<div id='content1'></div>

</body>

</html>

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Posted on Jun 01, 2014 at 11:53 PM

    HI Amr

    3. What is the result of

    /XMII/Runner?Transaction=ProjectsStatus/Transactions/ProjectsStatus&OutputParameter=JSONData&Content-Type=text/xml


    you have OutputParameter=JSONData but then Content-Type-text/xml


    are you getting JSON or XML?


    2. And what is the intent of giving us aData? It is not used. Am i right?


    3. To get help, please strip down your code to the part that is broken. We cannot help you when you just dump us many lines of codes.


    Thanks

    -D

    Add a comment
    10|10000 characters needed characters exceeded

    • I found a solution.

      var xmlHttp = new XMLHttpRequest();
      var xmlDom;
      /* xmlHttp.open( "GET", "/XMII/Runner?Transaction=ProjectsStatus/Transactions/ProjectsStatus&OutputParameter=JSONData&Content-Type=text/xml", false ); */
      xmlHttp.open( "GET", "/XMII/Runner?Transaction=ProjectsStatus/Transactions/ProjectsStatus_Applications&OutputParameter=JSONData&Content-Type=text/xml", false );
      xmlHttp.send();
      xmlDom = xmlHttp.responseText;
      var xmlDOMJSON = xmlHttp.responseXML;
      var opElement = xmlDOMJSON.getElementsByTagName("Row")[0].firstChild;
      var jsonData = eval(opElement.firstChild.data);
      var oModel = new sap.ui.model.json.JSONModel();
      oModel.setData({modelData: jsonData});
      oTable.setModel(oModel);
      oTable.bindRows("/modelData");
      // finally place the Table into the UI
      oTable.placeAt("content1");

      Now do you know how to edit the table - say you want to change a value in one of the rows- how can you save it?

  • Posted on Jun 03, 2014 at 02:38 AM

    Hi,

    Could you paste the value of 'xmlHttp.responseText'? When I tried your code, xmlHttp.responseText doesn't contain valid values.

    Best regards,

    Shilpa

    Add a comment
    10|10000 characters needed characters exceeded

    • Hi Amr,

      Please read the DM (Direct Message) that I sent to you and do as Dennis and I suggested. When the discussion goes to a new topic, create a new discussion. This helps people find the answers based on the subject and specific tags associated with each topic rather than stringing them together like spaghetti code (kudos to those who recognize the term! Yes, I have been around a while).

      Regards, Mike

      SAP Customer Experience Group - CEG

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.