Dirk Becker / Jens Bckenhauer / Simon Hoeg / Christian Gnther (TIP Core UI) October 2012
CD300
Floorplan Manager From Modeling to Applications
2012 SAP AG. 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.
2012 SAP AG. All rights reserved. 3
Agenda
From UI Coding to UI Generation
An Introduction to UI Abstraction
Business Object Models @ SAP
An Introduction to Object Modeling
Demo 1: Creation of a BOPF object
Floorplan Manager The UI Framework
An Introduction to UI Composition
Demo 2: Creation of a BOPF-based FPM application
Bringing it all together
The Final Step
Demo 3: Creation of an OData-based FPM application
2012 SAP AG. All rights reserved. 4
SAP NetWeaver Application Server ABAP Empowering classic & new SAP products
50.000+ customers of ABAP-based products
Millions of ABAP developers, SCN as community
A thriving partner ecosystem
Proven, robust and scalable
Extends into HANA, Mobility and Cloud
Evolves continuously w/o disruption
Enables hybrid on-premise/on-demand scenarios
SAP NetWeaver Application Server ABAP, a strong pillar In SAPs product strategy
HANA
MOBILITY
CLO
UD
SAP NetWeaver in 2013
SAP NetWeaver
Application
Server ABAP
From UI Coding to UI Generation An Introduction to UI Abstraction
2012 SAP AG. All rights reserved. 6
1. How it started
writeln(hello world);
readln(date);
User Interface
Example: Euclidean algorithm
Data Input and Output
Monochrome monitors Fortran, Pascal,
2012 SAP AG. All rights reserved. 7
2. SAP GUI
User Interface
Screen Painter
Only UI layout Screens UI coding in ABAP Mixture of coding for UI
and Business Logic Screen Painter
Coding
&
Business Logic
ABAP
2012 SAP AG. All rights reserved. 8
3. Web Dynpro ABAP
User Interface UI Components
Pages and Views
UI Configuration
Code-free UI settings
Business Logic
Components & Views Configuration
2012 SAP AG. All rights reserved. 9
4. Floorplan Manager
User Interface Central UI Logic
Event Loop Navigation
Generic UI Concepts
Floorplans Generic UI patterns
Business Logic
Feeder Classes
UI Configuration
2012 SAP AG. All rights reserved. 10
5. Floorplan Manager with Object Model
User Interface Generic UI Logic
Derived from model UIs can be generated
Generic Feeder Classes
Provided by framework (FPM, FBI, FSI, )
Business Logic
Object Model
UI Configuration
Generic Feeders
2012 SAP AG. All rights reserved. 11
User
Interface
1
6. Timeless Software
Universal Abstraction
Unlimited reuse UIs can be generated Easy creation of new UIs Business Logic
Object Model
UI Framework 1
(Feeder + Conf.)
User
Interface
2
UI Framework 2
(Feeder + Conf.)
User
Interface
3
UI Framework 3
(Feeder + Conf.)
Business Object Models @ SAP An Introduction to Object Modeling
2012 SAP AG. All rights reserved. 13
Database Tables / Business Logic
Standardized Access to FPM
BOL
OData SPI
Floorplan Manager
FBI FSI
Read-o
nly
BOPF GenIL
Read-o
nly
2012 SAP AG. All rights reserved. 14
BOL Business Object Layer (1)
Application Programming Interfaces
(APIs) Layers of Underlying
Business Applications
UI Abstraction Layer
Business
Engine (e.g. SAP ERP)
Business
Layer
Business Object Layer
(BOL)
Generic Interaction Layer
(GenIL)
User
Interface
Web Client UI
(WebUIF)
Floorplan Manager
(FPM) Web Browser
(NWBC / Portal)
Data Base Tables
2012 SAP AG. All rights reserved. 15
BOL Business Object Layer (2)
Business Object Layer (BOL)
Generic access layer to GenIL Uniform object oriented BOL API Performance optimized (buffer) Modeling of business objects, relations,
attributes, methods, searches
Generic Interaction Layer (GenIL)
Uniform access to all business objects and meta data
Infrastructure and central services for plugging in any existing business logic
BOLification / BOL enabling
2012 SAP AG. All rights reserved. 16
BOPF Business Object Processing Framework
BOPF Business Logic
Consumer
DB
Generic Services /Capabilities
Transaction & Commit handling Transactional buffer, locking Authority checks, persistency Modification-free extensibility Model-driven development
Developer Tool Support
Test UI for fast manual tests Enhancement Workbench SNOTE integration Tracing
Business Logic Orchestration
Actions Determinations with dependencies Validations
2012 SAP AG. All rights reserved. 17
BOPF GenIL on BOPF Adapter
GenIL
Generic GenIL Component for
BOPF
BOPF Service
& Tx Manager
BOPF Service
Layer
GenIL
Component
Existing Code
R
R R
Bring Together the Advantages
BOPF: Business Logic Orchestration and Data Persistency
BOL: Generic UI Abstraction Layer
How it Works
Seamless, out-of-the-box integration Consumption of BOPF modeling via
generic BOL feeders
2012 SAP AG. All rights reserved. 18
FPM BOPF Integration (FBI)
How it Works
Consume BOPF BO services seamlessly in a codeless and modification-free UI
environment
UI designers can configure UI Building Blocks (GUIBBs) for BOPF model
elements
Homogeneous, high-level application structuring and interaction behavior
FBI View Instance provides integration with Gateway BOPF BO
FBI Generic Feeder/ Generic
App Controller
FBI View Instance
FPM
2012 SAP AG. All rights reserved. 19
FPM
FBI Concepts
FBI Controller
Property
Buffers
BO Layer
Change
Notifications
Node
Buffers
Messages FBI
View Instance
FBI
Feeders
Modific.
Buffer
Exit
Class
Helper
Class
Conversion
Class
Flush
Get Data
Process
Event
2012 SAP AG. All rights reserved. 20
Service Provider Interface (SPI)
Key Features
UI-independent layer to expose business logic
Application UI and Backend can run on different systems
High-performing mass data handling
Minimally invasive connection of arbitrary data repositories
Central enhancement capabilities
Connection to FPM
FSI (FPM-SPI-Interface) Generic feeders
2012 SAP AG. All rights reserved. 21
OData Open Data Protocol
OData for SAP Products
OData
Atom
XML
HTTP
OData http://www.odata.org Defines data types Services for metadata and runtime Entity Relationship Model
Based on Industry Standards
REST, HTTP, XML, Atom (APP), JSON
Uniformity
Representation of structured data URL conventions Operations (GET, PUT, POST, )
ODBC for the Web
2012 SAP AG. All rights reserved. 22
Object Models Usage within SAP
BOL Business Object Model
Suite Renovation (HCM, FIN, MDG and others) on FPM
CRM on WebCUIF
BOPF Business Object Processing Framework
Transportation Management, EH&S and SRM on FPM-FBI
SPI Service Provider Interface
PLM, EAM, MDG, SCM, BCV and many others on FPM-FSI
OData Open Data Protocol
Case study in FPM only read-access so far
Demo 1 Creation of a BOPF Object
Floorplan Manager The UI Framework An Introduction to UI Composition
2012 SAP AG. All rights reserved. 25
UI framework based on Web Dynpro ABAP Fully integrated into a standard technology
Widely used in the Business Suite More than 1,400 applications with EhP6
Optimized user experience Guideline-conforming applications
Timeless software by configuration Separation of business logic and UI
Highly adaptable by customers and partners Coherent suite of applications
Introduction: What is FPM?
2012 SAP AG. All rights reserved. 26
FPM provides UI components Floorplans application composition GUIBBs reusable UI patterns
FPM takes over central application control Event loop, navigation, messaging,
UI definition in WYSIWYG editor Business logic in feeder classes Code-free and flexible UI
Multiple adaptation options Modification-free tuning of UIs Personalization of end-user screens
Introduction: Main Aspects of FPM
2012 SAP AG. All rights reserved. 27
FPM: Basic Idea
2012 SAP AG. All rights reserved. 28
FPM: Basic Idea
FPM applications
Run in canvas area Agnostic to any shell
Floorplans
Application composition UI assembly
Building Blocks
Content interaction Common use-cases
Free-style components
Break-out scenarios
2012 SAP AG. All rights reserved. 29
Floorplans ... ... are patterns for applications
... define general layout & interaction
... accomplish certain activities
... are highly configurable
Overview Page Floorplan (OVP) Object overview and maintenance (since SAP Net Weaver 7.02)
Guided Activity Floorplan (GAF) Step-by-step processes
Object Instance Floorplan (OIF) Object maintenance and overview
In More Detail: Floorplans
2012 SAP AG. All rights reserved. 30
Overview Page Floorplan (OVP): Personalization Options
Personalize your screen
as you like it
2012 SAP AG. All rights reserved. 31
Overview Page Floorplan (OVP): Personalization Options
... with Drag & Drop
with Expand & Collapse
2012 SAP AG. All rights reserved. 32
Overview Page Floorplan (OVP): Personalization Options
Choose your layout
fit it to your needs...
2012 SAP AG. All rights reserved. 33
Overview Page Floorplan (OVP): Page Master
Master /detail behavior
... with slider
2 visualization options
2012 SAP AG. All rights reserved. 34
Guided Activity Floorplan (GAF)
Roadmap
... with optional sub-roadmap
Standard buttons
also step-specific buttons
2012 SAP AG. All rights reserved. 35
In More Detail: Generic UI Building Blocks (GUIBBs)
Basic Idea
Guideline-conforming content templates Full integration into FPM framework Generic configuration based on feeder classes Generic feeder classes available (e.g. for BOL)
2012 SAP AG. All rights reserved. 36
Generic UI Building Blocks (GUIBBs): Form
Pixel-perfect alignment
... grid positioning
Variety of layout options
Dynamic behavior supported
2012 SAP AG. All rights reserved. 37
Generic UI Building Blocks (GUIBBs): List
Client-side rendering
... smooth scrolling
ABAP table services
grouping & aggregation sorting & filtering paging & scrolling export to spreadsheet Personalization
variant concept
2012 SAP AG. All rights reserved. 38
Generic UI Building Blocks (GUIBBs): Tree
Client-side rendering
... conformity with List
Master column
optional icons
Personalization options
2012 SAP AG. All rights reserved. 39
Generic UI Building Blocks (GUIBBs): Form Repeater
Repeating forms
alternative display for tabular data
configurable forms
dynamic behavior supported
row actions in upper-right corner
Swap UIBB
distinct visualization for processing
modal behavior supported
2012 SAP AG. All rights reserved. 40
Generic UI Building Blocks (GUIBBs): Search
Main features
saved searches
grouping of criteria
exclude parameters
inclusion of result list
2012 SAP AG. All rights reserved. 41
Generic UI Building Blocks (GUIBBs): Others
Launchpad UIBB
start pages; different views
Quickview UIBB
Thing preview & dataset
Analytics UIBB
analytics tables, charts,
2012 SAP AG. All rights reserved. 42
FPM: Break-out Scenarios (1) - General
Free-style components
flawless integration into FPM
breakout scenarios with WD ABAP native
Island technology:
- Flash or Silverlight
- RIA components
- HTML see next slide
2012 SAP AG. All rights reserved. 43
FPM: Break-out Scenarios (2) HTML Islands
Include custom
HTML
Java Script
CSS
Communicate through
Java script calls
Web Dynpro context
Web Dynpro actions
2012 SAP AG. All rights reserved. 44
FPM: Side Panel Integration I
Side panel integration into FPM
uni-directional communication via tagging
both side panels supported: NWBC and WD ABAP
2012 SAP AG. All rights reserved. 45
FPM: Side Panel Integration II
FPM content in side panel
UIBB CHIP Wrapper (UCW)
coupling of tagging to FPM Event Loop
enrichment of any scenario (GUI, )
multiple FPM instances supported
uni-directional communication
2012 SAP AG. All rights reserved. 46
Interaction of FPM / WDA Adaptation Layers
End user
Runtime
Administrator
Runtime
Developer
Design time
define
End user only
All users
in client
All users
in all
clients
Valid for exclude
override
Personalization
Customizing
Configuration 1
2
3
Hierarchy
2012 SAP AG. All rights reserved. 47
Configuration and Enhancement Options
FPM Configuration
Developer (SAP, Partner, Customer)
FPM Customizing
Administrator
WDA Enhancement
Developer
FPM Context-Based
Adaptations
Administrator / Developer
Field Extensibility
Administrator / Developer
Personalization
End User
2012 SAP AG. All rights reserved. 48
FLUID: Configuration Editor
Navigation
Repositories
UIBBs
elements
buttons
General Settings
Preview
WYSIWYG
Schemas
also Menu & Toolbar
Wiring
Attributes
2012 SAP AG. All rights reserved. 49
FLUID Graphical Wire Editor
Repository
available UIBBs
Plugs
Collection
Lead Selection
Selection
UIBBs
linked by wires
according to their relations
2012 SAP AG. All rights reserved. 50
Application Creation Tool
Easy creation of applications
main entities
Support of BOL & OData
generic feeders available
generate entire applications
Demo 2 Creation of a BOPF-based FPM Application
Bringing it all together The Final Step
2012 SAP AG. All rights reserved. 53
Floorplan Manager Architecture Options
Uniform exposure of floorplan screens
Floorplan
configuration
Uniform screen assembly
Freestyle screen
implementation
High degree of freedom Normalized data access from UI
Screen configuration
GUIBBs
Freestyle data
retrieval
Feeder classes Model-based business logic
Business logic assembly
Generic feeder classes Generated and code-free UIs
All three levels can be mixed within one application
2012 SAP AG. All rights reserved. 54
Feeder Classical Approach
FPM
Design
Time
Model-Based Access to the Business Logic
Business Logic
FPM Runtime
Feeder
Object Model
Generic Feeder
Advantages
Objects and their relations are well defined
Full and comprehensive encapsulation
Reuse of generic feeders on any object
Timeless software
Code-free creation of UIs
Easy and fast generation of UIs Intuitive configuration of UIs Coherent pattern usage in all UIs
2012 SAP AG. All rights reserved. 55
Extensibility
Application Enhancement Tool
Integrated into FLUID Extension of object models
Field Extensibility
Add new fields to GUIBB Form and GUIBB Search
Add new columns to GUIBB List
Node Extensibility
Create new GUIBBs (form or list)
2012 SAP AG. All rights reserved. 56
The Whole Stack
User Interface
Business Logic
Object Model
UI Configuration
Generic Feeders
GenIL
Generic GenIL Component for
BOPF
BOPF Service
& Tx Manager
BOPF Service
Layer
GenIL
Component
Existing Code
R
R R
FLUID
2012 SAP AG. All rights reserved. 57
Final Recommendation: Which Object Model to Use and When
BOL GenIL
When your business logic is already encapsulated (APIs)
When you adapt / enhance BOL-based application (HCM, FIN, MDG, )
BOPF FBI
When you adapt / enhance FBI-based applications (TM, SRM, )
SPI FSI
When you adapt / enhance FSI-based applications (PLM, MDG, EAM, )
When you require a Demilitarized Zone (DMZ) external facing
BOPF GenIL-BOPF-Adapter
When you start from scratch (Best of both worlds)
OData
When you want to consume and integrate services from the Web into your scenario (mixture possible)
Demo 3 Creation of an OData-based FPM Application
2012 SAP AG. All rights reserved. 59
Summary Business Object Models and FPM
Ease of Use
Clean and comprehensive modeling of business logic
Optimal abstraction of business logic and UI
Generic and reusable access from the UI to the business logic
Pure UI configuration / timeless software
Model extensibility with integration to the UI layer
Considerations Potential Drawbacks
In the case of small scenarios
It is a valid option to code your own feeders
Performance: Mass data approach not yet available
Outlook: Generic SADL*-Feeder to access persistency layer directly (*) SADL: Service Adaptation Definition Language
Side Remark
Use OData to connect your scenarios to available web services
2012 SAP AG. All rights reserved. 60
Further Information
SAP Public Web
scn.sap.com/community/web-dynpro-abap/floorplan-manager
SAP Education and Certification Opportunities
www.sap.com/education NET313 (4-day class room training on FPM)
Watch SAP TechEd Online
www.sapteched.com/online
Related Sessions @ TechEd
CD167: FPM Basics From Feeder Classes to Live Applications (2h Hands-on Workshop)
CD266: Highlights and Latest Features of Web Dynpro ABAP (2h Hands-On Workshop)
CD268: Adapting FPM and Web Dynpro ABAP Based User Interfaces (4h Hands-On Workshop)
Feedback Please complete your session evaluation for CD300.
Thanks for attending this SAP TechEd session.
2012 SAP AG. All rights reserved. 62
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of
other software vendors.
Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of
Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System
z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7,
POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize,
XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere,
Tivoli, Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the United States and other countries.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe
Systems Incorporated in the United States and other countries.
Oracle and Java are registered trademarks of Oracle and its affiliates.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems Inc.
HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C, World Wide Web
Consortium, Massachusetts Institute of Technology.
Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri,
and Xcode are trademarks or registered trademarks of Apple Inc.
IOS is a registered trademark of Cisco Systems Inc.
RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry
Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered
trademarks of Research in Motion Limited.
2012 SAP AG. All rights reserved.
Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads,
Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice,
Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc.
INTERMEC is a registered trademark of Intermec Technologies Corporation.
Wi-Fi is a registered trademark of Wi-Fi Alliance.
Bluetooth is a registered trademark of Bluetooth SIG Inc.
Motorola is a registered trademark of Motorola Trademark Holdings LLC.
Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork,
SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects
is an SAP company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services
mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc.
Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360, and B2B 360 Services are registered trademarks of Crossgate AG in Germany and other countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of their respective companies. Data
contained in this document serves informational purposes only. National product specifications may vary.
The information in this document is proprietary to SAP. No part of this document may be reproduced, copied,
or transmitted in any form or for any purpose without the express prior written permission of SAP AG.