Diferencias

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

--- configuracionhtml [2024/03/05 15:41] – editor externo 127.0.0.1
+++ 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.
@@ Línea 25: / 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.
@@ Línea 78: / 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 98: / 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 106: / 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 113: / 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 120: / 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 132: / 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 138: / 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.