MOB 208: Experience the Art of SAP Fiori

Apps
Sergio Guerrero
Manager Specialized Services, BI&A Practice Hitachi Consulting
9/19/2016 SAP TECH ED
Agenda

Introduction

Business Problems

SAP HANA Learnings and Best Practices

Fiori-like applications

Use cases what is next?

Helpful links
 Speaker Introduction

SAP HANA and Fiori developer for 3+ years. 9+

years overall experience

Recognized SAP HANA Developer Hero at SAP

Tech Ed 2015

Some of my client experiences:

F&B/CPG Fortune 500 Company

Industrial Worlds Largest Tire and Rubber Manufacturing

Chemical Global Innovative Leading Chemical Company

Business Problems

F&B company: SAP ECC - SAP HANA, BW, XS

Not a centralized place for Data Multiple systems
Unable to easily scale / upgrade
Fat client based solution or spreadsheets

Chemical Company: SAP HANA and XS Hosted at HDS

Manufacturing Analytics tracked on spreadsheets

Industrial Products: SAP HANA and XS

others
 Learnings

Hear about the lessons learned on how to present, consume,

and return data to and from a SAP Fiori-like application
Learn about the Fiori-like Application architecture, MVC, and
examples of the SAPUI5 controls
Learn about Fiori Best Practices and Guidelines
Use Cases such as Custom Applications and S4HANA
Extensions
and so on
UI Best Practices
MVC Pattern
Model
OData (server side model)
JSON (client side model)
View (UI)
JavaScript
XML (@BuildWithBuild & Web IDE)
Controller
Respond to events
Update Model (CRUD operations)
 Fiori-like Applications
Setting up a Project & Repository Workspace

Fiori-like Application architecture

HANA Extended Application Services (XS)
Fiori-like Applications
1) index.html
a) Bootstrapping
b) Component Container

2) Component.js
a) manifest.json
b) JSON model
Fiori-like Applications
1) manifest.json
a) App configuration
b) Data models
c) UI Routes
 Fiori-like Applications
Servicing Data from HANA via http(s)
OData Web Services (Exposing data)
REST must expose table to write back

XSJS RESTful Services

What is REST?
HTTP Methods: POST, GET, PUT, DELETE
SAPUI5 and OData
OData (atom XML and JSON)
 HANA XS
XSJS
Transactions (POST / GET via AJAX)
Read Tables via XSDS (XS Data Services)
How to Call Stored Procedures
 HANA XSJS ( Server Side JavaScript)
XSJS (continues)
CDS (Core Data Services)
Outbound connectivity (Destinations)
XS Email (SMTP)
XS Scheduled Jobs (XSJobs)

What about XS Advanced? (SP11+)

Similar concept, however, based on node.js *
Node.js libs backwards compatible to XS Classic
Fiori User Experience (UX)
 Fiori-like application

Role based

Read-Only User Vs Read-Write User

Sample Fiori Applications
Role-based (prev)
Coherent
Simple
Responsive
Delightful
 Helpful links
SAP Community Network and myself
http://scn.sap.com/welcome http://scn.sap.com/people/sergio.guerrero/content

openSAP
https://open.sap.com/

HANA Academy
https://www.youtube.com/user/saphanaacademy

SAPUI5 SDK
https://sapui5.hana.ondemand.com/sdk#docs/guide/99ac68a5b1c3416ab5c84c99fefa250d.html

HANA Cloud Platform (trial)

https://account.hanatrial.ondemand.com/
Thank you

@SergioGuerreroX
@HitachiSAP
Feedback

Please complete a session evaluation for this session