Diferencias

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

--- configuracionhtml [2025/05/02 18:37] – 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 80: / 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 100: / 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 108: / 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 115: / 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 122: / 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 134: / 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 140: / 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.