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

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

• Accedi a crx come utente amministratore
• importa modello sightly
• Accedi alla console web AEM
• Distribuire e avviare il bundle di personalizzazione della casella in entrata
• Apri la casella in entrata
• Per aprire Admin Control (Controllo amministratore), fai clic su List View (Vista elenco) accanto al pulsante Create (Crea).
• Aggiungi la colonna delle entrate alla casella in entrata e salva le modifiche
• Visualizzare l’anteprima del modulo
• Seleziona la stato civile e invia il modulo
• Visualizza casella in entrata

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

Risorse Business.Adobe.com