CD109

UI Innovation with Web Dynpro ABAP and

Floorplan Manager
Dirk Becker / Christian Günther
October, 2013
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.

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 2

agenda

introduction
 floorplan manager – basics
 predefined components – floorplans and GUIBBs
demo 1
 analytics with charts in fpm
ui innovation
 modern user interfaces in fpm
 insight to action with fpm
tooling
 intregrated development and development tools
demo 2
 full map integration into fpm

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 3

introduction
floorplan manager - basics
floorplan manager – basics

FPM in a nutshell
 ui framework on WD ABAP
 floorplan of an application
 patterns for common usage
 configuration of uis
 highly adaptable

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 5

floorplan manager – basics

what is FPM ?

what benefits does it have for me ?

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 6

floorplan manager – basics

developer productivity

 construct your ui with

predefined components

developer  don‘t care about event

loop,
productivity messaging and navigation
 make use of wizards and
fpm workbenchy

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 7

floorplan manager – basics

high flexibility

 create user interfaces by pure

configuration in FLUID
high
flexibility  user interfaces are code-free
 work comfortably on
complex applicationsy

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 8

floorplan manager – basics

maximum adaptability

 adapt & enhance delivered applications

modification-free
maximum
adaptability  context-based adaptations
 end-user personalization

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 9

floorplan manager – basics

overall consistency

 guideline conforming applications

overall
consistency  benefit from uniform look & feel
 coherent suite of applications

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 10

floorplan manager – basics

timeless software

 separation of business logic and ui

timeless  support of various object models

software like BOL, BOPF, …
 gain speed and minimize maintenance
cost with generic feeder classes

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 11

floorplan manager – basics

rich user interfaces

 new ui patterns for analytical charts

and interactive maps
rich user
interfaces  integrate client-side HTML5 & CSS
with HTML islands
 tighter SAPUI5 integration

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 12

floorplan manager – basics

and more …

 HANA code pushdown for fast

drill-down on mass-data
and
more  tablet support with restrictions
…
 flexible theming & branding
with SAP UI theme designer

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 13

floorplan manager – basics

you should also know …

… that FPM is widely used in the
Business Suite
… that FPM runs within any shell
… that FPM is fully based on a standard
technology (WDA): versions,
corrections, transports,
translation, …

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 14

predefined components
floorplans and GUIBBs
predefined components – floorplans (1)

overview page
floorplans … floorplan (OVP)

… define general layout and

interaction of an
application

… are used for application

composition and
ui assembly guided activity
floorplan (GAF)

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 16

predefined components – floorplans (2)

overview page floorplan

 designed for object overview and
maintenance

 highly personalizable with

collapsible & stackable panels and
flexible layout options
 various page types & page master for
complex scenarios

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 17

predefined components – floorplans (3)

guided activity floorplan

 represents step-by-step scenarios

 renders interactive roadmap with

optional subroadmap

 offers standard buttons and

allows step-specific buttons

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 18

predefined components – generic ui building blocks (1)

generic ui building blocks (guibbs)…

… are patterns for guideline conforming
content representation
… allow generic configuration based
on feeder classes

… are fully integrated into fpm

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 19

predefined components – generic ui building blocks (2)

form and form repeater

 pixel-perfect alignment by grid based
configuration

 dynamic behaviour is supported

 various layout options

 form repeater offers swap uibb to allow
distinct processing options and modal
behaviour

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 20

predefined components – generic ui building blocks (3)

list and tree

 client side rendering allows
smooth scrolling
 abap table services (ATS) enable
grouping, aggregation, sorting,
filtering & export to spreadsheet

 switch between paging and scrolling

 variants concept for personalization

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 21

demo 1
analytics with charts in fpm
ui innovation
modern user interfaces
insight to action with fpm
run fpm on device
modern user interfaces with fpm – i.) charts

chart guibb
 based on CVOM chart library
(HTML5)

 >30 different chart types with up

to 2 dimensions and 3 measures

 fully interactive and entirely

integrated into FPM

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 24

modern user interfaces with fpm – ii.) maps

visual business guibb

 integration of maps and 3d
graphics based on
VisualBusiness
 fully integrated into FPM

 bi-directional communication
completely supported

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 25

modern user interfaces with fpm/wda – iii.) html islands

html(5) islands
 include any custom HTML, CSS or
Java Script

 flawless integration into FPM/WDA

 communication via JS calls, WD

context or WD actions

 requires standards mode

example: SAPUI5 carousel

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 26

modern user interfaces with fpm/wda – iv.) html container

html(5) container
 add small snippets of HTML5 into or around
existing ui elements
 example: background images in
tables

 example: decorative elements

 implemented in fpm for form and
form repeater

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 27

insight to action with fpm – HANA code pushdown

HANA code pushdown

 direct code pushdown by
SADL engine
(SADL = service adaptation
description language)

 intelligent paging mechanism for

smooth scrolling
 work with mass data in
real-time
also available for GUI ALV

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 28

insight to action with fpm – HANA drill down capabilities

HANA drill down

 free-text search and fuzzy search
 all abap table services (ATS) available:
group, sort, filter, …
 alternative drill-down with modern
charting capabilities
 browse through millions of recordsin
sub-seconds

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 29

run fpm on device – tablet support

tablet support
 conditionally released for customers
(note 1853087)

 reuse standard scenarios on the iPad

 no native mobile experience, some restrictions

 device detection to adapt configurations in

fpm (context based adaptations)

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 30

tooling
integrated development
integration into theme designer
development tools
integrated development with object models

Consumer object models and fpm

UIUI Technoloy
Technologies UI Technoloy  optimized developer velocity and
(e.g. FPM, SAPGUI, …)
Web Services
efficiency
 low development efforts
Uniform facade
transparency and easy
 high
Business Logic UI Technoloy
Business objects extensibility
 easy to test and maintain
 BOL, BOPF, SPI (+ SADL) supported
Data base

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 32

integration of ui theme designer

ui theme designer
 quick theming & branding
for fast results

 expert theming for detailed

changes

 Support of CSS3 and LESS

 enabled for unified rendering,

sapui5, NWBC & portal

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 33

development tools @ fpm (1)

tool support
fpm workbench (FPM_WB)
 central basis for all fpm related activities

application creation wizard

 code-less application generation
 support of object models + SADL

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 34

development tools @ fpm (2)

FLUID
 WYSIWYG editor for expert
configuration
 screen layout individually
adaptable and persisted

 multiple adaptation options

 customizing
 enhancements
 context based adaptations

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 35

development tools @ fpm (3)

fpm in eclipse
 integration of FLUID in
eclipse

 intregration of fpm wizard

 easy navigation into class
builder for feeder classes

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 36

demo 2
full map integration into fpm
Further Information

SAP Public Web

SAP Community Network (SCN): http://scn.sap.com/community/web-dynpro-abap/floorplan-manager
- Including FPM Developer’s Guide (aka Cookbook)
- Including document How to Create, Adapt, and Enhance FPM Applications
+ SDN Forum

SAP Education and Certification Opportunities

http://www.sap.com/education/
NET 313: 4-day classroom training on Floorplan Manager for Web Dynpro ABAP

Watch SAP TechEd Online

www.sapteched.com/online

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 38

SAP TechEd Virtual Hands-on Workshops and SAP TechEd Online
Continue your SAP TechEd education after the event!

SAP TechEd Virtual Hands-on Workshops SAP TechEd Online

 Access hands-on workshops post-event  Access replays of keynotes, Demo Jam, SAP TechEd
 Available January – March 2014 LIVE interviews, select lecture sessions, and more!
 Complementary with your SAP TechEd registration  View content only available online
http://saptechedhandson.sap.com/ http://sapteched.com/online

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 39

Feedback
Please complete your session evaluation for CD109.

Thanks for attending this SAP TechEd session.

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

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.

National product specifications may vary.

These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and
SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth
in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP 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.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

© 2013 SAP AG or an SAP affiliate company. All rights reserved. 41