SAP UI5 and SAP Fiori

Evolution of SAP User Interfaces

SAP is moving towards more customer friendly approach

UI5

WD

GUI

2
SAP UI5 on various devices

3
What is SAP UI5

SAP UI5 Stands for SAP UI Dev kit for HTML5.

Sap ui5 is front end design language used for development of sap ui5
apps based on html5,css and java script.

Main ui5 principles:

1. Any screen on any device

2. Cutting edge controls
3. Powerful theming and branding
4. Efficiency and performance
5. Light weight application

4
Future of SAP UI5

Most of the Fortue-500 companies which are running on SAP software

are moving towards mobile platforms based on UI5.

SAP itself is targeting to move all the core applications towards UI5
platform by 2017.

All new implementation projects are using SAP UI5 applications in core
business scenarios.

All companies are looking for candidates with strong knowledge in SAP
UI5 along with ABAP.

There is very high demand for SAP UI5 candidates in abroad countries
as well as in india.

5
Benefits for Non-SAP Professionals in SAP UI5

SAP UI5 front end is a JavaScript UI library consisting of a feature-rich

core and a really large number of UI controls which are organized in a
handful of libraries.

SAP is trying to advocate to developers outside of the SAP ecosystem

to come and try out SAP developer tools such as UI5.

SAP UI5 front end is based on Java script , and with strong references
to OOPS concepts, UI5 is the entry place that would appeal to many
developers outside of the SAP ecosystem to get into hot SAP skill-set.

Applications can be built using SAPUI5 that connect to any type of

back-end system irrespective of SAP backend system. UI5 can be used
on JDBC and other platforms as well.

6
Benefits for SAP Professionals in SAP UI5

SAP UI5 back end integration requires strong understanding of ABAP

and hence ABAPers can use UI5 as a niche skill set.

SAP UI5 back end and net weaver gateway are the core SAP systems
so It would be easy for the core SAP consultants to understand the
business landscape and business requirements.

SAP UI5 is a advanced version of web-dynpro and will take over the
role of conventional ABAPers role in mobile platforms.

7
Why you should learn SAPUI5 and SAP Fiori?

• SAPUI5 is SAP’s strategic UI technology. There are many UI

technologies available and fully supported (Web Dynpro, BSP, etc.),
but SAPUI5 is the way forward. As far as possible SAP will create all
its applications in SAPUI5 (mostly Fiori). The SAPUI5 library is out-
of-box available in HANA, which makes it the default way of creating
UI for native HANA apps. It works well with SMP/Kapsel for mobile
scenarios requiring offline mode, extra security, etc. SAP is putting
very big effort in improving and extending SAPUI5, so updates are
frequent.

• SAP Fiori is the new UI paradigm which SAP is rolling out across the
entire SAP portfolio including all on premise and cloud software.
Fiori is based on SAPUI5. In case you would like to modify out-of-
the-box Fiori apps or create your own, mastering SAPUI5 is
required.

8
Why you should learn SAPUI5 and SAP Fiori?

• First time in SAP’s history in my opinion, real outside in development

approach is possible. For decades customers installed SAP software
and adjusted the UI to (mostly limited) extent. Now customers can
think freely about how the UI should look like and it is possible to
implement it in SAPUI5. It’s a huge improvement. That’s why Design
Thinking goes well with SAPUI5/Fiori projects. Design Thinking
helps customers to come up with creative solutions, which then can
be implemented in SAPUI5.

• SAPUI5 supports responsive design for SAP applications, which

means that the applications can run on desktop, tablet and
smartphone. This is a strong point of SAPUI5 in comparison to
previous UI technologies such as Web Dynpro.

9
Why you should learn SAPUI5 and SAP Fiori?

• It supports most modern browsers, which is again very appreciated

by SAP customers.

• SAPUI5 has become a huge library with hundreds of controls, which

results in high efficiency when it comes to creating business
applications. It supports internalization, MVC concept, etc. all things
which make serious business app development possible.

• SAP is making good progress in providing development tools to

speed up implementations. The best tool is Web IDE, which is
available in the HANA Cloud and as a local installation. Check it out,
it even has a graphical layout editor.

10
Why you should learn SAPUI5 and SAP Fiori?

• Looking at it from a personal or team development point of view: if

you are in the business of developing SAP solutions, don’t miss
SAPUI5 in 2015, otherwise you may be too late

11
Why you should learn SAPUI5 and SAP Fiori?

• SAPUI5 application can be themed with the Theme Editor. You can
introduce your corporate identity (logo, colors, fonts, etc.) with this
tool. Some changes are possible without coding, but full flexibility is
also available via css.

• SAP has standardized on the OData protocol. SAP Business Suite

and HANA applications can be exposed as OData and binding
OData to SAPUI5 controls is really easy.

• SAP has made SAPUI5 open source under the name OpenUI5. This
will speed up further developments and lead to greater adoption also
outside the SAP ecosystem.

• Based all the reasons mentioned above, IMHO many upcoming

business requirements will be best met by using SAPUI5. So I would 12

say: get ready!

13
SAP UI5 Features

14
Where can we use SAP UI5?

15
SAP UI5 Architecture

16
Basic MVC Concept in SAPUI5 Front End Design

• sends commands to
Model • generates an output
the model to update representation to
the model’s state • Manages data and the user
notifies views of
• Bound to one or changes
more views

Controller View

17
Basic MVC Concept in SAPUI5 Front End Design

18
SAP UI5 Development Front End Development

19
Example Development in Eclipse (Front End)

20
Development in SAP Net weaver (Back End)

21
Development in SAP Net weaver (Back End)

22
System Access & Installations

• Free online SAP System Access for Development of ODATA and

Netweaver Gateway Back End services.
• Assisting in configuration of eclipse for SAP UI5 Front End
Development.
• Free online SAP HANA Web IDE access
https://account.hanatrial.ondemand.com/cockpit

23
Customer Testimonials on SAP UI5

• “I am very excited to see such positive results from SAP’s user experience strategy in such a short time
frame,” said Benjamin Salter, enterprise architecture and application development, Valero.
• “The apps in SAP Fiori are as easy to use as Facebook, Google or Amazon. This is exactly what end
users are looking for.” – Colgate CEO
See more at: http://www.news-sap.com/sap-fiori-simplifies-the-enterprise-software-experience-with-
consumer-style-apps/#sthash.StrEONwS.dpuf

• “Employees in all industries and walks of life are looking for better, more intuitive user experiences, and
their employers recognize that these improvements will allow for higher productivity and greater user
acceptance.” - Leading Consulting Firm
See more at : http://www.news-sap.com/sap-fiori-simplifies-the-enterprise-software-experience-with-
consumer-style-apps/#sthash.StrEONwS.dpuf

24
Course Contents
• SAP UI5 Overview
1. Introduction
2. SAP UI5 Architecture
3. SAP UI5 vs SAP Fiori
4. SAP UI5 Development Process
5. Software components overview
6. Installation overview
• ODATA Services
1.HTTP Protocols
2.DATA Transfer using JSON
3.ODATA basics
4.ODATA using Open Services
5.REST Services
6.XML vs JSON data
7.Formatting Http requests
8.GET,POST,PUT and DELETE Operations
•SAP Net Weaver Gateway
1.SAP back end system configuration
2.Modeling overview
3.Enhancing the EXT Methods
4.Activating and testing the service
5.Read Single Entity
6.Associations
7.Creating and updating data by services
•SAP UI5 Front End Components
1.Components Overview
2.MVC Architecture in UI5
3.HTML5 Basics
4.CSS3 Basics
5.Java Script and JS Query
6.Different Views
7.Different Layouts (Matrix, Grid and
Form)
Course Contents

SAP UI5 Components Development

1. Sample Program development
2. OData Binding concepts
3. Mobile Libraries – Introduction
4. Different Controls for Mobile
5. Usage of Advanced Controls
6. Charting Libraries
7. Table Display in UI5
8. Interactive UI5 Application
9. Mobile Deployment

SAP Fiori
1. FIORI Basics
2. Creating a Simple Fiori Application
3. How to use the FIORI Templates
4. Creating an FIORI application in 3 minutes
5. Creating a Mockup for the SAPUI5/ FIORI Application
6. Best Practices

26
Salient Features of Course

1. Extensive coverage of topics

2. More focus on Hands-on examples
3. Real time scenarios integration while covering the topics
4. Make use of available software for the development
5. Assist in SAP system access

Last but not least of all the topics

How to Create End-to-End UI5 application in Client Systems

• Requirement Analysis
• Designing Principles
• Development and Debugging
• Common Problems during Deployment
• How to create a fiori application in 5 min

27
Any Questions?

28