Uso do modelo sightly para exibir os dados da caixa de entrada
Você pode usar o modelo sightly para formatar os dados a serem exibidos nas colunas da caixa de entrada. Neste exemplo, exibiremos ícones de coral-ui dependendo do valor da coluna de renda. A captura de tela a seguir mostra o uso de ícones na coluna de receita
O modelo sightly usado para exibir os ícones personalizados da interface do coral é fornecido como parte deste artigo.
Modelo do Sightly
A seguir está o template sightly. O código no modelo exibe o ícone dependendo da renda. Os ícones estão disponíveis como parte da biblioteca de ícones da interface do coral isso vem com 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>
Implementação de serviço
O código a seguir é a implementação do serviço para exibir a coluna de receita.
A linha 12 associa a coluna ao modelo 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;
}
}
Testar no servidor
- Fazer logon no crx como usuário administrador
- importar modelo do sightly
- Fazer logon no console da Web do AEM
- Implantar e iniciar o pacote de personalização da caixa de entrada
- Abra sua caixa de entrada
- Abra o Admin Control clicando em Exibição de lista ao lado do botão Criar
- Adicione a coluna de renda à Caixa de entrada e salve as alterações
- Visualizar o formulário
- Selecione o estado civil e enviar o formulário
- Exibir caixa de entrada
O envio do formulário acionará o fluxo de trabalho e uma tarefa será atribuída ao usuário "administrador". Você deve ver o ícone apropriado abaixo da coluna de renda