Crear y Utilizar Plantillas HTML¶

Las plantillas HTML se pueden utilizar de muchas formas diferentes para añadir un estilo o una funcionalidad únicos y específicos a una aplicación. Existen varias razones para utilizar plantillas HTML, pero el objetivo principal de utilizar una plantilla HTML es ser creativo con ella. Las plantillas HTML te permiten utilizar HTML, CSS y JavaScript para darle funcionalidad y estilo a tu modelo.

Creando 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 Registrarse
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 ingresar el contenido de la modelo HTML correspondiente: Editor y Fuente. El editor utiliza un formato WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes) que actualiza las etiquetas HTML en el contenido que se mostrará en su modelo.

Cuando comience a escribir en el área del Editor, el código HTML y CSS subyacente que aparecerá en la modelo se generará debajo, en el área Fuente. A continuación, se muestra un ejemplo:

Continúe agregando el contenido requerido a la plantilla HTML, ya sea mediante la vista Editor o la vista Fuente, según corresponda. La vista Editor le permite aprovechar el estilo WYSIWG. Si desea agregar algo más complejo que lo que admite la vista Editor (por ejemplo, HTML, CSS, JavaScript), deberá trabajar en la vista Fuente.

Dinámico App Builder sustitución¶

En esta sección, veremos cómo usar la sustitución dinámica en plantillas HTML. Por ejemplo, puede tener una página que utilice 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 y estilizan el texto y lo colocan Title debajo del nombre del empleado en un texto más pequeño.

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

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, el grosor (negrita) y la alineación (centrada) adecuados. Podemos cambiar el texto de "Hello World!" a {{TítuloDeCortesía}} {{Nombre}} {{Apellido}}en Contenido (texto) para mostrar la información adecuada

   Importante

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

   

3. A continuación, debemos colocar {{Título}} debajo del nombre completo, centrado y en un texto más pequeño. Para ello ingresaremos un nuevo </span> Etiqueta que sigue al contenido existente porque el contenido existente tiene un tamaño de fuente de 25 px y crearemos un nuevo intervalo 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 intervalo con un tamaño de fuente de 15 px e ingresar el {{Título}} columna, cerrar el espacio y cerrar el texto en 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>
   

   

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 Oculta
8. Otra parte del proceso de vinculación de 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.

Ejemplo de Modelo HTML¶

Aquí hay un panel de control con dos plantillas HTML. Una muestra la cantidad de personas en la fila y la otra brinda información del hospital en la parte inferior.

Referencia¶

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