Create your first XML Composite Control

[WouterLemaire]

On June 2017 Andreaz Kunz announced a new concept for creating Composite UI5 Controls at UI5Con in Walldorf, also called XMLComposite Control. With the XMLComposite control, it will be a lot easier for creating a UI5 control which is based on existing UI5 Controls. It would also replace the renderer function with an XML fragment. Everyone was very happy with this announcement and looked forward using this new concept but it was not yet available for developers outside SAP. You can view the slides of Andreaz here:

https://www.slideshare.net/andreaskunz/ui5con-2017-create-your-own-ui5-controls-whats-coming-up

Finally, it’s available for everyone! Or at least in a very early stage. It’s not yet in the SAPUI5 version nor in openui5 but you can find it in the nightly build of version 1.57: https://openui5nightly.hana.ondemand.com/#/topic/b83a4dcb7d0e46969027345b8d32fd44

With this XMLComposite control you can create a control like you would create a fragment and assign a controller to it, but you can use it like a normal UI5 control. The XMLComposite control exists out of two parts:

• Javascript file: This contains the metadata for a control and other functions like init, onafterrendering and eventhandlers


• XML file: this is an XML fragment that you can use to build the UI of your control. This replaces the renderer function of the control.

If you have for example an input field with a label and a button behind it and use it multiple times. Then you could put these controls together as a composite control so you just have to use this composite control instead of adding the label, input and button to your view every time. Let's try it out!

Try it out!

Create a basic UI5 app and take the latest UI5 version. You won’t be able to take the version from the nightly build, but that’s not a problem.



Once your project is created, go to the index.html page and change the bootstrap:



Create two files in a separate folder for the control:

• <controlname>.js: this file contains the metadata of the control and all the logic behind. You can compare it like a normal control


• <controlname>.control.xml: this files will replace the renderer function or file and will act the same but allows you use XML for creating the control

<control>.js is similar to a basic control but instead of extending from sap.ui.core.Control, we now extend from sap.ui.core.XMLComposite.

The properties and functions stay the same.

In this example I'm using two properties, label and value and also one event.

sap.ui.define(["sap/ui/core/XMLComposite"], function(XMLComposite) {

	var MyFirstCompositeControl = XMLComposite.extend("be.wl.CompositeControlDemo.control.MyFirstCompositeControl", {

		metadata: {

			properties: {

				label: "string",

				value: "string"

			},

			events: {

				help: {}

			}

		},

		handleHelp: function() {

			this.fireEvent("help", {});

		}

	});

	return MyFirstCompositeControl;

}, true);

In the  <control>.control.xml, here we can use other existing UI5 controls and put them together. Accessing the properties of the control is the same as accessing properties of named model. The name of the model is in this case “$this”.

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">

	<l:HorizontalLayout>

		<Label text="{$this>label}"  class="sapUiSmallMargin"/>

		<Input value="{$this>value}"/>

		<Button icon="sap-icon://sys-help" press="handleHelp"/>

	</l:HorizontalLayout>

</core:FragmentDefinition>

In our view, these different UI5 control can be used as one control:



This will make it a lot easier to create UI5 Controls in case you only use existing controls or want to combine existing controls with other controls you already made!

You can find the full code and working example on Plunker:

https://plnkr.co/edit/CmUOzXhYrM7oCAgcunV2?p=preview

You can find more examples of this topic here: https://openui5nightly.hana.ondemand.com/#/topic/b83a4dcb7d0e46969027345b8d32fd44 

There are more examples on the sample page of the nightly build:

https://openui5nightly.hana.ondemand.com/#/entity/sap.ui.core.XMLComposite

Enjoy this fresh new way of creating controls!

 

Greetings,

Wouter