Saltar al contenido

¡Transforma tus conexiones en dinero para el final del año con nuestro nuevo Programa de Indicación de Clientes! Descubre más

✕

Esta documentación es para la versión 4 y posteriores de App Builder, el nuevo nombre de Vinyl. Accede a la documentación de Vinyl aquí.

✕

Cree y use plantillas HTML en Jitterbit App Builder

Las plantillas HTML se pueden usar de muchas maneras para añadir un estilo o funcionalidad únicos y específicos a una aplicación. Hay varias razones para usarlas, pero el objetivo principal es ser creativo. Las plantillas HTML permiten usar HTML, CSS y JavaScript para funcionalizar y estilizar la modelo.

Nota

Si desea obtener una descripción general de HTML, CSS o JavaScript, le recomendamos https://www.w3schools.com/html/html_intro.asp.

Creación de una modelo HTML

Siga estos pasos para crear una modelo HTML.

  1. Comience navegando hasta Look & Feel
  2. Haga clic en el menú de navegación Plantillas
  3. Seleccione la Colección a la que desea agregar la modelo
  4. Haga clic en el botón +Plantilla
  5. Asigna un Nombre a la modelo. Por ejemplo: Inicio Registro
  6. Si desea que se traduzca el contenido de la plantilla HTML, marque para habilitar Traducciones
  7. Haga clic en Guardar

Ahora verá dos campos donde puede introducir el contenido de la modelo HTML: Editor y Fuente. El Editor utiliza un sistema WYSIWYG (lo que ve es lo que obtiene), que actualiza las etiquetas HTML del contenido que se mostrará en su modelo.

editor.png

Al empezar a escribir en el área del Editor, el HTML y el CSS subyacentes que aparecerán en la modelo se generarán en el área de Fuente. Aquí tienes un ejemplo:

sourceview.png

Continúe agregando el contenido necesario a la plantilla HTML, ya sea desde el Editor o la vista Código fuente, según corresponda. La vista Editor le permite aprovechar el estilo WYSIWG. Si desea agregar contenido más complejo que el que admite la vista Editor (por ejemplo, HTML, CSS, JavaScript), deberá trabajar desde la vista Código fuente.

sourceexample.png

Sustitución de Dynamic App Builder

En esta sección, analizaremos el uso de la sustitución dinámica en plantillas HTML. Por ejemplo, si tiene una página con un panel de mosaicos y desea que los nombres de los empleados se vean mejor, puede crear una modelo HTML que concatene las columnas. TitleOfCourtesy, FirstName, y LastName Juntos, estilizan el texto y lo colocan Title Bajo el nombre del empleado, en un texto más pequeño.

employeeboard.png

A continuación, crearemos una modelo HTML con sustitución dinámica de columnas de App Builder.

  1. Navegue hasta la aplicación en la que desea desplegar su modelo o cree una modelo en ella.

  2. Ya tenemos una modelo creada con el tamaño, grosor (negrita) y alineación (centrada) adecuados. Podemos cambiar el texto de "Hello World!" a {{TítuloDeCortesía}} {{Nombre}} {{Apellido}}En el contenido (texto) para mostrar la información correcta.

    Importante

    Asegúrese de elegir columnas que existan en el objeto comercial en la página en la que está colocando la modelo.

    employeetemplatesource.png

  3. A continuación, necesitamos colocar {{Título}} bajo el nombre completo, centrado y en un texto más pequeño. Para ello, introduciremos un nuevo </span> Etiqueta que sigue al contenido existente, ya que este tiene un tamaño de fuente de 25 px y crearemos un nuevo espacio con un tamaño de texto más pequeño.

  4. Luego, podemos ingresar una etiqueta de salto. <br>para indicar que queremos ir a la siguiente línea

  5. Ahora podemos crear un nuevo lapso con un tamaño de fuente de 15 px e ingresar el {{Título}} Columna, cerrar el espacio y quitar negrita.

    <div style="text-align: center;"><strong style="font-size: 25px;">{{TítuloDeCortesía}}{{Nombre}}{{Apellido}}<br>
<span style="font-size: 15px;">{{Título}}`</span></span></strong></div>

    employeepreview.png

  6. Después de crear la modelo, debemos indicarle a la página qué columnas utilizar, por lo que debemos agregarlas a la modelo como se define en Parámetros de plantilla

  7. Ahora podemos agregar la modelo a la página y al panel deseados como un control HTML con la visibilidad de la etiqueta de columna establecida en Oculto
  8. Otra forma de vincular la modelo al panel es hacer clic en el ícono de vinculación de modelo en la página Panel (Opciones de datos) para el control HTML y traer las mismas columnas que escribió en los Parámetros de plantilla.

Ahora el panel del Tablero de empleados se ve mejor y estás más familiarizado con el uso de plantillas HTML en App Builder.

plantilladeempleado.png

Ejemplo de modelo HTML

Aquí hay un panel con dos plantillas HTML. Una muestra el número de personas en la fila y la otra, en la parte inferior, la información del hospital.

modelo HTML 1

Referencia

Consulte la Referencia de elementos HTML de W3Schools guía para obtener más información sobre la sintaxis HTML correcta.