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 outof-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-ofthe-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 say: get ready!
12
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 the model to update the model’s state • Bound to one or more views
Controller
Model • Manages data and notifies views of changes
• generates an output representation to the user
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-withconsumer-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-withconsumer-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. 2. 3. 4. 5. 6. 7. 8. 9.
Sample Program development OData Binding concepts Mobile Libraries – Introduction Different Controls for Mobile Usage of Advanced Controls Charting Libraries Table Display in UI5 Interactive UI5 Application Mobile Deployment
SAP Fiori 1. 2. 3. 4. 5. 6.
FIORI Basics Creating a Simple Fiori Application How to use the FIORI Templates Creating an FIORI application in 3 minutes Creating a Mockup for the SAPUI5/ FIORI Application 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
