I modelli Handlebars supportano una serie di funzioni che possono aiutare a rendere correttamente il testo. In questo articolo tratteremo alcune delle funzioni più comuni e il modo in cui possono essere utilizzate in Workiva.
Nota: anche se qui elenchiamo ogni funzione separatamente, molte funzioni di Handlebars possono essere "impilate" o utilizzate all'interno di un'altra funzione.
EACH
La funzione EACH è quella più comunemente utilizzata e destinata all'elaborazione di un JSON. La funzione esegue un loop attraverso un oggetto o un array JSON; la sintassi della funzione utilizza un blocco di apertura e di chiusura. Ogni elemento dell'array può essere utilizzato all'interno del blocco di ciclo EACH:
{{#each object }}
{{object element}}
{{/each}} Nei comandi Render Text Template e Render File Template, l'oggetto/array JSON da elaborare è specificato nella sezione JSON Variables:
Il nome specificato nella sezione Variabili JSON del comando viene utilizzato nel blocco di apertura EACH del modello. Per un semplice array JSON come il seguente, ogni chiave (Priority & Owner nell'esempio seguente) è disponibile per l'elaborazione all'interno del ciclo EACH:
[
{
"Nome del proprietario": "Abby Steere",
"Priorità": "High"
},
{
"Owner Name": "Jeff Hickey",
"Priorità": "Alta"
},
{
"Nome del proprietario": "Ryan Niebruegge",
"Priorità": "Alta"
},
{
"Nome del proprietario": "Ryan Niebruegge",
"Priorità": "Bassa"
},
{
"Nome del proprietario": "Abby Steere",
"Priorità": "Media"
},
{
"Nome del proprietario": "Jeff Hickey",
"Priorità": "Medium"
},
{
"Nome del proprietario": "Ryan Niebruegge",
"Priorità": "Medio"
}
]
Esempio
Proprietario del compito, Priorità del compito
{{#each object_items}}
{{Owner}},{{Priority}}
{{/each}}
Risultato renderizzato
La funzione EACH può elaborare anche oggetti JSON più complessi, compresi quelli con array annidati.
Esempio di oggetto JSON (elenco di prodotti)
{
"prodotti": [
{
"id": 1,
"titolo": "iPhone 14",
"prezzo": 799,
"marca": "Apple",
"categoria": "smartphone",
"immagini": [
"/prodotti/1/1.jpg",
"/prodotti/1/2.jpg",
"/prodotti/1/3.jpg",
"/prodotti/1/4.jpg",
"/prodotti/1/thumbnail.jpg"
]
},
{
"id": 2,
"titolo": "iPhone 15",
"prezzo": 899,
"marca": "Apple",
"categoria": "smartphone",
"immagini": [
"/prodotti/2/1.jpg",
"/prodotti/2/2.jpg",
"/prodotti/2/3.jpg",
"/prodotti/2/thumbnail.jpg"
]
},
{
"id": 3,
"titolo": "S23 Ultra",
"prezzo": 1249,
"marca": "Samsung",
"categoria": "smartphone",
"immagini": [
"/prodotti/3/1.jpg"
]
},
{
"id": 4,
"titolo": "Pixel 8",
"prezzo": 799,
"marca": "Google",
"categoria": "smartphone",
"immagini": [
"/prodotti/4/1.jpg",
"/prodotti/4/2.jpg",
"/prodotti/4/thumbnail.jpg"
]
}
]
, "limite":100
, "totale":4
, "hasmore":false
} Esempio
In questo modello stiamo accedendo a un elemento della radice (totale) e a un array (prodotti) di articoli:
L'oggetto JSON ha {{response.total}} articoli:
{{#each response.products}}
{{title}}
{{/each}} Risultato renderizzato
UNLESS e @FIRST / @LAST
La funzione UNLESS è la più comunemente combinata con gli operatori @FIRST o @LAST per controllare l'output finale.
Ad esempio, quando si crea un elenco delimitato da virgole dei valori da iterare, non è necessario inserire una virgola dopo l'ultimo elemento dell'elenco. Combinando UNLESS e @LAST, è possibile generare facilmente un elenco separato da virgole che non termina con una virgola.
Esempio
{{#each response.products}}{{title}}{{#unless @last}},{{/unless}}{{/each}} Risultato renderizzato utilizzando l'oggetto Elenco di prodotti
IF / ELSEIF / ELSE e EQUAL
Le funzioni IF, ELSEIF ed ELSE permettono di aggiungere logica al modello per tener conto di diversi scenari. L'uso di IF non richiede l'uso di ELSEIF o ELSE se le funzioni sono combinate con gli operatori EQUAL.
L'operatore equal può essere utilizzato per confrontare valori testuali o numerici. Quando si confrontano i valori di testo, se uno dei due valori è specificato esplicitamente e non viene recuperato da una variabile, deve essere racchiuso tra doppi apici.
Esempio
In questo esempio, "brand" nella funzione IF viene recuperato dalla variabile JSON. In fase di esecuzione, la variabile viene sostituita con il valore dell'elemento brand dell'oggetto.
{{brand}},{{#if (uguale marchio "Apple")}}iOS{{else}}Android{/if}} Risultato renderizzato utilizzando l'oggetto Elenco di prodotti
@KEY / THIS / @INDEX
Le funzioni @KEY e THIS sono utili quando si interagisce con oggetti JSON in cui il nome della chiave varia o non è noto.
La funzione @INDEX restituisce la posizione dell'elemento elaborato in ogni operazione.
Nota: La funzione @INDEX è basata su zero quindi il primo elemento dell'elenco ha un valore di indice pari a 0, il secondo pari a 1 e così via.
Esempio di corpo JSON
Questo corpo è la risposta del comando Get File Properties del connettore Workiva:
{
"created": "2023-11-20T21:02:09.000Z",
"id": "91af3ec18c554d5a81fd4ec4edc3a897",
"metadata": {
"account": {},
"importo": {
"numberFormat": ",."
},
"entità": {}
},
"nome": "Sample.csv",
"numRecords": 3,
"originalFileSize": 72,
"status": "IMPORTED",
"tableId": "d1463c30226445819b0dddf57226ccf7",
"tags": {
"WK-Chains-Source": "https://h.sandbox.wdesk.com/s/wdata/oc/app/workiva-chains/find/executor?chainId=95631\u0026chainExecutorId=4217258"
},
"updated": "2023-11-20T21:02:18.000Z",
"userId": "V0ZVc2VyHzU1OTQwMTMxODMzMTE4NzI",
"version": 1
} Esempio
{{#each properties.tags}}
{{@key}},{{{this}}}
{{/each}} Risultato renderizzato
Combinazione di funzioni
Tutte le funzioni descritte in questo articolo possono essere utilizzate in combinazione tra loro. Le funzioni EACH possono essere annidate all'interno di altre funzioni EACH; A MENO CHE le funzioni IF, @KEY, THIS o @INDEX possano essere utilizzate all'interno di una funzione EACH per controllare in modo condizionato l'output renderizzato.
Esempio
In questo modello vengono combinate più funzioni per creare una tabella formattata in HTML:
- La funzione EACH viene utilizzata per scorrere i prodotti.
- Un @INDEX viene utilizzato per recuperare la posizione del prodotto nell'array.
- Una funzione IF valuta il marchio del prodotto e formatta il testo in modo condizionale.
- Un'istruzione EACH nidificata elabora le immagini per ogni prodotto
- Un'istruzione UNLESS aggiunge un'interruzione di riga (
) dopo ogni link all'immagine (eccetto l'ultimo dell'elenco)
| ID articolo | Prodotto | Marchio | Prezzo | Immagini |
|---|---|---|---|---|
| {{@indice}} | {{title}} | {{brand}} | {{price}} | {{#each images}}{{this}}{{#unless @last}} {{/unless}}{{/each}} |
Risultato renderizzato
La tabella risultante, visualizzata in una pagina web o in un'e-mail compatibile con il formato HTML, è visualizzata di seguito: