UI5 lesson4

https://github.com/crazko/ui5lessons

Content

use extended JSON model
use BSP app to run UI5 app
load data from SAP server

usage of REST service
send data in JSON by wxtended ABAP class

based on tutorial

JSON Model

create new file assets/js/newJSONModel.js
load it in index.html
edit model usage in Component.js

var oModel = new myJSONModel;
oModel.loadDataNew('path/to/request_handler', this._fnSuccess, this._fnError);

implement _fnSuccess and _fnError methods

use MessageBox object to show alert with message

Rest Service

create new class Z_XX_REQUEST_HANDLER
implement interface IF_HTTP_EXTENSION
redefine method HANDLE_REQUEST
try to send some text to output

use server->response->set_cdata() method

create new service in SICF transaction
use path default_host/sap/bc

create new sub_element
use your class in Handler List
active and test the service

DB Table

create new DB table
structure based on inbox.json - columns:

name
description
subject
status
sent
content

insert some dummy data

Class Code

copy code to handle_request method
test service

implement code to read your DB table
insert data to ls_response structure
send structure to json serializer

BSP Application

create BSP application
create index.html as Page with Flow Logic
replace autogenereted code with your index.html code

change model path to service in Component.js
upload all files to server as MIME objects

UI5 lesson4

By Roman Veselý

UI5 lesson4

585

Roman Veselý