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’


Touch UI Dialog

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

cq dialog

Touchmulti.html<h2>This is Multi Field Touch UI Sightly Component</h2>

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.


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



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

public class ItemsBean {

private String page;
private String path;

public String getPage() {
return page;
}

public void setPage(String page) {
this.page = page;
}

public String getPath() {
return path;
}

public void setPath(String path) {
this.path = path;
}
}

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

public class TouchMultiBean {

private String dashboard;
private List < ItemsBean > items;
public List < ItemsBean > getItems() {
return items;
}

public void setItems(List < ItemsBean > items) {
this.items = items;
}

public String getDashboard() {
return dashboard;
}

public void setDashboard(String dashboard) {
this.dashboard = dashboard;
}
}

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.

public class TouchMultiComponent extends WCMUse {

private TouchMultiBean mBean = null;
private ItemsBean iBean = null;
private List < ItemsBean > lBean = null;
private List < TouchMultiBean > multiList = null;

@Override
public void activate() throws Exception {
multiList = new ArrayList < TouchMultiBean > ();
Node currentNode = getResource().adaptTo(Node.class);

String[] tabs = {
"i",
"u",
"uk"
};

for (int i = 0; i < tabs.length; i++) {
String currentItem = tabs[i] + "Items";
if (currentNode.hasProperty(currentItem)) {
setItems(currentNode, currentItem);
if (currentNode.hasProperty(tabs[i] + "Dashboard")) {
mBean.setDashboard(currentNode.getProperty(tabs[i] + "Dashboard").getString());
}
multiList.add(mBean);
}
}
}

private void setItems(Node currentNode, String tab)
throws PathNotFoundException, RepositoryException, ValueFormatException, JSONException {
Value[] value;
JSONObject jObj;
Property currentProperty;
mBean = new TouchMultiBean();
lBean = new ArrayList < ItemsBean > ();
currentProperty = currentNode.getProperty(tab);
if (currentProperty.isMultiple()) {
value = currentProperty.getValues();
} else {
value = new Value[1];
value[0] = currentProperty.getValue();
}

for (int i = 0; i < value.length; i++) {
jObj = new JSONObject(value[i].getString());
iBean = new ItemsBean();
iBean.setPage(jObj.getString("page"));
iBean.setPath(jObj.getString("path"));
lBean.add(iBean);
}
https: //www.viagrasansordonnancefr.com/viagra-en-pharmacie/
mBean.setItems(lBean);
}

public List < TouchMultiBean > getMBean() {
return this.multiList;
}
}

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

<h2>This is Multi Field Touch UI Sightly Component</h2></br>
<div data-sly-use.mbeanObj="org.test.testmulti.core.models.TouchMultiComponent">
<p>
<div data-sly-test="${!mbeanObj.mBean}">Add values in Dialog</div>
<div data-sly-test="${mbeanObj.mBean}" data-sly-list.items="${mbeanObj.mBean}">
<h3>${items.dashboard}</h3>
<div data-sly-list.itemsList="${items.items}">
<p><b>page:</b> ${itemsList.page}</p>
<p><b>path:</b> ${itemsList.path}</p>
</div>
</div>
</p>
</div>

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.