cd300

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.


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


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


1. How it started

writeln(hello world);

readln(date);

User Interface

Example: Euclidean algorithm

Data Input and Output

Monochrome monitors Fortran, Pascal,


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


3. Web Dynpro ABAP

User Interface UI Components

Pages and Views

UI Configuration

Code-free UI settings

Business Logic

Components & Views Configuration


4. Floorplan Manager

User Interface Central UI Logic

Event Loop Navigation

Generic UI Concepts

Floorplans Generic UI patterns

Business Logic

Feeder Classes

UI Configuration


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


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


Database Tables / Business Logic

Standardized Access to FPM

BOL

OData SPI

Floorplan Manager

FBI FSI

Read-o

nly

BOPF GenIL

Read-o

nly


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


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


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


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


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


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


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


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


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


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?


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


FPM: Basic Idea


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


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


Overview Page Floorplan (OVP): Personalization Options

Personalize your screen

as you like it



... with Drag & Drop

with Expand & Collapse



Choose your layout

fit it to your needs...


Overview Page Floorplan (OVP): Page Master

Master /detail behavior

... with slider

2 visualization options


Guided Activity Floorplan (GAF)

Roadmap

... with optional sub-roadmap

Standard buttons

also step-specific buttons


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)


Generic UI Building Blocks (GUIBBs): Form

Pixel-perfect alignment

... grid positioning

Variety of layout options

Dynamic behavior supported


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


Generic UI Building Blocks (GUIBBs): Tree

Client-side rendering

... conformity with List

Master column

optional icons

Personalization options


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


Generic UI Building Blocks (GUIBBs): Search

Main features

saved searches

grouping of criteria

exclude parameters

inclusion of result list


Generic UI Building Blocks (GUIBBs): Others

Launchpad UIBB

start pages; different views

Quickview UIBB

Thing preview & dataset

Analytics UIBB

analytics tables, charts,


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


FPM: Break-out Scenarios (2) HTML Islands

Include custom

HTML

Java Script

CSS

Communicate through

Java script calls

Web Dynpro context

Web Dynpro actions


FPM: Side Panel Integration I

Side panel integration into FPM

uni-directional communication via tagging

both side panels supported: NWBC and WD ABAP


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


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


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


FLUID: Configuration Editor

Navigation

Repositories

UIBBs

elements

buttons

General Settings

Preview

WYSIWYG

Schemas

also Menu & Toolbar

Wiring

Attributes


FLUID Graphical Wire Editor

Repository

available UIBBs

Plugs

Collection

Lead Selection

Selection

UIBBs

linked by wires

according to their relations


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


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


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


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)


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


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


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


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.


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.

cd300

Documents

sap ag

ui framework

ui generation

ui layout screens ui

ui composition demo

classic new sap products

abap mixture of coding

customers of abap