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

È possibile utilizzare il modello Sightly per formattare i dati da visualizzare nelle colonne della casella in entrata. In questo esempio visualizzeremo icone di interfaccia utente coral a seconda del valore della colonna reddito. La schermata seguente mostra l’uso delle icone nella colonna delle entrate
icone di reddito

Il modello Sightly utilizzato per visualizzare le icone dell’interfaccia utente coral personalizzate, come parte di questo articolo.

Modello Sightly

Di seguito è riportato il modello Sightly. Il codice nel modello visualizza l’icona a seconda del reddito. Le icone sono disponibili come parte del libreria icona interfaccia utente coral con l'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 visualizzare la colonna delle entrate.

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

NOTE
Questo articolo presuppone che tu abbia installato workflow di esempio e modulo di esempio da articolo precedente in questa serie.

L’invio del modulo attiverà il flusso di lavoro e un’attività verrà assegnata all’utente "amministratore". Dovresti visualizzare l’icona appropriata sotto la colonna delle entrate

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e