Unit 1 Lesson 1: Exploring SAP FIori Design

3 Dimensions

- Design
o Visual Design
o Information Architecture
o Interaction Patterns
- Concept
o Role-Based
o Adaptive
o Coherent
o Simple
o Delightful
- Technology
o UI
o Business Logic

Tools in Fiori

- SAP Build – tool for prototyping Web applications using Fiori UI Elements
o SAPUI5 can be imported in SAP WebIDE
- WebIDE – Integrated Development Environment
o Basis of all Fiori Web Apps
- UI Theme Designer
o Browser-based, graphical What you see is what you get editor
- Fiori Launchpad
o Customizable role-based start page

Role-Based UI

- End users get all information and function they need for their daily more
- Single complex transaction for many user roles
- Tasks of a single user can make it necessary to use multiple transactions or additional
applications

Unit 1 Lesson 2: Exploring SAP Fiori Launchpad

Features

- Finance
- HR
- Sales
- Procuruement

Fiori LaunchPad

- Role-Based
 - Dynamic Charts
- Color Coding

Me Area

- Features configured per user role

- Includes User, Activities, Personalization

Notification Center

- Grouped by: Date, Type, Priority

- Short Description
- Quick Actions (Approve,Reject)

Fiori Launchpad Clients and Integration

3 Clients

- Web Browser (HTML5)

- SAP Business Client
- SAP Fiori Client ( Mobile Devices)

Unit 2 Lesson 1: Explaining User Interfaces

UI Technologies

SAP Screen Personal

- Classic Screens – ABAP

- SAP GUI for HTMP

SAP WEB IDE

- SAPUI5

Consumed in Web Browser of SAP Business Client

SAP UI5

- SAP Fiori apps are built using SAPUI5 as UI Technology

- Based on HTML5 can be consumed in any browser

SWIFT

- Programming language
- Apple and SAP Collab to use iOS using Apple Xcode as development environment
HTML5

- Markup language
- Used to structure webpages
- CSS3 for Layout and visualized in browser
- Programming language is JavaScript

Model View Controller

- Concept seperates tasks in application to 3 programmatic Elements

o Model – holds data or connection to datasource organized in JSON or XML connecting to
ODATA
o View – user interface of UI elements organized in libraries, defined using XNL
o Controller – holds logic of the application reacting on messages from models and views

SAP WEB IDE

- Hosted in SAP Cloud Platform

- Based on ORION, Project by Eclipse and SAPUI5
- Additional Servies
o Connection to ABAP Repository
o ODATA Service Consumption
o Connection to Plugin Repository
o Integration with Translation Services
o Integration with SAP JAM

Development and Extention using SAP WEBIDE

- Develop SAPUI5 using SAPWEBIDE

- Project:

Unit 2 Lesson 2: Explaining Data Services

Youtube Video

Video 2