Uso de campos personalizados en plantillas HTML

Los campos personalizados te permiten almacenar en Ezus información específica de tu cuenta y de tu forma de trabajar.

Puedes mostrar esta información en una plantilla HTML, pero la sintaxis depende de dónde estés utilizando el campo personalizado.

Hay dos casos principales:

Fuera de un bucle: utiliza la variable clásica del campo personalizado disponible en el Variable Drawer.
Dentro de un bucle Jinja: recupera el campo personalizado desde custom_fields del objeto actual.

💡 Antes de añadir un campo personalizado a tu plantilla HTML, identifica dónde está configurado el campo y a qué objeto pertenece. Un campo personalizado de proyecto y un campo personalizado de actividad no utilizan el mismo contexto.

1. Encontrar el nombre técnico del campo personalizado

Los campos personalizados tienen un nombre técnico que se utiliza para identificarlos en las plantillas.

El nombre técnico es especialmente importante cuando recuperas un campo personalizado de un objeto dentro de un bucle Jinja.

Por ejemplo, imagina que tienes un campo personalizado llamado:

Información adicional

con el nombre técnico:

additional_information

El valor que debes utilizar en el HTML es el nombre técnico, no necesariamente el nombre visible del campo personalizado.

💡 Copia el nombre técnico directamente desde la configuración del campo personalizado. Esto ayuda a evitar errores causados por espacios, signos de puntuación o diferencias entre el nombre visible y el nombre técnico.

2. Utilizar un campo personalizado fuera de un bucle

Cuando el campo personalizado está disponible como una variable estándar de Ezus, búscalo en el Variable Drawer.

En HTML, los campos personalizados clásicos utilizan una sintaxis específica.

Por ejemplo, en lugar de:

$$project.{{description}}$$

utiliza:

$$project.__description__$$

Aquí, description es el nombre técnico del campo personalizado.

Esta sintaxis se utiliza cuando trabajas con una variable clásica de Ezus en lugar de con un objeto actual dentro de un bucle Jinja.

💡 Si el campo personalizado está disponible en el Variable Drawer, cópialo desde allí en lugar de reconstruir la variable manualmente.

3. Utilizar un campo personalizado dentro de un bucle

Dentro de un bucle Jinja, el campo personalizado pertenece al objeto actual.

Por ejemplo, si estás recorriendo actividades:

{% for activity in activities %}   {{ activity.custom_fields.additional_information }} {% endfor %}

En este ejemplo:

activity es la actividad actual dentro del bucle.
custom_fields permite acceder a sus campos personalizados.
additional_information es el nombre técnico del campo personalizado.

Si cada actividad contiene un valor diferente para Información adicional, Ezus recupera el valor correspondiente para cada actividad a medida que se genera el bucle.

El mismo principio se aplica a otros objetos que disponen de campos personalizados, incluidos:

Etapas
Alojamientos
Transportes
Viajeros
Proveedores
Productos
Paquetes

Por ejemplo, dentro del bucle correspondiente, la estructura sigue la misma lógica:

{{ step.custom_fields.technical_name }}

{{ accom.custom_fields.technical_name }}

{{ transp.custom_fields.technical_name }}

{{ supplier.custom_fields.technical_name }}

{{ product.custom_fields.technical_name }}

Sustituye technical_name por el nombre técnico del campo personalizado que quieras mostrar.

🔭 Consulta Uso de bucles en plantillas HTML para aprender a crear y trabajar con contenido repetido.

4. Campos personalizados con caracteres especiales

Algunos nombres técnicos contienen signos de puntuación u otros caracteres especiales.

En este caso, es posible que la notación con punto no funcione correctamente.

En lugar de:

{{ activity.custom_fields.technical_name }}

utiliza corchetes y comillas:

{{ activity.custom_fields["technical_name"] }}

Por ejemplo, si el nombre técnico es:

_01_-additional-information--_

utiliza:

{{ activity.custom_fields["_01_-additional-information--_"] }}

💡 Si un campo personalizado no se muestra aunque contenga información, comprueba primero su nombre técnico. Si contiene signos de puntuación o caracteres especiales, prueba la notación con corchetes y comillas.

5. Conservar los saltos de línea en campos personalizados multilínea

Un campo personalizado puede contener varias líneas de texto, pero HTML no conserva necesariamente esos saltos de línea cuando se genera la página web.

Si un campo personalizado multilínea aparece como una única línea continua, utiliza CSS para conservar los saltos de línea.

Por ejemplo:

white-space: pre-line;

Puedes aplicarlo al elemento HTML que muestra el campo personalizado.

Por ejemplo:

<p style="white-space: pre-line;">   {{ activity.custom_fields.additional_information }} </p>

Si también quieres conservar los espacios además de los saltos de línea, utiliza:

white-space: pre-wrap;

También puedes aplicar la regla globalmente a los elementos de párrafo:

<style>   p {     white-space: pre-line;   } </style>

⚠️ Una regla CSS global se aplica a todos los elementos coincidentes de la plantilla. Si aplicas white-space: pre-line; a todos los elementos <p>, comprueba la página web generada completa para asegurarte de que otros párrafos no se vean afectados de forma inesperada.

6. Añadir un enlace clicable dentro de un campo personalizado

Si el contenido de un campo personalizado necesita incluir un enlace clicable, utiliza un enlace HTML:

<a href="https://example.com" target="_blank">Text to show</a>

Por ejemplo:

<a href="https://example.com" target="_blank">View more information</a>

La URL debe comenzar por:

https://

Esto permite abrir el enlace cuando el contenido se muestra en la página web generada.

7. Solucionar problemas con un campo personalizado

Si un campo personalizado no se muestra correctamente, comprueba lo siguiente:

¿El campo personalizado contiene un valor?
Comprueba la información de origen en Ezus.
¿Estás haciendo referencia al objeto correcto?
Un campo personalizado de una actividad debe recuperarse desde el contexto de la actividad, uno de producto desde el contexto del producto, y así sucesivamente.
¿El nombre técnico es correcto?
Compara el nombre de tu HTML con el nombre técnico configurado en Ezus.
¿El nombre técnico contiene caracteres especiales?
Si es así, utiliza la notación con corchetes:
```
{{ activity.custom_fields["technical_name"] }}
```
¿Estás utilizando la sintaxis correcta para el contexto?
Un campo personalizado clásico del Variable Drawer y un campo personalizado dentro de un bucle Jinja no utilizan la misma sintaxis.
¿Un campo multilínea ha perdido sus saltos de línea?
Utiliza white-space: pre-line; o white-space: pre-wrap;.

⚠️ Un resultado vacío no significa necesariamente que la sintaxis HTML sea incorrecta. Comprueba que el campo personalizado esté completado en el objeto específico utilizado para generar la página web antes de modificar la plantilla.

8. Probar tu campo personalizado

Después de añadir un campo personalizado a una plantilla HTML:

Guarda la plantilla.
Genera la página web con un proyecto en el que el campo personalizado contenga información.
Comprueba que aparezca el valor esperado.
Si el campo personalizado está dentro de un bucle, comprueba varios elementos generados y no solo el primero.
Prueba la misma plantilla con un campo personalizado vacío para asegurarte de que el diseño que lo rodea siga funcionando correctamente.
Si el campo contiene varias líneas, caracteres especiales o enlaces, comprueba también estos elementos en la página web generada.

💡 Para los campos personalizados dentro de bucles, realiza pruebas con varios objetos que contengan valores diferentes. Esto facilita comprobar que la plantilla está recuperando el campo personalizado del objeto actual, en lugar de mostrar repetidamente la misma información.