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
Made with Slides.com