Introduction to HTML5:

UI5 Scripting Syntaxes:

  • CSS
  • UI5 Scripting Syntaxes

SAP UI5 screen elements:

  • Scripting Syntaxes Cont..
  • Syntax to use SAP UI5 screen Elements.

Implement Different UI Element in ECLIPSE tool:

Debugging in UI5 – Cont.. of UI5 UI Element creation:

  • Debugging in UI5.
  • Cont.. of UI5 UI Element creation.

Cont.. Step by Step UI5 UI Element creation:

Step by Step DropDown Box, Combo Box, List Box, RadioButton, Panel:

  • DropDown Box
  • Combo Box
  • List Box
  • RadioButton
  • Panel

Consume OData in UI5 (table UI element in sap.commons & sap.m librfary)

  • Consuming OData ABAP service into our SAP UI5/FIORI application.
  • Consume OData in UI5 Table UI Element.

Formatter Function in UI5:

  • Formatter Function.
  • Display records in DropdownBox by consuming OData ABAP service.

Display OData records in GRAPHS/CHARTS:

Capture UI5 screen inputs – Enable/Disable functionality:

  • Capture selected values from screen elements to make it available for OData and subsequently backend ECC.
  • Enable Disable Functionality based on radio ROADMAP, DROPDOWN, RADIO BUTTON UI ELEMENT.

Row Repeater consuming OData – mystyle.CSS:

  • CONT..CAPTURE The different UI Element Input.
  • Implement ROW Repeater consuming Backend OData Service.
  • Mystyle.CSS file implementation.

Structural (MVC) coding:

  • Implement real-time Structural (MVC) Coding:
  • How to seperate UI element related coding inside VIEW file
  • and Processing related coding in CONTROLLER file.
  • Use Form, DropDown, Range Slider etc.

PANNEL for Navigation between Views:

  • Implement PANEL concept for NAVIGATION between two VIEWS.
  • MATRIX Layout.
  • Detail Debugging in UI5.


  • Pass captured data from one VIEW to another VIEW.
  • Validate VIEW1 inputs with backend table data.
  • Place TABLE/ROW Repeater UI element in VIEW2.

Introduction to WEBIDE:

  • .XML based VIEWS
  • Component.js
  • manifest.json
  • Navigation between two views.


  • CRUD operation E2E
  • READ

Build – Deploy – Configure FIORI like application in FIORI Launchpad:

  • Build FIORI like application
  • Deploy/Configure FIORI like application into FIORI Launchpad.