How can a WebDynpro for ABAP developer compete with the UI5 sexyness?

1. WebDynpro & UI5
Why Choose?
Tom Van Doorslaer Ctac Belgium
@TomVanDoo

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

3. Agenda
Cockpit Sidepanel Custom theme
Why Choose?

4. Cockpits
Building Cockpits
Using FPM, or Page Builder

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

7. Cockpits
Sidepanels are easy

9. How?
 Page builder + chip + simple webdynpro’s
 WDR_CHIP_PAGE
 Condensed blog contains all the info

10. Cockpits
Custom Themes are cool
Especially with the addition of CSS Class element

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

12. Add those CSS classes in your custom theme
Transaction
/UI5/THEME_DESIGNER

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

15. Why Choose?
SAPUI5 on WebDynpro,
could that be possible?

16. HTML islands
 UI5 IN WDA is already possible with HTML islands
 FPMGB_TEST_OVP_CAROUSEL_UIBB

17. 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!

18. Technical information
 Package: SWDP_*

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

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

21. UI Libraries
 Ever noticed how WebDynpro has multiple element categories?

22. libraries
 There’s also multiple UI libraries

23. Libraries
 You can add your own library

24. elements
 And elements

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

26. Elements JS

27. Element renderer

28. How the HTML is comprised

29. Hobby project anyone?
 Now it’s all just in my head
 In theory
 Maybe next year I’ll have something to show

30. Tom Van Doorslaer Ctac Belgium
@TomVanDoo