sightly touchui

Multifield Touch UI Sightly Component


From AEm 6.x, both Touch UI and Sightly has become integral part and first approach to build the components. So I have tried my best to demonstrate how to create a Touch UI component using Sightly in this article.

Multifield Touch UI Component

  • Create node ‘touchmulti’ of type cq: component
  • Add ‘cq:dialog’ of type nt:unstructured for Touch UI dialog
  • Add ‘dialog’ of type ‘cq:Dialog’ for classic UI dialog. In this example we will not build the classic UI dialog but create this so that component is listed in the sidekick
  • Add touchmulti.html
  • Add ‘clientlib’ of type ‘cq:clientLibraryFolder’. Add ‘categories’ property with value ‘cq.authoring.dialog’

multifield touchui component

Touch UI Dialog

Create nodes under ‘cq:dialog’ as shown in the diagram

cq dialog
cq dialog



Now, go to any of the page, verify if your touchmulti component is available in the side rail, Drag and drop and you see the above text coming up and when you double click Touch UI dialog opens up.

multifield touchui dialog

Once you have successfully build the component with multifield widget, now let us see how to read the values and display it in our HTML using Sightly

multifield touchui rendering

If we see, we have two fields in the multifield which is ‘page’ and ‘path’ within the multifield, so I would create a bean for these properties as below


Now, each tab of the dialog, has a field ‘dashboard’ and the multifield which is nothing but the list of ‘ItemsBean’. Create the bean for the same


Once we have created the beans to hold the values for the fields of the component, let us create a Sightly Java component to read these properties via bean and send the list of values as below.

Key things to consider is

  •     This class extends ‘WCMUse‘ which makes this class available for us to use in the Sightly HTML script.
  •     Override the method activate() so that it gets executed as soon as this is class is instantiated.



  • Use <data-sly-use> to instantiate the component class and assign to an object called ‘mbeanObj’
  • Now mbeanObj.mBean will call the method getMBean() in the component class which returns the List<TouchMultiBean>
  • <data-sly-test> is used to do null check for the respective objects
  • <data-sly-list> is used to iterate the list to print the values


Check an adobe community article in detail here. You can also download the github project

I have used the multifield touch ui component example shown by ‘Sreekanth Choudry’ and created this example to use Sightly for the same.

4 thoughts on “Multifield Touch UI Sightly Component

  1. HI,
    i need to create custom multifield in touch ui, for 5.6 i used to create by using extjs , for touch ui i dont have any idea can any one help me for this.


Leave a Reply

Your email address will not be published. Required fields are marked *