Utiliser un modèle Sightly pour afficher les données de boîte de réception
Vous pouvez utiliser un modèle Sightly pour formater les données à afficher dans les colonnes de la boîte de réception. Dans cet exemple, nous allons afficher les icônes de l’interface utilisateur Coral UI en fonction de la valeur de la colonne des revenus. La copie d’écran suivante montre l’utilisation des icônes dans la colonne des revenus.
Le modèle Sightly utilisé pour afficher les icônes d’interface utilisateur Coral UI personnalisées est fourni dans cet article.
Modèle Sightly
Voici le modèle Sightly. Le code du modèle affiche une icône en fonction des revenus. Les icônes sont disponibles dans la bibliothèque d’icônes de l’interface utilisateur Coral UI fournie avec 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>
Mise en œuvre du service
Le code suivant correspond à la mise en œuvre du service pour l’affichage de la colonne des revenus.
La ligne 12 associe la colonne au modèle 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;
}
}
Tester sur votre serveur
- Connectez-vous à CRX en tant qu’administrateur ou administratrice.
- Importez le modèle Sightly.
- Connectez-vous à la console web AEM.
- Déployez et démarrez le lot de personnalisation de la boîte de réception.
- Ouvrez votre boîte de réception.
- Ouvrez le contrôle d’administration en cliquant sur la vue Liste en regard du bouton Créer.
- Ajoutez une colonne des revenus à la boîte de réception et enregistrez vos modifications.
- Prévisualisez le formulaire.
- Sélectionnez l’état civil et envoyez le formulaire.
- Affichez la boîte de réception.
L’envoi du formulaire déclenche le workflow et une tâche est assignée à l’administrateur ou à l’administratrice. L’icône appropriée devrait s’afficher sous la colonne des revenus.