SAPUI5/OpenUI5 Tile Container Example

<!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="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <!-- by Denise Nepraunig @denisenepraunig -->
  
  <!-- example for a SAPUI5 MVC XML view with JSON data from a file
       and data binding based on the demokit example from sapui5:
       https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/samples
       -->

  <script>
    // Best practice would be to set this stuff up in an Component.js
    // but let's not over-complicate stuff for demonstration purposes
    
    sap.ui.localResources("view");
    var app = new sap.m.App({
      initialPage: "idMain"
    });
    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });
    app.addPage(page);
    app.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

# SAPUI5 MVC example with JSON file databinding

This is a simple MVC example where we load JSON data from an external file
and then bind this data against a table.

This example is based on:
[SAPUI5 Demokit Tables](https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/sample)

<mvc:View
  height="100%"
  controllerName="view.Main"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Page
    showHeader="false"
    enableScrolling="false" >
    <TileContainer
      id="container"
      tileDelete="handleTileDelete"
      tiles="{/TileCollection}">
      <StandardTile
        icon="sap-icon://{icon}"
        type="{type}"
        number="{number}"
        numberUnit="{numberUnit}"
        title="{title}"
        info="{info}"
        infoState="{infoState}" />
    </TileContainer>
    <footer>
      <Toolbar>
        <ToolbarSpacer/>
          <Button text="Edit" press="handleEditPress" />
          <Button text="Busy state" press="handleBusyPress" />
        <ToolbarSpacer/>
      </Toolbar>
    </footer>
  </Page>
</mvc:View>

sap.ui.controller("view.Main", {

  onInit : function (evt) {
    // set mock model
    //var sPath = jQuery.sap.getModulePath("view.Main", "/data.json");
    //var oModel = new sap.ui.model.json.JSONModel(sPath);

    var oModel = new sap.ui.model.json.JSONModel("data.json");
    this.getView().setModel(oModel);
  },

  handleEditPress : function (evt) {
    var oTileContainer = this.getView().byId("container");
    var newValue = ! oTileContainer.getEditable();
    oTileContainer.setEditable(newValue);
    evt.getSource().setText(newValue ? "Done" : "Edit");
  },

  handleBusyPress : function (evt) {
    var oTileContainer = this.getView().byId("container");
    var newValue = ! oTileContainer.getBusy();
    oTileContainer.setBusy(newValue);
    evt.getSource().setText(newValue ? "Done" : "Busy state");
  },

  handleTileDelete : function (evt) {
    var tile = evt.getParameter("tile");
    evt.getSource().removeTile(tile);
  }
});

{
  "TileCollection" : [
    {
      "icon" : "hint",
      "type" : "Monitor",
      "title" : "Tiles: a modern UI design pattern for overview & navigation."
    },
    {
      "icon" : "inbox",
      "number" : "89",
      "title" : "Approve Leave Requests",
      "info" : "Overdue",
      "infoState" : "Error"
    },
    {
      "type" : "Create",
      "title" : "Create Leave Requests",
      "info" : "28 Days Left",
      "infoState" : "Success"
    },
    {
      "icon" : "travel-expense-report",
      "number" : "281",
      "numberUnit" : "euro",
      "title" : "Travel Reimbursement",
      "info" : "1 day ago"
    },
    {
      "icon" : "loan",
      "number" : "2380",
      "numberUnit" : "euro",
      "title" : "My Salary",
      "info" : "8 days ago"
    },
    {
      "icon" : "lab",
      "number" : "1",
      "numberUnit" : "Invention",
      "title" : "Test Lab Reports",
      "info" : "8 Days Ago"
    },
    {
      "icon" : "inbox",
      "type" : "Monitor",
      "title" : "Leave Request History"
    },
    {
      "type" : "Create",
      "title" : "Create Purchase Order",
      "info" : "890€ Open Budget",
      "infoState" : "Success"
    },
    {
      "icon" : "stethoscope",
      "number" : "3",
      "title" : "Yearly Health Check",
      "info" : "3 year overdue",
      "infoState" : "Error"
    },
    {
      "icon" : "meal",
      "type" : "Monitor",
      "title" : "Meal Schedule"
    },
    {
      "icon" : "cart",
      "number" : "787",
      "numberUnit" : "euro",
      "title" : "My Shopping Carts",
      "info" : "Waiting for Approval",
      "infoState" : "Warning"
    },
    {
      "icon" : "factory",
      "number" : "2",
      "numberUnit" : "Outages",
      "title" : "Factory Power Management",
      "info" : "Production On Hold",
      "infoState" : "Error"
    },
    {
      "icon" : "calendar",
      "title" : "Team Calendar"
    },
    {
      "icon" : "pie-chart",
      "number" : "5",
      "title" : "Financial Reports",
      "info" : "4 day ago",
      "infoState" : "Warning"
    }
  ]
}