Andreas Kunz, SAP SE
June 30, 2017
Create Your Own
UI5 Controls
– What’s Coming Up

Disclaimer
„What‘s Coming Up“ means:
 No guarantees about future features!
 What‘s there (control dev in general) has been presented last year:
 https://www.slideshare.net/andreaskunz/ui5-controls-ui5con-2016
 https://www.youtube.com/watch?v=W3Qkev2yk9w

3
JavaScript file with API, renderer and
behavior
All-imperative
Can create HTML from scratch, but
also re-use other controls internally
UI5 controls at present

4
More and more “composite controls” are being developed:
 Controls that purely consist of other controls, with some additional logic, but no own HTML
Composite Controls
SearchField (composite control)
sap.m.Input sap.m.Button
„placeholder“ property
„placeholder“ property
„press“ event
„search“ event„buttonText“ property
„text“ property
sync sync handle in control code
Outer API:

5
Creating composite controls requires lots of error-prone glue code:
 Instantiating inner controls (at the right time, and not too often), rendering them, managing lifecycle
 Making sure they are properly connected in the control hierarchy (for data models, events, invalidation)
 Forwarding outer API properties/aggregations to inner controls and vice versa
Could we get rid of all that code?
 XMLViews and Fragments are well-established and already used for composing controls.
 Just use a Fragment to define the inner controls, add an API and a way to bind inner controls to this API!
 voilà: the FragmentControl is born!
Why is the standard approach not good enough?

6
Two files:
 HelloWorld.js
– regular control implementation, with API/metadata part, but without the renderer
– inherits from sap.ui.core.FragmentControl
 HelloWorld.control.xml
– just like a regular XMLView (or rather a Fragment, hence the name)
How does a FragmentControl look?
Demo Code

7
In FragmentControls, you can bind inner controls to the outer control API.
$this: name of model which contains the outer API
Mechanism behind this feature is generic and can be used elsewhere:
sap.ui.model.base.ManagedObjectModel
We‘ll get to it later…
Digression: what is $this? ?

8
SearchField
Declarative way to map events also being investigated
Demo

9
When application should have full control over content added into your FragmentControl:
 JS file is trivial, just defines the aggregation:
 Use a sap.ui.core.FragmentProxy in XML, as placeholder for controls from outside.
Handling Aggregations, Part 1: Using aggregated controls as-provided
Demo Code

10
Handling Aggregations, Part 2: Using different controls internally
When you want to hide some properties of the internal controls or use different control type:
 Fully declare the inner control and bind some properties against the outer aggregation.
Example: application should be able to make your control display any number of buttons, but
should only control the button text and only get one consolidated event.
The binding context in the aggregation template (= the Button) refers to the respective item in the
outer aggregation, so the relative path „text“ points to a different outer control for each actual
Button.
Demo Code

11
FragmentControl is very well-suited for static, always equal control structures.
Can use aggregation binding and visibility of inner controls to handle dynamic structure.
XML Templating can be an option to:
 Handle complex structure decisions declaratively
 Set up structure in advance, possibly store result in view cache (performance!)
But feels complicated right now… working on it…
What if the structure is not always the same?

12
Initially „ControlTreeModel“ and just used for controls within a FragmentControl, then generalized.
Makes tree of UI5 controls (or other ManagedObjects) and their properties available as a model .
Just do
and set the model on a view or control, e.g. as „inputModel“, and you can:
CAVEAT: usually don‘t do this in applications! Normally, binding both controls to a separate data
model is a cleaner option, but sometimes you don‘t own both controls or don‘t know both models.
Coming back to the ManagedObjectModel
Demo Code

13
For each ListItem in oList, there will be a Button within the HorizontalLayout.
ManagedObjectModel also works for aggregations
Demo Code

14
When creating inner controls in init(), bind their properties and aggregations to a
ManagedObjectModel you create.
ManagedObjectModel in regular composite controls
Demo Code
…

15
All shown features are available in master branch and 1.48, BUT:
 Documentation and APIdoc is hidden
 Classes are marked as „private“
Productive use is discouraged because API might change, or entire feature may be removed or
renamed!
Trying the feature and giving feedback is welcome. No support guarantees.
 Source code: https://github.com/SAP/openui5/blob/master/src/sap.ui.core/src/sap/ui/core/FragmentControl.js
 Commits: https://github.com/SAP/openui5/search?p=1&q=fragmentcontrol&type=Commits
 Nightly: https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/FragmentControl-dbg.js
 1.48: https://openui5.hana.ondemand.com/1.48.0/resources/sap/ui/model/base/ManagedObjectModel-dbg.js
Caveat: session title includes „what‘s coming up“!

16
FragmentControls are written like XMLView+Controller – but they have an API like controls.
Make creating composite controls much easier.
The ManagedObjectModel offers the API of a control (or other ManagedObject) as a bindable
Model.
It is created automatically in FragmentControls, to connect inner controls to the outer API, but
can be used for other purposes.
FragmentControls and ManagedObjectModel are present in UI5 1.48, but not yet documented
and intended for productive use. You can try, but they may change.
All code samples: https://github.com/akudev/UI5con2017-ControlDevNews
Summary

Thank you.
Contact information:
Andreas Kunz
andreas.kunz@sap.com
Twitter: @aku_dev
You are welcome to give feedback for this session
in the UI5con Event App