4d_ABAP_UI_FPM

Dirk Becker / Jens Böckenhauer / Simon Hoeg / Christian Günther / Thomas Jung December, 2012

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 SAP’s 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

Re

ad

-on

ly

BOPF GenIL

Re

ad

-on

ly


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)

http://scn.sap.com/community/web-dynpro-abap/floorplan-manager









http://www.sap.com/education

http://www.sapteched.com/online

Documents

4d_ABAP_UI_FPM