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

2.
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.
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.
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.
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 XMLComposite control is born!
NOTE: until mid July 2017 the XMLComposite was developed under the name “FragmentControl”,
and that’s the name under which it was also presented at UI5con@SAP 2017. The name changed,
but the functionality remains the same.
Why is the standard approach not good enough?

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

7.
7
In XMLComposites, 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 (e.g. in regular composite
controls without XML): sap.ui.model.base.ManagedObjectModel
We‘ll get to it later…
Digression: what is $this?

8.
8
SearchField
Declarative way to map events also being investigated
Demo

9.
9
When application should have full control over content added into your XMLComposite:
 Use a sap.ui.core.AggregationProxy in XML, as placeholder for controls from outside.
Handling Aggregations, Part 1: Using aggregated controls as-provided
JS file is trivial, just defines the aggregation:
NOTE: AggregationProxy was also renamed
(from FragmentProxy) after UI5con@SAP.
Demo Code

10.
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 inner
Button.
Demo Code

11.
11
XMLComposites are 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.
12
Initially „ControlTreeModel“ and just used for controls within an XMLComposite, 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.
13
For each ListItem in oList, there will be a Button within the HorizontalLayout.
ManagedObjectModel also works for aggregations
Demo Code

14.
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.
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!
 Update: it was indeed renamed (FragmentControl to XMLComposite) in 1.50. When we say such a thing, we
mean it!
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.
16
XMLComposite controls are written like XMLView+Controller – but they have an API like
regular controls. They 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 XMLComposites, to connect inner controls to the outer API, but can
be used for other purposes.
XMLComposites 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
*) In 1.48 as „FragmentControl“, from 1.50 as „XMLComposite“

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