Las plantillas de los Manillares admiten una serie de funciones que pueden ayudar a representar correctamente tu texto. En este artículo cubriremos algunas de las funciones más comunes y cómo pueden utilizarse en Workiva.
Nota: Aunque aquí enumeramos cada función por separado, muchas funciones de Handlebars pueden "apilarse" o utilizarse dentro de otra función.
CADA
La función CADA es la más utilizada, y está pensada, para procesar un JSON. La función recorre en bucle un objeto o matriz JSON; la sintaxis de la función utiliza un bloque de apertura y cierre. Cada elemento de la matriz está disponible para funcionar dentro del bloque de bucle EACH:
{{#cada objeto }}
{{elemento del objeto}}
{{/cada uno}} En los comandos Representar plantilla de texto y Representar plantilla de archivo, el objeto/matriz JSON que se va a procesar se especifica en la sección Variables JSON:
El nombre especificado en la sección Variables JSON del comando se utiliza en CADA bloque de apertura de la plantilla. Para una matriz JSON sencilla como la siguiente, cada clave (Prioridad y Propietario en el ejemplo siguiente) está disponible para su procesamiento dentro del bucle EACH:
[
{
"Nombre del Propietario": "Abby Steere",
"Prioridad": "Alta"
},
{
"Nombre del Propietario": "Jeff Hickey",
"Prioridad": "Alta"
},
{
"Nombre del Propietario": "Ryan Niebruegge",
"Prioridad": "Alta"
},
{
"Nombre del Propietario": "Ryan Niebruegge",
"Prioridad": "Baja"
},
{
"Nombre del Propietario": "Abby Steere",
"Prioridad": "Media"
},
{
"Nombre del Propietario": "Jeff Hickey",
"Prioridad": "Media"
},
{
"Nombre del Propietario": "Ryan Niebruegge",
"Prioridad": "Media"
}
]
Ejemplo
Propietario de la tarea,Prioridad de la tarea
{{#each object_items}}
{{Owner}},{{Priority}}
{{/each}}
Resultado representado
La función CADA también puede procesar objetos JSON más complejos, incluidos los que tienen matrices anidadas.
Ejemplo de objeto JSON (lista de productos)
{
"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
} Ejemplo
En este modelo estamos accediendo a un elemento de la raíz (total), así como recorriendo una matriz (productos) de elementos:
El Objeto JSON tiene {{response.total}} elementos:
{{#each response.products}}
{{title}}
{{/each}} Resultado representado
A MENOS QUE y @PRIMERO / @ÚLTIMO
La función UNLESS se suele combinar con los operadores @FIRST o @LAST para controlar el resultado final.
Por ejemplo, al crear una lista delimitada por comas de los valores que se están iterando, no es necesario poner una coma después del último elemento de la lista. Combinando UNLESS y @LAST, se puede generar fácilmente una lista separada por comas que no finalice con una coma.
Ejemplo
{{#each response.products}}{{title}}{{#unless @last}},{{/unless}}{{/each}} Resultado representado utilizando el objeto Lista de productos.
IF / ELSEIF / ELSE y EQUAL
Las funciones IF, ELSEIF y ELSE permiten añadir lógica a la plantilla para tener en cuenta distintos escenarios. El uso de IF no requiere que se utilice ELSEIF o ELSE si las funciones también se combinan con operadores IGUAL.
El operador igual puede utilizarse para comparar valores de texto o numéricos. Al comparar valores de texto, si alguno de los valores se especifica explícitamente y no se obtiene de una variable, debe ir entre comillas dobles.
Ejemplo
En este ejemplo, "marca" en la función SI se obtiene desde la variable JSON. En la ejecución, la variable se reemplaza por el valor del elemento de marca del objeto.
{{brand}},{{#if (igual marca "Apple")}}iOS{{else}}Android{{/if}} Resultado representado utilizando el objeto Lista de productos.
@CLAVE / ESTO / @ÍNDICE
Las funciones @KEY y THIS son útiles cuando se interactúa con objetos JSON en los que el nombre de la clave varía o puede no conocerse.
La función @INDEX devuelve la posición del elemento que se está procesando en cada operación.
Nota: La función @INDEX está basada en cero, por lo que el primer elemento de la lista tiene un valor de índice 0, el segundo un índice 1, etc.
Ejemplo de cuerpo JSON
Este cuerpo es la respuesta del comando Obtener propiedades de archivos del conector Workiva:
{
"creado": "2023-11-20T21:02:09.000Z",
"id": "91af3ec18c554d5a81fd4ec4edc3a897",
"metadata": {
"cuenta": {},
"importe": {
"numberFormat": ",."
},
"entidad": {}
},
"nombre": "Muestra.csv",
"numRecords": 3,
"originalFileSize": 72,
"status": "IMPORTED",
"tableId": "d1463c30226445819b0dddf57226ccf7",
"Etiquetas": {
"WK-Cadenas-Fuente": "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
} Ejemplo
{{#each propiedades.etiquetas}}
{{@key}},{{{this}}}
{{/each}} Resultado representado
Combinación de funciones
Todas las funciones descritas en este artículo pueden utilizarse combinadas entre sí. Las funciones EACH pueden anidarse dentro de otras funciones EACH; las funciones UNLESS, IF, @KEY, THIS o @INDEX pueden usarse en una función EACH para controlar condicionalmente el resultado renderizado.
Ejemplo
En este modelo se combinan varias funciones para crear una tabla con formato HTML:
- La función EACH se utiliza para recorrer los productos.
- Se utiliza un @INDEX para recuperar la posición del producto en la matriz.
- Una función SI evalúa la marca del producto y formatea condicionalmente el texto.
- Una sentencia EACH anidada procesa las imágenes de cada producto
- Una sentencia UNLESS añade un salto de línea (
) después de cada enlace de imagen (excepto el último de la lista).
| ID del elemento | Producto | Marca | Precio | Imágenes |
|---|---|---|---|---|
| {{@index}} | {{title}} | {{brand}} | {{price}} | {{#each images}}{{this}}{{#unless @last}} {{/unless}}{{/each}} |
Resultado representado
A continuación se muestra la tabla resultante cuando se visualiza en una página web o en un correo electrónico compatible con HTML: