Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Model loaded before table is rendered" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8">
  <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
          id="sap-ui-bootstrap" 
          data-sap-ui-theme="sap_bluecrystal" 
          data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"></script>
  <title>OpenUI5 Bin</title>
</head>
​
<body class="sapUiBody">
  <div id="uiArea"></div> 
</body>
</html>
 
​
 
//UI5 view
sap.ui.jsview("local.view", {
  getControllerName: function() {
    return "local.controller";
  },
  createContent: function(oController) {
    
    oController.loadData();
    
    var oTable = new sap.ui.table.Table({
      toolbar : new sap.ui.commons.Toolbar({
        items : [
          new sap.ui.commons.Button({
            text : "Load model",
            press: function(oEvent) {
              var thisTable = oEvent.getSource().getParent().getParent();
              oController.loadData(thisTable);
            }
          })
        ]
      }),
      rowSelectionChange: function(oEvent) {
        console.log(oEvent.getParameters().rowContext);
      }
    })
    .addColumn(this.getColumnTV("TestSuiteIid"))
    .addColumn(this.getColumnTV("SuitTestsName"))
    .addColumn(this.getColumnTV("Description"))
    .addColumn(this.getColumnTV("UpperLimit"))
    .addColumn(this.getColumnTV("LowerLimit"))
    .addColumn(this.getColumnTV("Unit"))
    .addColumn(this.getColumnTV("Status"))
    .addColumn(this.getColumnTV("SubTeststatus"))
    .addColumn(this.getColumnTF("ActualValue"))
    .bindRows("/");
​
    console.log("view.createContent() - table is created (not yet rendered)");
    return oTable;
  },
  onAfterRendering: function() {
    console.log("view.onAfterRendering() - everything is now rendered");
  },
  getColumnTV: function(field) {
    return new sap.ui.table.Column({
        label: new sap.ui.commons.Label({
            text: field
        }),
        template: new sap.ui.commons.TextView({
            text: "{" + field + "}",
            textAlign: sap.ui.core.TextAlign.Left
        }),
        name: field
    });
  },
  getColumnTF: function(field) {
    return new sap.ui.table.Column({
      label: new sap.ui.commons.Label({
        text: field
      }),
      template: new sap.ui.commons.TextField({
        value: "{" + field + "}",
        textAlign: sap.ui.core.TextAlign.Left
      }),
      name: field
    });
  }
​
});
​
//UI5 controller
sap.ui.controller("local.controller", {
  onInit: function() {
    console.log("controller.onInit() - table now rendered");
  },
  
  //loads data into model, and set model to table
  loadData: function() {
    var data = [{
      "TestSuiteIid": "17052540000121",
      "SuitTestsName": "Colour Test 1",
      "Description": "Colour Test 1",
      "UpperLimit": "50",
      "LowerLimit": "40",
      "Unit": "mm",
      "Status": true,
      "SubTeststatus": false,
      "ActualValue": "30"
    },{
      "TestSuiteIid": "17052540000121",
      "SuitTestsName": "Colour Test 1",
      "Description": "Colour Test 1",
      "UpperLimit": "50",
      "LowerLimit": "40",
      "Unit": "mm",
      "Status": true,
      "SubTeststatus": false,
      "ActualValue": "30"
    },{
      "TestSuiteIid": "17052540000121",
      "SuitTestsName": "Colour Test 1",
      "Description": "Colour Test 1",
      "UpperLimit": "50",
      "LowerLimit": "40",
      "Unit": "mm",
      "Status": true,
      "SubTeststatus": false,
      "ActualValue": "30"
    }];
    
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData(data);
    sap.ui.getCore().setModel(oModel);
    console.log("controller.loadData() - data is loaded");
  }
});
​
sap.ui.view({
  type: sap.ui.core.mvc.ViewType.JS,
  viewName: "local.view"
})
.placeAt("uiArea");
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
qualiturepro
0viewers