Download - Web dynpro & ui5
![Page 1: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/1.jpg)
WebDynpro & UI5
Why Choose?
Tom Van Doorslaer Ctac Belgium
@TomVanDoo
![Page 2: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/2.jpg)
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.
![Page 3: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/3.jpg)
Agenda
Cockpit Sidepanel Custom theme
Why Choose?
![Page 4: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/4.jpg)
Cockpits
Building Cockpits
Using FPM, or Page Builder
![Page 5: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/5.jpg)
![Page 6: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/6.jpg)
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
![Page 7: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/7.jpg)
Cockpits
Sidepanels are easy
![Page 8: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/8.jpg)
![Page 9: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/9.jpg)
How?
Page builder + chip + simple webdynpro’s
WDR_CHIP_PAGE
Condensed blog contains all the info
![Page 10: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/10.jpg)
Cockpits
Custom Themes are cool
Especially with the addition of CSS Class element
![Page 11: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/11.jpg)
New css class property on all elements as from UI addon SP8
![Page 12: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/12.jpg)
Add those CSS classes in your custom theme
Transaction /UI5/THEME_DESIGNER
![Page 13: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/13.jpg)
![Page 14: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/14.jpg)
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 ...
![Page 15: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/15.jpg)
Why Choose?
SAPUI5 on WebDynpro,
could that be possible?
![Page 16: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/16.jpg)
HTML islands
UI5 IN WDA is already possible with HTML islands
FPMGB_TEST_OVP_CAROUSEL_UIBB
![Page 17: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/17.jpg)
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!
![Page 18: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/18.jpg)
Technical information
Package: SWDP_*
![Page 19: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/19.jpg)
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
![Page 20: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/20.jpg)
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...
![Page 21: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/21.jpg)
UI Libraries
Ever noticed how WebDynpro has multiple element categories?
![Page 22: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/22.jpg)
libraries
There’s also multiple UI libraries
![Page 23: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/23.jpg)
Libraries
You can add your own library
![Page 24: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/24.jpg)
elements
And elements
![Page 25: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/25.jpg)
UI elements
There’s even a tool to generate all classes for your UI elements
![Page 26: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/26.jpg)
Elements JS
![Page 27: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/27.jpg)
Element renderer
![Page 28: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/28.jpg)
How the HTML is comprised
![Page 29: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/29.jpg)
Hobby project anyone?
Now it’s all just in my head
In theory
Maybe next year I’ll have something to show
![Page 30: Web dynpro & ui5](https://reader034.vdocuments.us/reader034/viewer/2022042500/5597a2e81a28abc9218b46e1/html5/thumbnails/30.jpg)
Tom Van Doorslaer Ctac Belgium
@TomVanDoo