Preface – This post is part of the SAP Multi-Target Application (MTA)  and UI5 Integration Programs  series.

UI5 App Structure

As it can be seen below, under our App folder Multichain_logon, we have many files and folders. In this section for  SAP MTA based UI5 Application, we will be mainly focusing upon Main.view.xml, Main.controller.js and model.js.

MODEL.JS

Under this file, we have made a global model which will be used to call the Node.js API, as shown below:

sap.ui.define([
  "sap/ui/model/json/JSONModel",
  "sap/ui/Device"
], function (JSONModel, Device) {
  "use strict";
  return {
    createDeviceModel: function () {
      var oModel = new JSONModel(Device);
      oModel.setDefaultBindingMode("OneWay");
      return oModel;
    },
    //UI5 Configuration model
    createAppConfigModel: function () {
      var appData = {
        "protocol": "https://",
        "apiUrl": "9t8mhv7z1qbwm2yjchain-logon-xs-js.cfapps.sap.hana.ondemand.com"
      };
      var oModel = new JSONModel(appData);
      return oModel;
    }
  };
});

To make this model global, we need to set it in the component.js file. Add given code under
init: function () for the same:

//set the app Config model
this.setModel(models.createAppConfigModel(), "AppConfig");

MAIN.VIEW.XML

This is a sample project for which we have made a logon system. It takes Username, Password and UTC timestamp and saves it in the Multichain with a Multichain Timestamp. The updated data is then shown as a table under the logon controls. The xml view code is mentioned below:

<mvc:View controllerName="Multichain_logon.Multichain_logon.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
  <Shell id="shell">
  <App id="app">
  <pages>
  <Page id="page" title="{i18n>title}">
  <content>
  <HBox>
  <VBox>
  <Text text="Enter your ID"/>
  <Input id="IdUsername" width="50%"/>
  <Text text="Enter your Password"/>
  <Input id="IdPassword" type="Password" width="50%"/>
  <HBox>
  <Button class="sapUiTinyMarginEnd" text="Create Account" enabled="false" press="onCreate"/>
  <Button class="sapUiTinyMarginEnd" text="Logon" press="onLogon"/>
  <Button class="sapUiTinyMarginEnd" text="Delete Logon" enabled="false" press="onDelete"/>
  <Button text="Check History" press="onHistory"/>
  </HBox>
  </VBox>
  <VBox>
  <Text text="Change the API Source Here"/>
  <RadioButtonGroup valueState="Warning">
  <buttons>
  <RadioButton id="RB4-1" text="OData Service Gateway"/>
  <RadioButton id="RB4-2" text="MTA"/>
  <RadioButton id="RB4-3" text="Cloud Foundry"/>
  </buttons>
  </RadioButtonGroup>
  </VBox>
  </HBox>
  <!--Table to show Block History-->
  <Table id="idTable" items="{loginData>/results}">
  <headerToolbar>
  <Toolbar>
  <content>
  <Title text="Proof of History" level="H2"/>
  <ToolbarSpacer/>
  </content>
  </Toolbar>
  </headerToolbar>
  <columns>
  <Column width="12em">
  <Text text="User ID"/>
  </Column>
  <Column width="12em">
  <Text text="Password"/>
  </Column>
  <Column width="12em">
  <Text text="Login Timestamp"/>
  </Column>
  <Column width="12em">
  <Text text="Multichain Timestamp"/>
  </Column>
  </columns>
  <items>
  <ColumnListItem>
  <cells>
  <Text text="{loginData>USERNAME}"/>
  <Text text="{loginData>PASSWORD}"/>
  <Text text="{loginData>TIMESTAMP}"/>
  <Text text="{loginData>BLOCKTIME}"/>
  </cells>
  </ColumnListItem>
  </items>
  </Table>
  </content>
  </Page>
  </pages>
  </App>
  </Shell>
</mvc:View>

MAIN.CONTROLLER.JS

The view that we have defined earlier will use the given controller.js to implement the Node.js API calls

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function (Controller) {
  "use strict";
  return Controller.extend("Multichain_logon.Multichain_logon.controller.Main", {
    onInit: function () {
      this.onHistory();
    },
    onHistory: function () {
      var that = this;
      var oModelAppConfig = that.getOwnerComponent().getModel("AppConfig");
      var sHTTPS = oModelAppConfig.getProperty("/protocol");
      var uri = oModelAppConfig.getProperty("/apiUrl");
      var sUrl = sHTTPS + uri + "/GET_PROOF_HISTORY";
      var settings = {
        "async": true,
        "crossDomain": true,
        "url": sUrl,
        "method": "GET",
        "headers": {
          "cache-control": "no-cache",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Headers": "*"
        }
      };
$.ajax(settings).done(function (response) {
// that.getView().byId("idOutput").setText(response);
var results = [];
response = JSON.parse(response);
response.updates.forEach(function (temp) {
if (temp.update.USERNAME !== undefined && temp.update.USERNAME !== "") {
results.push({
"USERNAME": temp.update.USERNAME,
"PASSWORD": temp.update.PASSWORD,
"TIMESTAMP": temp.update.TIMESTAMP,
"BLOCKTIME": temp.timestamp
});
}
});
var jsonModel = new sap.ui.model.json.JSONModel({
results: results
});
that.getView().byId("idTable").setModel(jsonModel, "loginData");
sap.m.MessageBox.success("Login Proof Loaded Successfully!");
});
},
onLogon: function () {
var that = this;
var USERNAME = this.getView().byId("IdUsername").getValue();
var PASSWORD = this.getView().byId("IdPassword").getValue();
var TIMESTAMP = Date.now();
var oModelAppConfig = that.getOwnerComponent().getModel("AppConfig");
var sHTTPS = oModelAppConfig.getProperty("/protocol");
var uri = oModelAppConfig.getProperty("/apiUrl");
var sUrl = sHTTPS + uri + "/UPDATE_OBJECT_HISTORY?USERNAME=" + USERNAME + "&PASSWORD=" + PASSWORD + "&TIMESTAMP=" + TIMESTAMP;
$.ajax({
"async": true,
"crossDomain": true,
"url": sUrl,
"method": "GET",
"headers": {
"cache-control": "no-cache",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*"
},
success: function (oResp) {
sap.m.MessageBox.success("Block Updated Successfully!");
},
error: function (oError) {
sap.m.MessageBox.error("Block Updated Failed!");
}
});
}
});
});

UI5 App Output Screen

As discussed above, the given screen will be the final screen of our UI5 App. As of now, only two buttons are enabled and they are used either to update the block (Logon Button) or to get the proof of history (Check History Button). Also, the sources shown here are only for illustrative purpose and only MTA calls are implemented in the given scenario.