Quantcast
Channel: SCN : All Content - All Communities
Viewing all articles
Browse latest Browse all 7846

How to create a table inside JSON View

$
0
0

Hi All,

 

I am trying to create a UI5 app inside which i want to fetch the data using SAP gateway service which i want to embed into JSON view to be displayed inside a table. I am totally new to JSON & UI5 so please let me know where i am incorrect:

 

Index.html code:

 

<!DOCTYPE HTML>

<html>

  <head>

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

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

 

  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.ui.commons,sap.ui.table"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <script>

  sap.ui.localResources("ui5trial");

  var view = sap.ui.view({id:"idSalesOrder1", viewName:"ui5trial.SalesOrder", type:sap.ui.core.mvc.ViewType.JSON});

  view.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

 

JSON view file code:

 

{

  "Type":"sap.ui.core.mvc.JSONView",

  "controllerName":"ui5trial.SalesOrder"

}

 

var oTable = new sap.ui.table.Table({

  title: "Sales Order Table Details",

  id: this.createId("MyTable1"),

  selectionMode:sap.ui.table.Table.SelectionMode.Single });

 

oTable.addColumn( new label: new sap.ui.commons.Label({text: "Sales Order No."}),

   template: new sap.ui.commons.TextField().bindProperty("value","OrderId"));

 

oTable.addColumn( new label: new sap.ui.commons.Label({text: "Document Type"}),

   template: new sap.ui.commons.TextField().bindProperty("value","DocumentType"));

 

oTable.addColumn( new label: new sap.ui.commons.Label({text: "Document Date"}),

   template: new sap.ui.commons.TextField().bindProperty("value","DocumentDate"));

 

oTable.addColumn( new label: new sap.ui.commons.Label({text: "Customer Id"}),

   template: new sap.ui.commons.TextField().bindProperty("value","CustomerId"));

 

Controller file code:

 

jQuery.sap.require("util.Func");

sap.ui.controller("ui5trial.SalesOrder", {

 

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf ui5trial.SalesOrder

*/

 

  onInit: function() {

  var oModel = new sap.ui.model.json.JSONModel(serviceUrl);

  var oData = oModel.getJSON();

  oTable.setModel(oModel);

  oTable.bindRows(oData);

  }

 

Func.js file code:

 

jQuery.sap.declare("util.Func");

 

function getUrl(sUrl){

  if (sUrl == ""){

  return sUrl;

  }

 

  if (window.location.hostname == "localhost"

  || window.location.hostname == "https://sapes1.sapdevcenter.com"){

  return 'proxy' + sUrl;

  }

}

//Service Root URL

// "https://sapes1.sapdevcenter.com:443/sap/opu/odata/sap/ZGWSAMPLE_SRV/?sap-client=520";

//Extract the relative URL to use this application for deployment on any Web Server

var serviceUrl = getUrl("/sap/opu/odata/sap/SALESORDERXX/?sap-client=520");


Viewing all articles
Browse latest Browse all 7846

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>