Crear y usar plantillas HTML en Jitterbit App Builder

Una plantilla HTML es un bloque reutilizable de HTML, CSS y JavaScript que se diseña una sola vez en el área Look & Feel de App Builder, luego se vincula a un panel Custom HTML para generar marcado dinámico a partir de los datos de tu aplicación. Las plantillas te ofrecen más estilos y funcionalidad que un control estándar solo, como combinar varias columnas en un bloque de texto formateado o incrustar un diseño personalizado, mapa o gráfico.

Esta es una característica distinta del control HTML, que muestra HTML escrito directamente en una sola columna vinculada a través de un editor WYSIWYG. Usa una plantilla cuando necesites combinar múltiples columnas o agregar marcado personalizado alrededor de tus datos; usa el control HTML cuando una sola columna ya contiene el HTML que deseas mostrar.

Crear una plantilla HTML

Esta sección te guía a través de la creación de una nueva plantilla HTML vacía y su población con contenido estático.

1. Selecciona App Workbench > Look & Feel > Templates.
2. Selecciona la Collection a la que pertenece la plantilla.
3. Haz clic en + Template.
4. Asigna un Name para la plantilla. Por ejemplo: Home Signup.
5. Si deseas que el contenido de la plantilla se traduzca, marca para habilitar Translations. Consulta Translation templates para saber cómo traducirla posteriormente.
6. Haz clic en Save.

Guardar la plantilla abre dos campos donde puedes ingresar su contenido: Editor y Source. Editor es un campo WYSIWYG (What You See Is What You Get) que actualiza las etiquetas HTML subyacentes a medida que escribes.

A medida que escribes en Editor, el HTML y CSS subyacente que genera aparece debajo en Source:

Continúa agregando contenido usando cualquiera de las vistas, según corresponda. Editor te permite aprovechar el estirado WYSIWYG, mientras que Source es donde trabajas directamente con cualquier cosa más compleja de lo que Editor permite, como HTML, CSS o JavaScript personalizado.

Agregar sustitución dinámica a una plantilla

Una plantilla también puede extraer su contenido de columnas de App Builder, sustituyendo datos en vivo en el HTML cada vez que se procesa. Por ejemplo, una página que usa un panel Custom HTML podría mostrar una lista de empleados, concatenando las columnas TitleOfCourtesy, FirstName y LastName en un único nombre con estilo, con la columna Title mostrada debajo en texto más pequeño:

Para construir una plantilla como esta:

1. Navega o crea una plantilla en la aplicación donde deseas usarla.

2. Este ejemplo comienza con una plantilla ya tamaño, ponderado (negrita) y alineado (centrado) según sea necesario, que contiene el texto de marcador de posición "Hello World!". Cambia ese texto a las columnas que deseas sustituir, por ejemplo {{TitleOfCourtesy}} {{FirstName}} {{LastName}}.

   Importante

   Asegúrate de elegir columnas que existan en el objeto de negocio en la página donde coloques la plantilla.

   

3. Coloca {{Title}} bajo el nombre completo, centrado y en texto más pequeño, insertando una nueva etiqueta </span> después del contenido existente: ese contenido ya tiene un tamaño de fuente de 25px, por lo que el nuevo span necesita el suyo propio, más pequeño.

4. Agrega una etiqueta de salto (<br>) para pasar a la siguiente línea.
5. Crea un nuevo span con un tamaño de fuente de 15px que contenga la columna {{Title}}, luego cierra el span y la negrita:

<div style="text-align: center;"><strong style="font-size: 25px;">{{TitleOfCourtesy}}{{FirstName}}{{LastName}}<br>
<span style="font-size: 15px;">{{Title}}</span></span></strong></div>

1. Añade las columnas que la plantilla usa ahora como Parámetros de plantilla, para que la página sepa qué columnas pasar.
2. Añade un panel a la página deseada y establece su Tipo de panel a HTML personalizado.
3. En la pestaña Panel del panel, establece Propiedades de plantilla en la plantilla que creaste.
4. Haz clic en el icono de cadena junto a Propiedades de plantilla para abrir el diálogo Vinculaciones de parámetros de plantilla, luego haz clic en Crear.
5. En el diálogo Vinculación de parámetro, selecciona el Parámetro de plantilla a vincular, establece Tipo de parámetro en Columna, selecciona la Columna de destino coincidente y haz clic en Guardar. Repite esto para cada parámetro de plantilla.

Con el panel vinculado, el Tablero de empleados ahora muestra el nombre y título de cada empleado a partir de los datos subyacentes:

Ejemplo: plantillas en un panel HTML personalizado

Un panel HTML personalizado puede contener más de una plantilla. El siguiente panel combina dos plantillas: una que muestra el número de personas en fila actualmente y otra que muestra información del hospital en la parte inferior.