Configuración de HTMLs

La funcionalidad de HTMLs se utiliza como tipos de tareas de listas de chequeo y sirven para agregar formularios que le permitan al usuario agregar información al caso o mostrar páginas informativas.

Nota: Es posible segmentar los HTMLs por rol, lo que permite definir qué roles tendrán visibilidad sobre cada formulario.

Para crear un HTML, realice los siguientes pasos:

1. Navegue a Proceso > Html.
2. El sistema lista todos los HTMLs que se han creado en la herramienta.
3. Clic en el botón Crear ubicado en la parte superior derecha de la pantalla.
4. Ingrese el nombre con el que se identificará el HTML en el campo Nombre.
5. Ingrese el rol que visualizará los formularios en el campo Rol
6. Seleccione un valor en el campo Guardado automático
   1. El valor SI indicará que se guardará de forma automática el valor del campo del formulario en el caso, cuando se sale del campo que está siendo llenado.
   2. El valor NO indicará que no se guardará de forma automática el valor del campo del formulario cuando se sale del campo que está siendo llenado sino, solo hasta que el agente da clic en el botón Guardar o Enviar del HTML.
7. Ingrese el código HTML en el campo HTML.
8. Clic en el botón Guardar ubicado en la parte superior derecha de la pantalla.

Para modificar un HTML, realice los siguientes pasos:

1. Navegue a Proceso > Html.
2. El sistema lista todos los HTMLs que se han creado en la herramienta.
3. Clic en el botón Modificar ubicado al final del registro HTML que desea modificar.
4. Modifique el nombre del HTML en el campo Nombre.
5. Ingrese el rol que visualizará los formularios en el campo Rol
6. Seleccione un valor en el campo Guardado automático
   1. El valor SI indicará que se guardará de forma automática el valor del campo del formulario en el caso, cuando se sale del campo que está siendo llenado.
   2. El valor NO indicará que no se guardará de forma automática el valor del campo del formulario cuando se sale del campo que está siendo llenado sino, solo hasta que el agente da clic en el botón Guardar o Enviar del HTML.
7. Modifique el código HTML en el campo HTML.
8. Clic en el botón Guardar ubicado en la parte superior derecha de la pantalla.

Para eliminar un HTML, realice los siguientes pasos:

1. Navegue a Proceso > Html.
2. El sistema lista todos los HTMLs que se han creado en la herramienta.
3. Clic en el botón Eliminar ubicado al final del registro HTML que desea eliminar.
4. Clic nuevamente en el botón Eliminar para confirmar la eliminación del registro.

Con el objetivo de facilitar la creación de contenido a partir de código HTML, Be Aware 360 permite previsualizar el contenido creado directamente en la vista de edición del HTML.

Esta opción de previsualización está disponible en las siguientes secciones:

• HTML en Listas de Chequeo
• Plantillas de Encuestas
• Plantillas de Correos

Para acceder a esta funcionalidad, se encontrarán los siguientes elementos en el menú izquierdo de cada vista:

• Botón de previsualización: Representado por un icono de un ojo. Al hacer clic en este botón, se activará la previsualización del código.
• Botón de vista lateral: Representado por una flecha apuntando hacia la derecha. Al hacer clic en este botón, la vista previa se mostrará en el lado derecho del código, ocupando la mitad de la pantalla.
• Botón de vista inferior: Representado por una flecha apuntando hacia abajo. Al hacer clic en este botón, la vista previa se ubicará en la parte inferior del código, ocupando todo el ancho de la pantalla.

La funcionalidad de HTML permiten desplegar información o generar formularios con los cuales pueden interactuar los usuarios. Sin embargo es importante considerar que esta funcionalidad esta basada en un interprete HTML, por lo que se debe considerar algunas condiciones al momento de usar esta característica.

Capacidades

• Lo primero a considerar es que acepta casí todas las etiquetas usadas en HTML, esto nos permite por ejemple generar titulos (<h1>, <h2>, …), crear tablas (<table>, <tr>, <th>), usar formatos (<div>,<p>), crear bloques (<div>), entre otros.
• También es posible aplicar estilos mediante CSS (<style)
• A nivel de formulario se pueden agregar diferentes campos, incluso listas desplegables (<select>). Es importante considerar que los datos que se almacenaran en variables del sistema mediante la etiqueta v-model
• Es posible agregar imagenes al HTML mediante la etiqueta img
• Es posible embeber otros recursos dentro del HTML mediante la etiqueta iFrame

Limitaciones

• HTML es un lenguaje estático, y opera de esa forma. La creación de listas desplegables dinámicas (como se suele hacer con PHP) no es viable.
• Las variables en las cuales se almacena información (o desde las cuales se obtienen un dato) vienen condicionadas por el contexto en el cual se ejecuta la página. Al abrir un HTML en un caso las variables disponibles pertenecen a dicho contexto, es decir los datos que son parte del caso (incluidos los campos personalizados), por ejemplo el nombre del contacto o del usuario, producto, motivo o submotivo. Sin embargo datos específicos como el e-mail de un contacto no estarían disponibles.
• La ejecución de Scripts (javascript) no está contemplada. Es posible que algunas funciones muy básicas de javascript se puedan incluir, sin embargo no es un lenguaje soportado por la funcionalidad HTML.
• Al momento de intentar embeber una pagina esta deberá ser https (segura)

El siguiente es un ejemplo de un HTML con las siguientes características:

• Formulario para capturar tres datos.
• Embebe una página web (ServiceDesk en este caso) mediante iFrame.
• Tiene un estilo configurado para los campos de entrada.
• Cada campo del formulario se enlaza con un campo personalizado del caso a través del atributo name. El valor ingresado se guarda en el campo personalizado cuyo nombre coincide con ese atributo (fechaRecogida, por ejemplo). Es el único mecanismo de guardado disponible: un campo sin atributo name no guarda su valor.
• Los campos del formulario se han incluido en una tabla.

<style>
      .miclase {background-color: powderblue;color: chocolate;font-size: 20;}
</style>
<div>
	<table>
		<tr>
			<td>
				<font face="arial" size="4"><b>FECHA RECOGIDA:</b></font>
			</td>
			<td>
				<input type="date" name="fechaRecogida" id="fechaRecogida" class="miclase"><br>
			</td>
		</tr>
		<tr>
			<td>
				<font face="arial" size="4"><b> DIRECCIÓN RECOGIDA:</b></font>
			</td>
			<td>
				<input type="text" name="Recogida" id="Recogida" class="miclase"><br>
			</td>
		</tr>
		<tr>
			<td>
				<font face="arial" size="4"><b> DIRECCIÓN ENTREGA:</b></font>
			</td>
			<td>
				<input type="text" name="Entrega" id="Entrega" class="miclase"><br>
			</td>
		</tr>
	</table>
</div>
<iframe src="https://servicedesk.deskbeaware.com/" title="BeAware"></iframe>

El siguiente HTML incluye una lista desplegable (<select>). Nuevamente se usan estilos para dar formato a los campos. El atributo name cumple la misma función que en los campos de texto: es el que determina en qué campo personalizado se guarda la opción seleccionada.

<style>
      .miclase {background-color: #FF8000;color: chocolate;font-size: 20;}
</style>
<pre>
    <font face="arial" size="2">
        Por favor confirme la causa raíz del caso
    </font>
</pre>
<font face="arial" size="4"><b>Causa raíz:</b></font>
<select name="causa_raiz" id="causa_raiz" class="miclase">
	<option value="Seleccione un valor">Seleccione un valor</option>
	<option value="color; rotura; falla">color; rotura; falla</option>
	<option value="comercial; rotura; falla">comercial; rotura; falla</option>
	<option value="deposito; mala configuracion">deposito; mala configuracion</option>
</select>

Nota: Los atributos de enlace propios de frameworks de front-end, como v-model, no operan dentro de un HTML configurado en la plataforma. Un campo que solo los declare, sin atributo name, no guardará su valor.