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

A very basic "Square" control

A GoogleMap control

Composite Control

Consist of other controls, no own HTML

Example

Generate a control

Control generator

Demo

Put it into a Library

Create Library

SAP Web IDE template

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

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

https://ui5lab.io/

Any Questions?