Diferencias

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

--- configuracionhtml [2025/05/02 18:42] – [Configuración de HTMLs] scantor
+++ configuracionhtml [2026/09/01 15:09] (actual) – [Ejemplo HTML] clopez
@@ Línea 82: / 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 102: / 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 110: / 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 117: / 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 124: / 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 136: / 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 142: / 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.