Evolution of SAP User Interfaces
SAP is moving towards more customer friendly approach
2 UI5
GUI
What is SAP UI5
4
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
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.
Benefits for Non-SAP Professionals in SAP UI5
6
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.
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.
Why you should learn SAPUI5 and SAP Fiori?
8
• 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
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.
Why you should learn SAPUI5 and SAP Fiori?
10
• 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.
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
Why you should learn SAPUI5 and SAP Fiori?
12
• 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!
SAP UI5 Features
SAP UI5 Architecture
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
• Manages data and notifies views of changes
Model
• generates an outputrepresentation to the user
Basic MVC Concept in SAPUI5 Front End Design
Example Development in Eclipse (Front End)
Development in SAP Net weaver (Back End)
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
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
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 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)
•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
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
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
