WebDynpro & UI5

Why Choose?

Tom Van Doorslaer Ctac Belgium

@TomVanDoo

Legal disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without

the permission of SAP. This presentation is not subject to your license agreement or any other service or

subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this

document or any related presentation, or to develop or release any functionality mentioned therein. This

document, or any related presentation and SAP's strategy and possible future developments, products and

or platforms directions and functionality are all subject to change and may be changed by SAP at any time

for any reason without notice. The information in this document is not a commitment, promise or legal

obligation to deliver any material, code or functionality. 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. This document is for informational purposes and may not be

incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except

if such damages were caused by SAP´s willful misconduct or gross negligence.

All forward-looking statements are subject to various risks and uncertainties that could cause actual results

to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-

looking statements, which speak only as of their dates, and they should not be relied upon in making

purchasing decisions.

Agenda

Cockpit Sidepanel Custom theme

Why Choose?

Cockpits

Building Cockpits

Using FPM, or Page Builder

How?

Check out some of the frameworks

FPM

Start FPM application FPM_WD to get you going

Page builder

WDR_CHIP_PAGE

Check the blog

Cockpits

Sidepanels are easy

How?

Page builder + chip + simple webdynpro’s

WDR_CHIP_PAGE

Condensed blog contains all the info

Cockpits

Custom Themes are cool

Especially with the addition of CSS Class element

New css class property on all elements as from UI addon SP8

Add those CSS classes in your custom theme

Transaction /UI5/THEME_DESIGNER

Next step

Now it’s still a custom shell

I want to enhance the FPM_OIF_COMPONENT to look like that

And support search events

And runtime configuration buttons

And ...

Why Choose?

SAPUI5 on WebDynpro,

could that be possible?

HTML islands

UI5 IN WDA is already possible with HTML islands

FPMGB_TEST_OVP_CAROUSEL_UIBB

Server-side vs service based

WebDynpro uses a Context to interchange data

UI5 uses REST services to interchange data

There’s no reason why the context can’t be exposed as a JSON

service

Which can be persisted offline!

Technical information

Package: SWDP_*

Architecture

Webdynpro uses MVC

So does UI5

Component

Controller

View:

Layout

Controller

Application for navigation purposes (sounds like a window)

Index.html <-> more or less your Webdynpro application

Views

Webdynpro uses view definition

So does UI5 (XML defined views)

Which makes me wonder:

Could we use UI5 element instead of webdynpro?

Officially, custom WD UI elements are not supported

But...

UI Libraries

Ever noticed how WebDynpro has multiple element categories?

libraries

There’s also multiple UI libraries

Libraries

You can add your own library

elements

And elements

UI elements

There’s even a tool to generate all classes for your UI elements

Elements JS

Element renderer

How the HTML is comprised

Hobby project anyone?

Now it’s all just in my head

In theory

Maybe next year I’ll have something to show

Tom Van Doorslaer Ctac Belgium

@TomVanDoo