UI5 Custom Controls with aggregation

[WouterLemaire]

Hi all,

A few months ago I’ve posted a blog about a SAP WebIDE Plugin that I’ve created to generate custom UI5 controls. In that blog I also showed how to create a custom control using this plugin. You can find the blog here: https://blogs.sap.com/2016/11/27/custom-ui5-control-generator-sap-web-ide-plugin/

The plugin is also in the SAPStore and can be used free of charge! https://www.sapappcenter.com/p/20553/custom-ui5-control-generator--sap-web-ide-plugin--flexso-nv

At the moment the plugin is very basic and can only be used for creating basic controls. Building advanced UI5 controls is not yet foreseen in this plugin. But still, it can boost your developments.

In this blog I’ll show you how to create UI5 controls that can be used together and how my plugin can help you with it.

As an example I started from an HTML snippet that I’ve found on the web:

http://codepen.io/anon/pen/RpBryb

More HTML snippets on https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/

I’m going to convert this HTML snippet into a UI5 control. Therefore I have to split the HTML in two parts:

• One control for the list item: An item can be used zero to multiple times in a list. This is something that should be generic and so it requires a separate UI5 control


• One control for the list: This is the place where items will be added. This is a separate control with a specific css class for the design

First I'll start with creating the controls, then I'll connect the two controls and last but not least I'll use them in my view with bindings.

UI5 List Item Control

Okay, let’s start with the item and create a file “CustomListItem.js” in the folder “control” (you have to create this folder)



 

I copy the HTML for one item of the list out of the snippet, which looks like this:

<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>

Put it in the Generator plugin:



Hit the convert button ,use the WebIDE beautify function and change the namespace regarding to your project namespace and filename.

UI5 List Control

Now create a javascript file for the list in the control folder.



Now I take the outer tags of the list from the snippet:

<div class="customlist">

  <ul> 

  </ul>

</div>

Again put it in the generator:



Let the converter do his job, then run the beautifier in the WebIDE and change the namespace and control name.

Connect the two controls

I want to use the List Item control in my List control. I’ll need to add some code manually. This part is not (yet) foreseen in the control generator. In the metadata of the list control I’m going to add an aggregation “items”. The definition of the aggregation contains following attributes:

• Type: This is the type of the controls that you can use in the aggregation. We want to use our CustomListItem control in this CustomList. We use the namespace + the name of the custom list item to define the type of the aggregation.


• Multiple: Defines how many times the childe control can be used in the CustomList


• singularName: a reference to one item of the aggregation

Next step is to integrate the aggregation “items” in the renderer function of the list control. Therefore I’ve added a loop ($.each) to render all items in the aggregations.



I also include the css in my project. Just by pasting it in the “style.css”.

Use the control

First step to use the control in the view is by adding a reference to the  folder where the control is located and add a namespace to it (cust):



With the namespace (cust) I can now use my two controls together. First I open the tag for the “CustomList”. Between the “CustomList” tags I open the aggregation tags “items”. There I can then add the “CustomListItem” control. In the “CustomListItem” tags I add the attributes for the hyperlink (href1) and the image (src1).



This is the result:

Use the control with bindings

This step is similar to the previous one but now I’m going to use bindings to show images and hyperlinks.

In the Controller I’ve created a JSONModel with multiple images and hyperlinks which I bind to the view.



In the view I add the binding for the items in the “CustomList”. “grid” is a reference to the array in the JSONModel.

“hyperlink” and “image” are references to the properties in the objects of the array “grid”.



This will look like this.



You can find all the code on github:

https://github.com/lemaiwo/CustomControlAggregation

Preview of the result:

https://cdn.rawgit.com/lemaiwo/CustomControlAggregation/6658d9e9/webapp/index.html

 

You can do make some real cool stuff with custom controls!

 

Kind regards,

Wouter