Diferencias

Muestra las diferencias entre dos versiones de la página.

--- configuracionhtml [2023/06/09 02:05] – scantor
+++ configuracionhtml [2026/09/01 15:09] (actual) – [Ejemplo HTML] clopez
@@ Línea 2: / Línea 2: @@
 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.
 ===== Crear un HTML =====
@@ Línea 11: / Línea 13: @@
   - Clic en el botón **Crear** ubicado en la parte superior derecha de la pantalla.
   - Ingrese el nombre con el que se identificará el HTML en el campo **Nombre**.
+  - Ingrese el rol que visualizará los formularios en el campo **Rol**
+  - Seleccione un valor en el campo **Guardado automático**
+    - 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.
+    - 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.
   - Ingrese el código HTML en el campo **HTML**.
   - Clic en el botón **Guardar** ubicado en la parte superior derecha de la pantalla.
@@ Línea 22: / Línea 28: @@
   - Clic en el botón **Modificar** ubicado al final del registro HTML que desea modificar.
   - Modifique el nombre del HTML en el campo **Nombre**.
+  - Ingrese el rol que visualizará los formularios en el campo **Rol**
+  - Seleccione un valor en el campo **Guardado automático**
+    - 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.
+    - 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.
   - Modifique el código HTML en el campo **HTML**.
   - Clic en el botón **Guardar** ubicado en la parte superior derecha de la pantalla.
@@ Línea 48: / Línea 58: @@
   * **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.
+  * **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.
 {{ :html:html_previsualizar.png |}}
@@ Línea 72: / Línea 82: @@
-===== Ejemplo HTML =====
+El siguiente es un ejemplo de un HTML con las siguientes características:
-* 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.
- Formulario para captura tres datos
+  * Tiene un estilo configurado para los campos de entrada.
- Embebe una pagina web (ServiceDesk en este caso) mediante iFrame.
+  * 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.
- Adicionalmente tiene un estilo configurado para los input
+  * Los campos del formulario se han incluido en una tabla.
- Notar el llamado a las variables donde se almacenan los datos ingresados en el formulario. Usan la etiqueta v-model, empiezan por one (Este valor hace referencia al contexto donde se abre la página), seguido del nombre de la variable (cf.fechaRegocida por ejemplo, donde CF indica que es un campo personalizado)
- Los campos del formulario se han incluido en una tabla
+<code html>
 <style>
       .miclase {background-color: powderblue;color: chocolate;font-size: 20;}
@@ Línea 92: / Línea 101: @@
 			</td>
 			<td>
-				<input type="date" name="fechaRecogida" v-model="one.cf.fechaRecogida" id="fechaRecogida" class="miclase"><br>
+				<input type="date" name="fechaRecogida" id="fechaRecogida" class="miclase"><br>
 			</td>
 		</tr>
@@ Línea 100: / Línea 109: @@
 			</td>
 			<td>
-		 		<input type="text" name="Recogida" v-model="one.cf.Recogida" id="Recogida" class="miclase"><br>
+				<input type="text" name="Recogida" id="Recogida" class="miclase"><br>
 			</td>
 		</tr>
@@ Línea 107: / Línea 116: @@
 				<font face="arial" size="4"><b> DIRECCIÓN ENTREGA:</b></font>
 			</td>
-		 	<td>
+			<td>
-		 		<input type="text" name="Entrega" v-model="one.cf.Entrega" id="Entrega" class="miclase"><br>
+				<input type="text" name="Entrega" id="Entrega" class="miclase"><br>
 			</td>
 		</tr>
@@ Línea 114: / Línea 123: @@
 </div>
 <iframe src="https://servicedesk.deskbeaware.com/" title="BeAware"></iframe>
+</code>
-* El siguiente HTML incluye una lista desplegable (<select>). Nuevamente se usan styles para darle formato a los campos
+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.
+<code html>
 <style>
-      .miclase {background-color: FF8000;color: chocolate;font-size: 20;}
+      .miclase {background-color: #FF8000;color: chocolate;font-size: 20;}
 </style>
 <pre>
@@ Línea 126: / Línea 137: @@
 </pre>
 <font face="arial" size="4"><b>Causa raíz:</b></font>
-<select name="causa_raiz" v-model="opcSelected"  id="causa_raiz" class="miclase" id="nameInput" onclick=""alert('hola mundo!');>
+<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>
@@ Línea 132: / Línea 143: @@
 	<option value="deposito; mala configuracion">deposito; mala configuracion</option>
 </select>
+</code>
+**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.