SAPUI5/OpenUI5 MVC XML View example with data from JSON file

<!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://sapui5.netweaver.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
    function loadHolidays() {
      var result = new sap.ui.model.json.JSONModel({
        datelist: []
      });
      var oModel = new sap.ui.model.json.JSONModel();
      oModel.attachRequestCompleted(function() {
        var oFeiertageBerlin = oModel.getData().BE;
        var datelist = [];
        for (var prop in oFeiertageBerlin) {
          datelist.push(oFeiertageBerlin[prop].datum);
        }
        result.setData({
          datelist: datelist
        });
      });

      var jDatum = new Date();
      var jLink = "https://feiertage-api.de/api/?jahr=" + jDatum.getFullYear();
      oModel.loadData(jLink);

      return result;
    }

    var model = loadHolidays();
    sap.ui.getCore().setModel(model);

    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)

<sap.ui.core.mvc:View controllerName="view.Main"
    xmlns="sap.m"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc" >
    <Page title="This is a SAPUI5 MVC example">
        <content>
            <Table id="idProductsTable" noDataText="No Data" items="{/datelist}">
                <items>
                    <ColumnListItem counter="0">
                        <cells>
                            <Text text="{}" maxLines="0"></Text>
                        </cells>
                    </ColumnListItem>
                </items>
                <columns>
                    <Column>
                        <header>
                            <Text text="Date" maxLines="0"></Text>
                        </header>
                    </Column>
                </columns>
            </Table>
        </content>
    </Page>
</sap.ui.core.mvc:View>

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

// We don't need any controller code in our simple example
// but I left the code here for MVC-demonstration purposes

/**
* 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 view.Main
*/
// onInit: function () {
//   
//  },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf view.Main
*/
//	onBeforeRendering: function() {
//    
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf view.Main
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf view.Main
*/
//	onExit: function() {
//
//	}

});