Documentation AEM AEM Tutorials AEM Forms Tutorials

Using sightly template to display inbox data

Last update: Sun Mar 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Applies to:
Experience Manager 6.5

Topics:
Adaptive Forms

CREATED FOR:

Experienced
Developer

You can use sightly template to format the data that is to be displayed in inbox columns. In this example we will display coral-ui icons depending on the value of the income column. The following screenshot shows the use of icons in the income column
income-icons

The sightly template used to display the custom coral ui icons is provided as part of this article.

Sightly template

Following is the sightly template. The code in the template displays icon depending on the income. The icons are available as part of the coral ui icon library that comes with AEM.

<template data-sly-template.incomeTemplate="${@ item}>">
    <td is="coral-table-cell" class="payload-income-cell">
         <div data-sly-test="${(item.workflowMetadata && item.workflowMetadata.income)}" data-sly-set.income ="${item.workflowMetadata.income}">
                 <coral-icon icon="confidenceOne" size="M" data-sly-test="${income >=0 && income <10000}"></coral-icon>
                 <coral-icon icon="confidenceTwo" size="M" data-sly-test="${income >=10000 && income <100000}"></coral-icon>
                 <coral-icon icon="confidenceThree" size="M" data-sly-test="${income >=100000 && income <500000}"></coral-icon>
                 <coral-icon icon="confidenceFour" size="M" data-sly-test="${income >=500000}"></coral-icon>
          </div>
    </td>
</template>

Service implementation

Following code is the service implementation for displaying the income column.

Line 12 associates the column with the sightly template

import java.util.Map;
import org.osgi.service.component.annotations.Component;
import com.adobe.cq.inbox.ui.InboxItem;
import com.adobe.cq.inbox.ui.column.Column;
import com.adobe.cq.inbox.ui.column.provider.ColumnProvider;

@Component(service = ColumnProvider.class, immediate = true)
public class IncomeProvider implements ColumnProvider {
@Override
public Column getColumn() {

return new Column("income", "Income", String.class.getName(),"inbox/customization/column-templates.html", "incomeTemplate");
}

@Override
public Object getValue(InboxItem inboxItem) {
Object val = null;

Map workflowMetadata = inboxItem.getWorkflowMetadata();

if (workflowMetadata != null && workflowMetadata.containsKey("income"))
    val = workflowMetadata.get("income");

return val;
}
}

Test on your server

NOTE

This article assumes you have installed the sample workflow and sample form from previous article in this series.

Login to crx as admin user
import sightly template
Login to AEM web console
Deploy and start inbox customization bundle
Open your inbox
Open Admin Control by clicking on List View next to Create button
Add income column to Inbox and save your changes
Preview the form
Select the marital status and submit the form
View inbox

Submitting the form will trigger the workflow and a task is assigned to “admin” user. You should see appropriate icon under the income column

recommendation-more-help