Upload
daniel-benavides
View
63
Download
10
Embed Size (px)
DESCRIPTION
Building SAPUI5 Applications Following the SAP Fiori Approach on SAP HANA
Citation preview
Orange County Convention Center
Orlando, Florida | June 3-5, 2014
Building SAPUI5 Applications Following the SAP Fiori Approach on SAP HANA Thomas Jung, SAP HANA Product Management
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 2
Disclaimer
This presentation outlines our general product direction and should not be relied on in making a
purchase decision. This presentation is not subject to your license agreement or any other agreement
with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to
develop or release any functionality mentioned in this presentation. This presentation and SAP's
strategy and possible future developments are subject to change and may be changed by SAP at any
time for any reason without notice. This document is provided without a warranty of any kind, either
express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP intentionally or grossly negligent.
Main Message
Mastering SAP Technologies 2014 | 3
Consumer user experience is the new standard for enterprise applications …
The World is Changing
4 © 2013 SAP AG or an SAP affiliate company. All rights reserved.
© 2013 SAP AG. All rights reserved. 5 Public
Top use
scenarios
Core use scenarios Specific customer value
use scenarios
The SAP User Experience Strategy
Existing Applications
RENEW ENABLE
SAP Fiori
Renovation Enablement Tools (e.g. SAP Screen Personas)
NEW
New Applications
Usa
ge
/R
ea
ch
© 2013 SAP AG. All rights reserved. 6
ENABLE NEW RENEW
DESIGN SERVICES
SAP USER EXPERIENCE STRATEGY
© 2013 SAP AG. All rights reserved. 7
ENABLE NEW RENEW
DESIGN SERVICES
SAP USER EXPERIENCE STRATEGY
© 2013 SAP AG. All rights reserved. 8 Public
SAP Fiori Responsive – Simple – Impactful – Coherent – Instant Value
© 2013 SAP AG. All rights reserved. 9 Public
My Leave Requests
My Timesheet
My Travel Requests
My Shopping Cart
Track Shopping Cart
Approvals
Insight
Approve Requests
Approve Leave Requests
Approve Timesheets
Approve Travel Requests
Approve Travel Expenses
Approve Shopping Carts
Approve Purchase Orders
Approve Requisitions
Approve Purchase Contracts
Purchasing
My Spend
Track Purchase Orders
Order from Requisitions
Requests
Insights
My Paystub
My Benefits
Purchasing Agent Manager Employee
Sales Transactions
Sales Insight
SAP Fiori
Sales Rep
Create Sales Orders
Change Sales Orders
Check Price and Availability
Track Sales Orders
Track Shipments
Track Invoices
25 SAP Fiori Apps available now They touch 87% of the users at an SAP Customer
© 2013 SAP AG. All rights reserved.
© 2013 SAP AG. All rights reserved. 10 Public
MRP Planner Supply Planner Supplier Program Manager / Project Team Member Production Worker / Supervisor Quality Engineer
Cash Manager Managers Collection Specialist Employee (T&E) G/L Analyst Finance
MFG SD
SAP
Fiori
Sales Representative Sales Manager
Sales Representative Inside Sales Representative
CRM – Sales
Includes Search, C’est Bon, Launch Pad, Smart Business, Collaboration, Factsheets, etc.
(Based on SFIN)
SAP Fiori 2 – Portfolio Overview ~150 scenarios planned with RTC at TechEd
© 2012 SAP AG. All rights reserved. 11 Internal
Responsive Simple Coherent Instant Value
All sizes, devices, versions, channels • Design with
mobile mindset
1-1-3 (1 user, 1 use case, 3 screens) • Solve the right
problem • Know and provide
the user context • Provide meaningful
data integration (Simple)
Apps that speak the same language • Provide coherence
for common activities
• Provide brand coherence
Low barrier to adoption • Enable
customers to adapt and users to personalize
• Deployable to users ideally in one day
Fiori: Design Principles
De-composition into task-base experience • Provide one entry
point for the user
Role-based
© 2013 SAP AG. All rights reserved. 12 Public
SAP Fiori Overall Offering
Fiori Launchpad
Transactional
Fiori
Analytical
Fiori
Smart Business
Scenarios /
KPI Cockpits
Business
Suite
Business
Suite runs on any DB runs on HANA
Fact
Sheets
© 2012 SAP AG. All rights reserved. 13 Internal
Key UI Technologies Big Picture
*: Harmonized in Run & Design Time with WebUIF
1: FloorPlan Manager
2: Flexible UI Designer
3: Business Object Layer / Business Object Processing Framework
Backends / Platforms
DYNPRO FPM1/
WDA SAP UI5
Gateway
Clie
nts
SAP NetWeaver Portal
SAP NetWeaver Business Client
SAP UI5 APPLICATION
DEVELOPMENT TOOLS FLUID2
SAP
Screen
Persona
s
SAP GUI
SA
P T
hem
e D
esig
ner
*
Fiori
LaunchPa
d
BOL / BOPF 3
© 2013 SAP AG. All rights reserved. 14 Public
Comparison of Key UI Technologies SAPUI5 and Floor Plan Manager
SAPUI5 - Pixel Perfect UI’s Floor Plan Manager for WebDynpro ABAP
• Fiori & Light weight apps
• Mobile & Desktop
• Stateless
• Mainly data consumption
• Full functional applications
• Desktop usage
• Transactional & stateful
• Data creation & maintenance
© 2013 SAP AG. All rights reserved. 15 Public
Key Capabilities:
Application / Control Development Environment
Theming and Branding framework
OData integration for timeless software.
Extensibility concepts for “custom controls”
Based on “Open Source” framework(s) and Web Standards
Benefits:
Native Look and Feel on any device
Mobile & Desktop, on-demand & on-premise
Huge amount of predefined modern UI Controls
Interactive and integrated Business Graphics
Pixel Perfect Design
SAP UI Development Toolkit for HTML5 (aka SAPUI5)
© 2013 SAP AG. All rights reserved. 16 Public
Component Availability Component Availability
FPM
As of SAP Netweaver 7.01 (latest version in NW 7.03)
NWBC 4.0 September 6, 2012 (UI Add-on 1.0 SP01 for SAP NetWeaver 7.0/7.01/7.02/7.03 or stand-alone via SMP)
WDA Page Builder
As of SAP Netweaver 7.02 (latest version in NW 7.03)
UI Add-On Quarterly Releases (UI Add-on 1.0 SPnn for SAP NetWeaver 7.0/7.01/7.02/7.03)
SAPUI5 V 1.6 V 1.8 V 1.10
Quarterly Updates since September 2012 (UI Add-on 1.0)
Visual Business V 1.1 V 2.0
Transportation Mgmt. 8.0 Transportation Mgmt. 9.0 (RTC 31.07.2012, GA planned for March 2013)
UI theme designer
As of UI Add-on 1.0 SP05 Portal SAP NetWeaver Portal 7.3 / SAP NetWeaver Cloud portal (supporting mobile portal scenarios)
SAP Screen Personas
As of December 7, 2012
Availability of UI Components
This is the current state of planning and may be changed by SAP at any time.
SAPUI5 Introduction
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 18
T I M E LE S S S O FTW ARE
SAP NetWeaver Gateway
S AP UX S TRATE G Y
consumer-grade UIs
(e.g. SAP Fiori Apps)
CRO S S
P LATFO RM
CRO S S DE V I CE
responsive design
UI development toolkit for HTML5 (SAPUI5) Overview
UI
Development
Toolkit for HTML5
(SAPUI5) SAP/
NON-SAP
PLATFORMS
DESKTOP
BACKEND
ACCESS /
ODATA
USER
EXPERIENCE
MOBILE
Productivity Services for
SAPUI5
Design-time Tools
SAPUI5 Tools in Eclipse,
Web based IDE
UI theme designer
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 19
UI development toolkit for HTML5 (SAPUI5) SAP’s HTML5 Toolkit for building lightweight business UIs on multiple platforms
SAPUI5 is a client-side HTML5 and JavaScript-based rendering library and programming model that is optimized for
consumption of SAP data. It combines new qualities like openness and flexibility with known SAP strengths like
enterprise readiness and product standard support.
Key capabilities
Rich control set including charts for all devices
Application development environment for all platforms
OData integration for timeless software
Extensibility concepts for “custom controls”
Modern theming and branding concepts
Embraces “open source” framework(s) and web standards
Targets developers with web development skills (HTML, CSS3, JS).
Benefits
Business agility through availability on any device & for any platform
User productivity and happiness through increased flexibility,
openness and pixel perfect design
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 20
UI development toolkit for HTML5 (SAPUI5) SAP’s HTML5 Toolkit for building lightweight business UIs on multiple platforms
Key Features and Benefits
Built with Leading Web Technologies
jQuery OData OpenAJAX LESS D3.js ARIA CSS3
Runs on Various SAP and Non-SAP Platforms
SAP HANA XS SAP NetWeaver AS ABAP
Open Source Platforms (testing)
SAP HANA Cloud
SAP NetWeaver AS Java / Portal SAP Mobile Platform (planned)
HTML5
Enterprise Readiness
Eclipse-Based Designtime
Openness and Flexibility Fast Release Cycles
Unmatched Extensibility
Powerful Theming & Branding
Any Screen on Any Device
Cutting-Edge Controls
Build on STANDARDS Foster INNOVATION Delight USERS
Efficiency and Performance Productivtiy Services Well-known and easy to learn
Timeless SAP Data Consumption
Read more: “Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)”: http://scn.sap.com/docs/DOC-31625
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 21
UI development toolkit for HTML5 (SAPUI5)
SAPUI5 Simplified Architecture
SAP UI5 runtime
and libraries Views with sap.m lib
Controllers
Models JSON, XML or OData
SAP NetWeaver AS ABAP
Resource Handler
CSS
JS
Views with sap.ui.commons lib
CSS
JS
SAP NetWeaver AS Java
Resource Handler
CSS
JS
CSS
JS
SAP NetWeaver Cloud
Resource Handler
CSS
JS
CSS
JS
SAP HANA Extended Application Services (XS Engine)
CSS
JS
CSS
JS
SAP NetWeaver Gateway
SAP Backend
Web Browser
Ap
plic
atio
n C
LIE
NT
A
pp
lic
atio
n
SE
RV
ER
DB
O D a t a
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 22
UI development toolkit for HTML5 (SAPUI5)
SAPUI5 Release Cycle and Support Strategy
Quarterly release cycles of SAPUI5 on all platforms There is a new SAPUI5 release every 3 months, changing the number to a new minor version (1.12.0,
1.14.0, 1.16.0)
New minor versions are always backwards compatible with the old versions within certain compatibility rules
Corrections for current releases are provided within patch releases (e.g. 1.14.1, 1.14.2)
As soon as a new version is released to customers, errors in older versions are only fixed in patch releases
of the new version ( error in 1.12.9 is fixed in 1.14.1 if 1.14.0 is already released)
SAP Fiori based on SAPUI5 Keeping Simple Things Simple
26 © 2013 SAP AG or an SAP affiliate company. All rights reserved.
Responsive Simple Impactful Coherent Instant Value Responsive
27 © 2013 SAP AG or an SAP affiliate company. All rights reserved.
All Sizes | Devices | Versions | Channels
One Code line
Let’s Build!
SAPUI5 is a UI Control Library with Eclipse- and soon Web Tools
SAPUI5 is optimized to make use of SAP meta data exposed in the OData stream
SAPUI5 helps you to efficiently build delightful responsive business applications based on HTML5 for all devices
SAPUI5 is available on all SAP platforms
SAPUI5 embraces Web Standards
SAPUI5 is the key technology for the next generation of SAP applications
SAPUI5 newly offers modification free extensibility capabilities
KEY LEARNINGS
FOLLOW US
THANK YOU FOR PARTICIPATING
Please provide feedback on this session by completing a short survey via the event mobile application.
SESSION CODE: 0504
For ongoing education on this area of focus, visit www.ASUG.com
THANK YOU
© 2013 SAP AG or an SAP affiliate company. All rights reserved. 32
Further Information
SAP Education and Certification Opportunities
www.sap.com/education
sapui5.netweaver.ondemand.com/sdk/#content/Overview.html
Watch SAP TechEd Online
www.sapteched.com/online
SAP Public Web
scn.sap.com
scn.sap.com/community/developer-center/front-end
www.sap.com