Centro de suporte da Workiva

Os modelos do Handlebars suportam várias funções que podem ajudar você a renderizar corretamente o texto. Neste artigo, abordaremos algumas das funções mais comuns e como elas podem ser usadas na Workiva.

Observação: Apesar de listarmos cada função separadamente aqui, muitas funções do Handlebars podem ser "empilhadas" ou usadas dentro de outra função.

CADA

A função EACH é mais comumente usada e destina-se ao processamento de um JSON. A função faz um loop em um objeto ou matriz JSON; a sintaxe da função utiliza um bloco de abertura e fechamento. Cada elemento da matriz está disponível para operação dentro do bloco de loop EACH:

{{#each object }}
{{object element}}
{{/each}}

Nos comandos Render Text Template e Render File Template, o objeto/array JSON a ser processado é especificado na seção JSON Variables:

O nome especificado na seção Variáveis JSON do comando é usado no bloco de abertura EACH do modelo.  Para uma matriz JSON simples, como a seguinte, cada chave (Priority & Owner no exemplo abaixo) está disponível para processamento no loop EACH:

[
 {
 "Owner Name" (Nome do proprietário): "Abby Steere",
 "Priority" (Prioridade): "High" (Alta)
 },
 {
 "Owner Name" (Nome do proprietário): "Jeff Hickey",
 "Priority" (Prioridade): "High" (Alta)
 },
 {
 "Owner Name" (Nome do proprietário): "Ryan Niebruegge",
 "Priority" (Prioridade): "High" (Alta)
 },
 {
 "Owner Name" (Nome do proprietário): "Ryan Niebruegge",
 "Priority" (Prioridade): "Low" (Baixa)
 },
 {
 "Owner Name" (Nome do proprietário): "Abby Steere",
 "Priority" (Prioridade): "Medium" (Média)
 },
 {
 "Owner Name" (Nome do proprietário): "Jeff Hickey",
 "Priority" (Prioridade): "Medium" (Médio)
 },
 {
 "Owner Name" (Nome do proprietário): "Ryan Niebruegge",
 "Priority" (Prioridade): "Medium"
 }
]

Exemplo

Proprietário da tarefa, prioridade da tarefa
{{#each object_items}}
{{Owner}},{{Priority}}
{{/each}}

Resultado renderizado

A função EACH também pode processar objetos JSON mais complexos, inclusive aqueles com matrizes aninhadas.

Exemplo de objeto JSON (lista de produtos)

{
 "products": [
 {
 "id": 1,
 "title": "iPhone 14",
 "price": 799,
 "brand": "Apple",
 "category": "smartphones",
 "images": [
 "/products/1/1.jpg",
 "/products/1/2.jpg",
 "/products/1/3.jpg",
 "/products/1/4.jpg",
 "/products/1/thumbnail.jpg"
 ]
 },
 {
 "id": 2,
 "title": "iPhone 15",
 "price": 899,
 "brand": "Apple",
 "category": "smartphones",
 "images": [
 "/products/2/1.jpg",
 "/products/2/2.jpg",
 "/products/2/3.jpg",
 "/products/2/thumbnail.jpg"
 ]
 },
 {
 "id": 3,
 "title": "S23 Ultra",
 "price": 1249,
 "brand": "Samsung",
 "category": "smartphones",
 "images": [
 "/products/3/1.jpg"
 ]
 },
 {
 "id": 4,
 "title": "Pixel 8",
 "price": 799,
 "brand": "Google",
 "category": "smartphones",
 "images": [
 "/products/4/1.jpg",
 "/products/4/2.jpg",
 "/products/4/thumbnail.jpg"
 ]
 }
 ]
, "limit":100
, "total":4
, "hasmore":false
}

Exemplo

Nesse modelo, estamos acessando um item na raiz (total) e também fazendo loop em uma matriz (produtos) de itens:

O objeto JSON tem {{response.total}} itens:
{{#each response.products}}
{{title}}
{{/each}}

Resultado renderizado

UNLESS e @FIRST / @LAST

A função UNLESS é mais comumente combinada com os operadores @FIRST ou @LAST para controlar a saída renderizada final.

Por exemplo, ao criar uma lista delimitada por vírgulas dos valores que estão sendo iterados, não é necessário colocar uma vírgula após o último item da lista. Ao combinar UNLESS e @LAST, você pode gerar facilmente uma lista separada por vírgulas que não termina com uma vírgula.

Exemplo

{{#each response.products}}{{title}}{{#unless @last}},{{/unless}}{{/each}}

Resultado renderizado usando o objeto Product List

IF / ELSEIF / ELSE e EQUAL

As funções IF, ELSEIF e ELSE permitem que a lógica seja adicionada ao modelo para levar em conta diferentes cenários. O uso de IF não exige que ELSEIF ou ELSE sejam usados se as funções também forem combinadas com operadores EQUAL. 

O operador igual pode ser usado para comparar valores de texto ou numéricos. Ao comparar valores de texto, se um dos valores for explicitamente especificado e não recuperado de uma variável, ele deverá ser colocado entre aspas duplas.

Exemplo

Neste exemplo, "brand" na função IF é recuperada da variável JSON. Na execução, a variável é substituída pelo valor no elemento de marca do objeto.

{{brand}},{{#if (equal brand "Apple")}}iOS{{else}}Android{{/if}}

Resultado renderizado usando o objeto Product List

@KEY / THIS / @INDEX

As funções @KEY e THIS são úteis na interação com objetos JSON em que o nome da chave varia ou pode não ser conhecido.

A função @INDEX retorna a posição do item que está sendo processado em uma operação each.

Observação: A função @INDEX é baseada em zero, portanto, o primeiro item da lista tem um valor de índice 0, o segundo tem um índice 1 e assim por diante.

Exemplo de corpo JSON

Esse corpo é a resposta do comando Get File Properties do conector Workiva:

{ 
 "created": "2023-11-20T21:02:09.000Z", 
 "id": "91af3ec18c554d5a81fd4ec4edc3a897", 
 "metadata": { 
 "account": {}, 
 "amount": { 
 "numberFormat": ",." 
 }, 
 "entity": {} 
 }, 
 "name": "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 
}

Exemplo

{{#each properties.tags}}
{{@key}},{{{this}}}
{{/each}}

Resultado renderizado

Combinação de funções

Todas as funções descritas neste artigo podem ser usadas em combinação umas com as outras. As funções EACH podem ser aninhadas dentro de outras funções EACH; as funções UNLESS, IF, @KEY, THIS ou @INDEX podem ser usadas dentro de uma função EACH para controlar condicionalmente a saída renderizada.  

Exemplo

Várias funções são combinadas nesse modelo para criar uma tabela formatada em HTML:

• A função EACH é usada para percorrer os produtos.
• Um @INDEX é usado para recuperar a posição do produto na matriz.
• Uma função IF avalia a marca do produto e formata o texto condicionalmente.
• Uma instrução EACH aninhada processa as imagens de cada produto
• Um comando UNLESS adiciona uma quebra de linha (
  ) após cada link de imagem (exceto o último da lista)

Resultado renderizado

A tabela resultante, quando visualizada em uma página da Web ou em um e-mail compatível com HTML, é exibida abaixo:

Recursos adicionais

• Handlebars conector
• Comandos do Handlebars
• Entendendo o Handlebars