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

Touchmulti.html

 

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.

 

Touchmulti.html

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

One thought on “Multifield Touch UI Sightly Component

Leave a Reply

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