Listas desplegables y dinámicas en Web
Muchas veces es necesario crear listas desplegables en un sitio Web. Estas listas se usarán constantemente a través de todo el sitio en diferentes formularios y podrán cambiar en cualquier momento.
Este artículo muestra cómo 4D permite hacerlo fácilmente en 3 pasos.
- Crear una lista
- Crear un método
- Escribir un poco de código HTML con etiquetas 4D
Crear una lista en 4D
Crear una lista en la caja de herramientas de 4D.
En este caso se trata de una lista de las secciones de una compañía.
Crear un método en 4D
En el editor de métodos de 4D crear el método w_Lista_Secciones
`Método w_Lista_Secciones
LIST TO ARRAY("Secciones";aSeccion)
Es fundamental habilitar la opción “Disponible vía 4DACTION, 4DMETHOD y 4DSCRIPT” para que el método se pueda invocar desde Web.
El código HTML
El siguiente código HTML está listo para ser insertado en el formulario Web.
<!--4dscript/w_Lista_Secciones-->
<h3>Seleccione una sección de nuestra compañía:</h3>
<select name=”Secciones”>
<!–4dloop aSeccion–>
<option value=”<!–4dvar aSeccion{aSeccion}–>”><!–4dvar aSeccion{aSeccion}–></option>
<!–4dendloop–>
</select>
¿Qué hace el código?
Con la etiqueta 4DSCRIPT invocamos el método 4D w_Lista_Secciones, que copia el contenido de la lista “Secciones” en el array aSeccion.
Una vez definido el array, se procede a recorrerlo con la etiqueta 4DLOOP, y a medida que se recorre se escriben los valores de cada ítem del array con la etiqueta 4DVAR y el nombre del array con aSeccion{aSeccion}, el valor entre llaves es idéntico al del nombre del array e indica el índice del array.
Hay que tener en cuenta que el código se debe usar en una página con extensión .SHTML (o .SHTM) o una página invocada por 4DACTION, 4DCGI o 4DMETHOD.
Resultado
He aquí el resultado, una lista desplegable creada dinámicamente a partir de una lista de 4D, a la cual se le pueden añadir elementos conforme se necesite. Como una lista 4D es modificable por programación, podemos permitir al usuario actualizar esta lista como lo desee, sin modificar el código fuente de 4D, la página HTML o un Javascript.
