Utilizzo del modello Sightly per visualizzare i dati della casella in entrata

È possibile utilizzare un modello Sightly per formattare i dati da visualizzare nelle colonne della casella in entrata. In questo esempio verranno visualizzate le icone coral-ui a seconda del valore della colonna reddito . La schermata seguente mostra l'uso di icone nella colonna reddito

Questo articolo include il modello Sightly utilizzato per visualizzare le icone dell’interfaccia utente coral personalizzata.

Modello Sightly

Segue il modello Sightly. Il codice nel modello visualizza l'icona a seconda del reddito. Le icone sono disponibili come parte della libreria di icone dell'interfaccia utente coral che viene fornita con 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>

Implementazione del servizio

Il codice seguente è l'implementazione del servizio per la visualizzazione della colonna reddito .

La riga 12 associa la colonna al modello 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;
}
}

Test sul server

• Accedi a crx come utente amministratore
• modello Importazione guidata
• Accedi alla console web AEM
• Distribuzione e avvio del bundle di personalizzazione della casella in entrata
• Apri la inbox
• Apri Admin Control facendo clic su Vista a elenco accanto al pulsante Crea
• Aggiungi la colonna reddito alla casella in entrata e salva le modifiche
• Visualizzare l’anteprima del modulo
• Selezionare lo stato civile e inviare il modulo
• Visualizza casella in entrata

L’invio del modulo attiverà il flusso di lavoro e un’attività verrà assegnata all’utente "amministratore". Dovresti trovare l'icona appropriata nella colonna reddito