Do you recognize the background?
UI5 Controls and Libraries
Create your own UI5 control, wrap it in a library and consume it!
Agenda
- Introduction
- Why?
- UI5 Controls
- Composite Control
- Generate a control
- Put it into a Library
- Consume a Library
- UI5Lab
- QA
Andreas Kunz
Wouter Lemaire
Why?
- No existing control
- Enrich Fiori apps
- Non-Fiori look-and-feel webapp
SCN Poll?
- 203 responses
- > 50% uses > 5% custom controls
- < 20% don't uses custom controls
Some examples
UI5 Controls
API
- Properties
- Aggregations
- ...
Renderer
- HTML structure
- (+css)
Behavior
- Event handling
- Logic
Demo
Composite Control
Consist of other controls, no own HTML
Example
Generate a control
Demo
Put it into a Library
Demo
Wrap a control into a Library - Demo
Generate Library
Copy Control
Copy Control renderer
Copy css
Copy images
Change test case
Add image to test case
Build
Run test
Deploy
Consume a Library
Demo
Consume a Library - Demo
Create a new app
Map library path to Library in neo-app.json
Consume a Library - Demo
Add library to manifest.json
Use library in a view
UI5Lab
Any Questions?
