Aplikasi UI5 berbasis SAP MTA

Pambuka - kirim iki minangka bagéan saka Aplikasi SAP Multi-Target (MTA)  lan Program Integrasi UI5  seri.

Ing Aplikasi UI5, kita bakal ngembangake aplikasi adhedhasar MVC lan bakal nelpon API Node.js, sing lagi wae digawe. Kanthi cara iki, kita bakal ngembangake Aplikasi UI5 berbasis SAP MTA.

Struktur Aplikasi UI5

Kaya sing bisa dideleng ing ngisor iki, ing folder App Multichain_logon, kita duwe akeh file lan folder. Ing bagean iki kanggo SAP MTA adhedhasar Aplikasi UI5, kita bakal utamané fokus ing Main.view.xml, Main.controller.js lan model.js.

Aplikasi UI5 berbasis SAP MTA 01

MODEL.JS

Ing file iki, kita wis nggawe model global sing bakal digunakake kanggo nelpon API Node.js, kaya sing kapacak ing ngisor iki:

sap.ui.define(["sap/ui/model/json/JSONModel", "sap/ui/Device" ], fungsi (JSONModel, Piranti) {"nggunakake ketat"; bali {createDeviceModel: fungsi () {var oModel = new JSONModel(Device); oModel.setDefaultBindingMode("OneWay");bali oModel;}, //Model Konfigurasi UI5 createAppConfigModel: function () {var appData = {"protocol": "https://", "apiUrl" : "9t8mhv7z1qbwm2yjchain-logon-xs-js.cfapps.sap.hana.ondemand.com"};var oModel = new JSONModel(appData); bali oModel;}};});

 

Kanggo nggawe model iki global, kita kudu nyetel ing file component.js. Tambah kode sing diwenehi ing ngisor
init: fungsi () kanggo padha:

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

MAIN.VIEW.XML

Iki minangka conto proyek sing wis digawe sistem logon. Butuh jeneng pangguna, Sandi lan cap wektu UTC lan disimpen ing Multichain kanthi Multichain Timestamp. Data sing dianyari banjur ditampilake minangka tabel ing kontrol logon. Kode tampilan xml kasebut ing ngisor iki:

/results}"> <ToolbarSpacer/> </content> </Toolbar> </headerToolbar> <columns> <Column width="18em"> <Text text="User ID"/> </Column> <Column width="50em"> < Teks teks = "Sandi"/> </Column> <Column width="50em"> <Text text="Login Timestamp"/> </Column> <Column width="4em"> <Teks teks="Multichain Timestamp" /> </Column> </columns> <item> <ColumnListItem> <cells> <Text text="{loginData>USERNAME}"/> <Text text="{loginData>PASSWORD}"/> <Teks teks=" {loginData>TIMESTAMP}"/> <Teks teks="{loginData>BLOCKTIME}"/> </cells> </ColumnListItem> </item> </Tabel> </content> </Page> </pages> < /App> </Shell> </mvc:View>

MAIN.CONTROLLER.JS

Tampilan sing wis ditetepake sadurunge bakal nggunakake controller.js diwenehi kanggo ngleksanakake telpon API Node.js

sap.ui.define(["sap/ui/inti/mvc/Controller"], fungsi (Controller) {"nggunakake ketat";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(setelan).rampung(fungsi (respon) {// that.getView().byId("idOutput").setText(respon); var results = [];respon = JSON.parse(respons) ; response.updates.forEach(fungsi (temp) { if (temp.update.USERNAME !== undefined && temp.update.USERNAME !== "") { results.push({ "USERNAME": temp.update.USERNAME , "SAndhi" : temp.update.PASSWORD, "TIMESTAMP": temp.update.TIMESTAMP, "BLOCKTIME": temp.timestamp }); }}); var jsonModel = new sap.ui.model.json.JSONModel({hasil: hasil}); that.getView().byId("idTable").setModel(jsonModel, "loginData"); sap.m.MessageBox.success("Login Bukti Dimuat Berhasil!"); }); }, 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("/protokol"); 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": "*"}, sukses: fungsi (oResp) { sap.m.MessageBox.success ("Blok Dianyari Kasil!"); }, kesalahan: fungsi (oError) {sap.m.MessageBox.error("Blok Dianyari Gagal!");}}); }}); });

Layar Output Aplikasi UI5

Kaya sing wis dibahas ing ndhuwur, layar sing diwenehake bakal dadi layar pungkasan saka Aplikasi UI5 kita. Saiki, mung rong tombol sing diaktifake lan digunakake kanggo nganyari blok (Tombol Logon) utawa kanggo entuk bukti sejarah (Tombol Priksa Sejarah). Uga, sumber sing ditampilake ing kene mung kanggo ilustrasi lan mung telpon MTA sing dileksanakake ing skenario sing diwenehake.

Aplikasi UI5 berbasis SAP MTA 02

Pengarang


komentar

Ninggalake a Reply

Panjenengan alamat email ora bisa diterbitake. Perangkat kothak ditandhani *

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.

Go Coding