presentation held @ Cluj IT Days 2013 & IT Conference on SAP Technologies 2013

1. SAP User Experience
IT Conference on SAP Technologies, Sept. 18th 2013, Cluj-Napoca

2. Intro
• What do we mean by User Experience?
User experience (UX):
• involves a person's emotions about using a particular product,
system or service
• highlights the experiential, affective, meaningful and valuable
aspects of human-computer interaction and product ownership.
(Wikipedia)

3. Agenda
What we will cover:
• User experience of SAP solutions over the past decades
• Modern UX requirements
• SAP UX Strategy & Technology Roadmap
What we will focus on  SAP UI Technologies:
• Main features
• Technical aspects (how they work “under the hood”)

4. Agenda
 User experience of SAP solutions over the past decades
• Modern UX requirements
• SAP UX Strategy & Technology Roadmap

5. ’82 – ’91: The SAP R/2 era
• Real-time ERP solution running on enterprise mainframes
• Integrated many of an enterprise’s functions: accounting,
manufacturing, supply chain management etc.
• 2-tier architecture with terminal based user interface

6. ’92 – ’01: SAP R/3
• R/3 brings ERP solutions to the desktop computer
• 3-tier Architecture
• The advent of Dynpro technology
• Any Dynpro(Dynamic Program) consists of
 Screen layout
 Corresponding flow logic
Flow logic Flow logicScreen Layout
RDBMS
SAP Application
Server
Local Computer

7. R/3 1.0 - 1992
First “graphical” user interace
R/3 2.0 - 1993
A bit of windows “look&feel”
R/3 4.0 - 1998
Tables and tabstrips
R/3 4.6 - 2001
Screen reinvented to allow
multiple areas, branding
and others
’92 – ’01: SAP R/3

8. Dynpro creation
• Dynpro definition created by developers using Screen Painter tool of
the Netweaver Application Server
• Layout metadata stored in underlying DB
RDBMS
SAP Application
Server
Local Computer
Dynpro
meta-
data
Screen “Painting” Screen Layout metadata

9. How does Dynpro rendering work?
• Rendering possible with a SAP GUI client
installed on local computer:
 TCP connection between SAP GUI client and
application server
 The client retrieves Dynpro definition and handles
the rendering of the screen on the local computer
RDBMS
SAP Application
Server
Local Computer
Dynpro
meta-
data
SAP GUI client

10. SAP Portal
• Around year 2000: mySAP Portal
 Browser based single point of entry to SAP enterprise applications
 Role based personalizaion
 Single Sign-On
• Technically based on
Dynpro rendering in web
browser(SAP WebGUI)

11. SAP WebGUI: Dynpro rendering in Web Browser
• Made possible by introducing a “middleware”
into the R/3 3-tier architecture: the Internet
Transaction Server (ITS)
• Using a predefined template, the ITS compiles
the Dynpro layout metadata into HTML, to be
rendered in any web browser
RDBMS
SAP Application
Server
Local Computer
ITS
SAP GUI Browser

12. Demo
• Demo1: SAP GUI vs. SAP WebGUI – FS-PM Central Access

13. Agenda
• User experience of SAP solutions over the past decades
 Modern UX requirements
• SAP UX Strategy & Technology Roadmap

14. Modern UX requirements
• The way people work with software has changed dramatically over
the last number of years
• The traditional enterprise must learn from internet technology
• End-user expectations are shaped by intuitive touchscreen devices
and software they use privately, raising the bar for the applications
they use at work
“The world is ready for the consumer-grade enterprise”
(Paul Maritz, former VMWare CEO)

15. Simplicity over Feature-richness
 Customers are increasingly stating that user experience (UX) is the
differentiator, not features and functions
 Complex and feature-rich experience must be replaced by simplicity,
intuitiveness, and mobility
 SAP Vision: Provide the leading user experience for business
applications

16. Status Quo

17. What customers say about SAP solutions
Integrated –
everything we
need in one
place
Helps me run
my business
better
Comprehensive
– can handle
everything
Too many
fields
Too many
screens
Too many
clicks

18. Status quo
• SAP business solutions use an estimated 300,000 screens ( about
220,000 of which are Dynpros )
• Designed for different product lines, numerous product versions,
different vertical industry requirements, etc.
 Flexible business solutions, however not optimized for streamlined
user experience

19. Agenda
What we will cover:
• User experience of SAP solutions over the past decades
• Modern UX requirements
 SAP UX Strategy & Technology Roadmap

20. SAP UX Strategy
• NEW - Provide consumer-grade UX for new applications
• RENEW - Renew existing applications by improving the UX of
software supporting the most commonly-used business scenarios
• ENABLE - Enable customers to improve the UX of the SAP
software they use to perform their own mission-critical business
scenarios

21. Enable customers to improve UX of SAP solutions themselves
• SAP Screen Personas
ENABLE

22. ENABLE
Aim: Enable personalization of existing SAP solutions for customers
• Increased productivity
• Ease of use
• UI redesign, branding a.s.o.
Challenges:
• Large number of Dynpro based solutions (tightly coupled with
application logic, difficult to change)
• Personalization usually requires technical knowledge

23. Solution customization overview
Customization level vs. Time to value & required technical knowledge
SAP Technology Services Conference
http://www.slideshare.net/peterspielvogel/sap-screen-personastechnologyserviceconfmarch2013

24. SAP Screen Personas
What is it?
• State-of-the-art SAP technology (v1.0 released Dec. 7th, 2012) for
(re)designing Dynpro screens of existing SAP applications
Main Features
• Quick and easy screen personalization performed by customer
• Easy to use drag-and-drop interface
• Technical/programming knowledge not a necessity

25. Common personalization tasks
• Simplify interface, personalizing it for specific needs of a customer
(e.g. quick access to commonly used functions)
• Interface branding and redesign
• Work experience optimization through:
 Pre-filling of default values
 Script recording for task automation

26. How does it work?
• Netweaver Kernel 7.21  provides a new interface through which
screen layout decriptions can be retrieved in the form of an Object
Model
@(Re)Design-Time
Personas Screen Editor
• Client-side web-based editor
that enables changing of the
Object Model
• New “flavors” stored on the
server-side in the NW
Personas Add-On
RDBMS
SAP Application
Server
Local Computer
ITS
SAP GUI Browser
Personas
Add-On
Dynpro
object
model
New
Flavor

27. How does it work?
@Runtime
• Changes are applied to Screen Object Model before
rendering the Screen
• 2 types of Personas “output”: HTML and Silverlight
SAP Technology Services Conference
http://www.slideshare.net/peterspielvogel/sap-screen-personastechnologyserviceconfmarch2013

28. Demo 2: Dynpro personalization with Screen Personas – Tab merging
www.youtube.com/watch?v=nf9q_97owVA

29. Renew existing applications, improving user experience:
• WebDynpro
• FPM
• SAP Fiori
RENEW

30. WebDynpro
What is it?
• Application Development tool
• Runtime environment
What is its purpose?
• Built to be the de facto choice for SAP UI technology
• Aimed mainly at:
 Simplifying development
 Cut implementation time & cost
 Focus on business functionality rather than technical details of UI
development
 Enabling the development of platform independent applications
 Provide for enhanced modularization and reusability

31. Main features
• Declarative approach to user interface development
• Client abstraction
• Ease of use
• Modularization into components for reuse on a higher(functional)
level
• Strong MVC-oriented application structure

32. Declarative approach
• Tell the application what to do, rather than how to do it
“Minimize coding, maximize design”
• Declaration of:
 Data structures
 Screen layouts
 Navigation paths among screens (“views”)
 …
WebDynpro application metamodel used to generate application
source code

33. Abstraction from client rendering details
WebDynpro
Framework
Application
MetaModel
Design-Time Run-Time
Rendering
Engine
Rendering
Engine
Rendering
Engine
Rendering
Engine
Unified
Renderer
HTML
• IE
• Firefox
• Safari
• …
RichClients
• Adobe Flex
• Silverlight
• .NET Client
3rd party

34. Custom code
Backend Logic:
• Implementation of predefined hook methods, called from the
generated code
What about custom client-side scripting?
• New WD UI elements with Netweaver 7.31:
 HTMLIsland
 HTMLContainer
 HTMLFragement
 Enable embedding custom HTML5, JavaScript and CSS code within
WebDynpro applications

35. WebDynpro application structure
Modularization into functional components
• Reusable functional/business units
• Can have:
 Visual interface (can be rendered
visually on screen)
 Programmatic interface(can be
integrated/called by other comp.)
MVC architecture
• MVC pattern: clear separation of data presentation from data
processing
• WD4A application built upon MVC architecture, with a clear separation
of components into Model, View and Controller

36. Floorplan Manager

37. Floorplan Manager
What is it?
• Framework for creation of WebDynpro applications
• Provides a set of predefined floorplans, based on which the
application can be built upon
• Floorplans = configurable design templates

38. Main features
• Consistent style of interface
• Common functions (navigation, messaging, personalization)
embedded in the framework
• Easy adaptation & (modification free) enhancement
• Generic UI Building blocks

39. Floorplans
Available Floorplans:
 Guided Activity Floorplan,
 Overview Page Floorplan
 Object Instance Floorplan
 Quick Activity Floorplan

40. SAP Fiori

41. SAP Fiori
• Triggered by SAP’s
initiative of renewing UX
for the “top use” business
transactions
• Collection of easy to use apps that work seamlessly on all devices
and support:
 Request submission & approval
 Ordering, Shipment, Invoice Handling
 …

42. SAP Fiori

43. Demo
• Demo3:
 WebDynpro HTML rendering
 Case study – Renewing an application with WD4A:
FS-PM Standard

44. Provide consumer-grade UX for new applications
• SAP UI5
• SAP Netweaver Gateway
NEW

45. SAP UI5
What is it?
• “Enterprise-ready” JavaScript library - optimized for building
business applications for desktop and mobile platform
• based on open source and open standards like JQuery, HTML5,
JavaScript, CSS, LESS and others

46. SAP UI5
• Built around JQuery
 Can be viewed as an abstract
layer add-on to JQuery
 Adds additional controls typical for
business application development
• Optimized for backend access to data in JSON, Odata, XML format
exposed by various systems:
 SAP Application Server ABAP
 HANA Cloud Platform
 SAP Application Server Java
 SAP Netweaver Gateway
 SAP HANA Cloud Gateway or SAP HANA itself

47. Main features
Application Development
• Small learning curve
• Eclipse-based WYSIWYG
editor
Technology Positioning
• Designed for development of
intuitive, consumer-grade user
interfaces handling simple
recurring(top use) activities

48. Netweaver Gateway

49. The problem
• SAP business functionality
exposed through various types
of technical interfaces: RFC,
BAPI, MDX …
• Integration task is difficult due
to lack of homogenity

50. The solution – Netweaver Gateway
What is it?
• Integration Middleware – provide
existing business functionality
through new interfaces based on
market standards
Features:
• Brings the power of SAP business
software into new experiences -
mobile and tablet devices, rich
internet applications…
• Connectivity to SAP applications
using any programming language
by leveraging REST services and
OData/ATOM protocols

51. Key capabilities
• Generation of services based on RFC, BAPI, BOR, BOL, MDX,
SAP HANA, OData, ABAP, etc.
• Supporting the development of new services
• Error logging, serialization, traces, code snippets
• Pushing of backend events
• Generation of proxy classes
and starter apps for iOS, Android,
PHP, Java

52. FIN

53. www.msg-systems.com
Vielen Dank für Ihre Aufmerksamkeit
Victor Ionescu
IT Consultant
SAP Development
Telefon: +49 89 96101-2596
victor.ionescu@msg-systems.com
www.msg-systems.com