使用美觀的模板顯示收件箱資料

可以使用美觀的模板來格式化要顯示在收件箱列中的資料。 在本示例中，我們將根據收入列的值顯示coral-ui表徵圖。 以下螢幕快照顯示了收入列中表徵圖的使用

美觀的模板 本文提供了用於顯示自定義coral ui表徵圖的部分。

美觀模板

下面是美觀的模板。 模板中的代碼將根據收入顯示表徵圖。 這些表徵圖可作為 coral ui表徵圖 隨之而來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>

服務實施

以下代碼是顯示收入列的服務實現。

第12行將列與美觀模板關聯

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伺服器

• 以管理員用戶身份登錄crx
• 導入美觀模板
• 登錄AEMWeb控制台
• 部署和啟動收件箱自定義包
• 開啟收件箱
• 通過按一下「建立」按鈕旁的「清單視圖」開啟管理控制項
• 將收入列添加到收件箱並保存更改
• 預覽窗體
• 選擇 婚姻狀況 並提交表格
• 查看收件箱

提交表單將觸發工作流，並且任務已分配給「admin」用戶。 您應在收入列下看到相應的表徵圖

Business.Adobe.com 資源