使用Sightly範本顯示收件匣資料
您可以使用Sightly範本來格式化要顯示在收件匣欄中的資料。 在此範例中,我們將根據收入欄的值顯示coral-ui圖示。 下列熒幕擷圖顯示收入欄中的圖示使用
本文中提供了用於顯示自訂coral ui圖示的sightly範本。
Sightly範本
以下是sightly範本。 樣版中的程式碼會根據收入顯示圖示。 這些圖示是AEM隨附的coral ui icon library的一部分。
<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>
服務實作
下列程式碼是顯示收入欄的服務實作。
第12行將欄與sightly範本建立關聯
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;
}
}
在您的伺服器上測試
- 以管理員使用者身分登入crx
- 匯入sightly範本
- 登入AEM網頁主控台
- 部署和啟動收件匣自訂套裝
- 開啟您的收件匣
- 按一下「建立」按鈕旁的「清單檢視」以開啟「管理員控制項」
- 新增收入欄至收件匣並儲存變更
- 預覽表單
- 選取 婚姻狀況 並提交表單
- 檢視收件匣
提交表單會觸發工作流程,且任務會指派給「管理員」使用者。 您應該會在收入欄下方看到適當的圖示
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e