Blog

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.

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

Introduction

To ease the problem of developers, SAP has provided MTA services where we directly call any API under node.js file and this node.js is then utilized by UI5 App as an API. Hence, we neither need any destination setup nor crucial APIs are getting exposed. Thus SAP Node.js Development in MTA is a very important concept.

SAP Node.js App Structure

As it can be seen below, under our App folder xs.js we have many files and folders. In this section we will be mainly focusing upon package.json, config.json and server.js.

PACKAGE.JSON

This is a file, where we define all the packages/libraries that will be used by our Node.js App. You can find some of them will be already defined/provided by SAP. You need to just add the one that you will be using with its version, as shown below:

{
  "dependencies": {
    "@sap/xsenv": "^1.2.9",
    "@sap/xsjs": "^4.0.1",
    "express": "~4.15",
    "passport": "~0.3.2",
    "@sap/xssec": "^2.1.11",
    "node-sap-logging": "0.3.0",
    "sap-hdbext-promisfied": "1.0.0"
  },
  "description": "my description",
  "devDependencies": {
    "@sap/xsjs-test": "^3.0.2"
  },
  "files": [],
  "main": "server.js",
  "name": "xs.js",
  "scripts": {
    "start": "node server.js",
    "test": "node testrun.js"
  },
  "engines": {
    "node": "8.x"
  },
  "version": "1.0.0"
}

CONFIG.JSON

This is a local JSON file created to store all the calling APIs details. These details are the APIs provided by Blockchain Application Enablement Service.

{

“tokenUrl”: “YOUR_TOKEN_URL”,

“blockServUrl”: “YOUR_BLOCKCHAIN_URL”,

“authorization”: “Basic YOUR_UNIQUE_API_KEY”

}

SERVER.JS

Under this file we will be writing all the Node.js codes, as shown below [just an example]:

/*eslint no-console: 0, no-unused-vars: 0*/		
"use strict";
var https = require("https");
var request = require("@sap/xsjs/node_modules/request");
var xsjs = require("@sap/xsjs");
var xsenv = require("@sap/xsenv");
var port = process.env.PORT || 3000;
var express = require("express");
var globalBody;
var app = express();
var configData = require("./config.json");
var options, data, token;

// setting Response
app.set('json spaces', 1400);
app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.setHeader("Access-Control-Allow-Headers",
    "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, access-control-allow-origin, cache-control"
  );
  next();
});

// configure token
var headeroptions = {
  method: 'GET',
  url: configData.tokenUrl,
  qs: {
    grant_type: 'client_credentials'
  },
  headers: {
    'cache-control': 'no-cache',
    Authorization: configData.authorization
  }
};

// get proof history
request(headeroptions, function (error, response, body) {
  if (error) throw new Error(error);
  data = JSON.parse(body);
  token = data.access_token;

var proofoptions = {
    method: 'GET',
    url: configData.blockServUrl + '/logon',
    headers: {
      'cache-control': 'no-cache',
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Authorization: 'Bearer ' + token
    }
  };
  request(proofoptions, function (error, response, body) {
    if (error) throw new Error(error);
    console.log(body);
    globalBody = body;
  });

});

// update proof history
app.get('/UPDATE_OBJECT_HISTORY', function (req, res, next) {
  var uname = req.query.USERNAME;
  var pass = req.query.PASSWORD;
  var dats = req.query.TIMESTAMP;
  // Get Token
  var tokenoptions = {
    method: 'GET',
    url: configData.tokenUrl,
    qs: {
      grant_type: 'client_credentials'
    },
    headers: {
      'cache-control': 'no-cache',
      Authorization: configData.authorization
    }
  };
    request(tokenoptions, function (error, response, body) {
      if (error) throw new Error(error);
      data = JSON.parse(body);
      token = data.access_token;
    var	dataoptions = {
        method: 'PATCH',
        url: configData.blockServUrl + '/logon',
        headers: {
          'cache-control': 'no-cache',
          'Content-Type': 'application/json',
          Accept: 'application/json',
          Authorization: 'Bearer ' + token
        },
        body: {
          USERNAME: uname,
          PASSWORD: pass,
          TIMESTAMP: dats
        },
        json: true
      };

      request(dataoptions, function (error, response, body) {
        if (error) throw new Error(error);
          res.json(globalBody);
      });
  });
});

// send proof history as response
app.get('/GET_PROOF_HISTORY', function (req, res, next) {
  res.json(globalBody);
});

options = {
  anonymous: true, // remove to authenticate calls
  auditLog: {
    logToConsole: true
  }, // change to auditlog service for productive scenarios
};

// configure token HANA
try {
  options = Object.assign(options, xsenv.getServices({
    hana: {
      tag: "hana"
    }
  }));
} catch (err) {
  console.log("[WARN]", err.message);
}

// configure UAA
try {
  options = Object.assign(options, xsenv.getServices({
    uaa: {
      tag: "xsuaa"
    }
  }));

Once, we are done with the Node.js development we need to run our file, then only we will be able to access it. For that we will run it as shown below:

Once, we will run it, we will get an API in node.js console and the same will be utilized in the UI5 App.

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

To setup MTA, we will initially need access of SAP Web IDE. Once you have access of the SAP Web IDE, follow the given steps to configure an MTA application:

Step 01: Open your web IDE and right click on your workspace and click Project from Template under New as shown below:

Step 02: Choose category as All categories, environment as Cloud Foundry and search Multi-Target Application as shown below:

Step 03: Select Multi-Target Application and click Next. Give a project name and its description in upcoming screens and also check mark “Use HTML5 Application Repository” as shown below and click Finish:

This project will be empty as of now with only one .yaml file.

Step 04: For our UI5 App, we will need an HTML5 Module. Right click on your project and select HTML5 Module under New, as shown below:

Select Category as SAP Fiori Application and search UI5. Select SAPUI5 Application as shown below:

Later, give a Module Name and Namespace for UI5 application. Then proceed to further screens and finish. It will add a HTML module under your MTA application. In our case, we have kept both names same as shown below:

Step 05: For our Node.js App, we will need a Node.js Module. Right click on your project and select Node.js Module under New, as shown below:

Give a module name (xs.js, in our case), a description, and check mark “Enable XSJS support” as shown below, and click finish:

Step 06: Now, we are ready to push our App to Cloud Foundry so that the API that we are going to make is always up and accessible worldwide. For this, we will change the Project Settings so that our project points to the correct cloud foundry settings.

Right click on your project and click Project Settings under Project as shown below:

Here, you need to click on Cloud Foundry under Project section and just select the available API Endpoint. It will bring all other data as shown below [This will be prefilled unlike the image shown below]:

Now, we are ready to deploy/build our project. For that just click Build as shown below, it will take care of everything by itself.

That’s it. Now, we are ready to work on our coding part of the API.

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

Introduction

A Multi-Target Application (SAP MTA) is a package comprised of multiple libraries, application and resource modules. These have been created using different technologies and deployed to different runtimes but have a common life-cycle. You can bundle different modules together, describe them along with their inter-dependencies to other modules, services, and interfaces, and package them in an Multi-Target Application(MTA) . Please read MTA Documentation by SAP for more info.

A Multi-Target Application can have both UI5 and other open source app implementation. We can deploy Java, Node.js and all other SAP cloud platform services.

SAP MTA Architecture

It is clear from the architecture flow diagram above that using our UI5 App, we will be calling a Node.js API which in return will be calling a Blockchain Application Enablement Service. This Enablement Service will help us to communicate with the Multichain environment. Both this UI5 App and Node.js files will co-exist under MTA Application that we will discuss in upcoming sections.

Prerequisites and Restrictions

We need to consider the following limits for the SAP MTA deployment on SAP Cloud Foundry deploy service:

• Maximum size of the MTA archive: 4 GB
• Maximum size of MTA module content: 4 GB
• Maximum size of MTA resource content: 1 GB
• Maximum size of MTA descriptors (mtad.yaml and MANIFEST.MF): 1 MB

References

To learn more about SAP MTA, we recommend to go through following SAP official documentations: