Introducción

¿Eres nuevo en Webforms? Este tutorial te vendrá de perlas para iniciarte en la herramienta. En este pequeño tutorial te enseñaremos a entrar en la herramienta, crear un formulario, visualizar el resultado y publicarlo

Nivel de dificultad: BAJO

Si has realizado otros formularios seguramente este tutorial es muy básico para ti.

1. Antes de empezar, ¿qué necesito?

Obviamente necesitas tener una instancia de pruebas de Webforms. Si tu organización no la tiene disponible o simplemente quieres probar como funciona Webforms, pídenos un usuario aquí. Te enviaremos las credenciales para que accedas cuanto antes.

Cuando dispongas de usuario ya podrás validarte y acceder al módulo denominado diseñador. Este modulo nos va a permitir, entre otras cosas, realizar el diseño de los formularios.

Algunos conceptos básicos...

  • Webforms incorpora cuatro roles diferentes: administrador, gestor, gestor restringido y publicador restringido. Si el usuario te lo hemos creado nosotros tu perfil será el de gestor restringido.
  • Si tu organización ya dispone de Webforms y estás empezando, te recomendamos que pidas que te den para iniciarte un usuario con el rol de gestor restringido.
  • ¿Por qué el rol de gestor restringido? Este rol sólo nos permite acceder a las unidades que tenemos asignadas. Con esto evitamos, por error, modificar cosas que estén haciendo otras personas
  • ¿Y qué son las unidades? Es la forma jerárquica que utilizamos para estructurar, entre otras entidades, los formularios.

Una vez validado, accedemos a la pantalla inicial de Webforms. Esta pantalla nos muestra en la parte izquierda un menú con las distintas acciones que podemos realizar (dependen del rol que tengamos asignado). En la parte derecha tendremos la pantalla de búsqueda de los formularios. Podremos buscar por varios campos. Por defecto, la primera vez, no tendremos ningún formulario, y por tanto, veremos una pantalla como la siguiente.

2. Creamos nuestro primer formulario

  1. Apretamos al botón "+ Añadir"
  2. Nos saldrá una pantalla en la que debemos completar código (*), nombre, unidad propietaria, descripción y tipo de gestión.
    1. Código. Este código tiene que único en Webforms (no se puede repetir).
    2. Nombre. Indicamos el nombre que queremos que tenga el formularios.  
    3. Unidad propietaria. De las unidades que nos han asignado (por lo menos una) le indicamos cual será la propietaria del formualrio
    4. Descripción. Podemos, opcionalmente, rellenar una descripción del formualrio.
    5. Tipo de gestión. Marcaremos la gestión como delegada.
  3. Apretamos al botón guardar.

(*) Depende la configuración que hayamos establecido, el campo código puede ser un campo auntonumérico que se rellene automáticamente y que por tanto no tenemos que rellenar.

3. Accedemos al Diseñador

  1. Cuando apretamos al botón de Guardar, nos apareció un recuadro inferior con una parte denominada VERSIONES.
  2. En la parte derecha vemos que hay una serie de botones de colores debajo del apartado de Acciones.
  3. Apretamos al botón que pone "Diseñador"

4. El diseñador

  1. El diseñador está dividido en tres partes principales
    1. Menú de elementos y acciones (parte izquierda)
    2. Zona de diseño (parte central)
    3. Paleta de propiedades (parte derecha)
  2. Añadimos un elemento de tipo texto. Para ello:
    1. Con el ratón hago click y dejo apretado el botón sobre el elemento de tipo texto (elemento de color verde) y lo arrastro a la zona de diseño (parte central)
    2. Una vez añadido este elemento, podemos observar que nos ha aparecido en la parte derecha la paleta de propiedades (**)
    3. En la paleta de propiedades completamos:
      1. Texto: Mi primer ejemplo en Webforms 
      2. Estilo. H1

(**) Si hemos perdido la paleta de elementos (la parte derecha sale vacía) significa que no tenemos ningún elemento seleccionado. Para seleccionarlo hacemos click con el ratón sobre el elemento de la zona de diseño del que queremos ver sus propiedades.

5. Guardamos y visualizamos

  1. En la parte derecha, en Acciones, apretamos el botón de guardar para salvar los cambios
  2. Apretamos el botón de vista previa
  3. Una vez hayamos visto el resultado volvemos a la pantalla de diseño. Para ellos apretamos el botón de Acciones denominado diseñador.


6. Añadimos otros elementos

  1. Vamos a añadir 4 nuevos elemento
  2. Hacemos como hicimos antes y arrastramos 4 elementos de tipo Input (color azul). Hacemos igual que en el punto 4
  3. Seleccionamos el primer elemento que hemos añadido y en la paleta de propiedades le indicamos:
    1. Título: Nombre
    2. Requerido: Si (Esto indica que el formulario nos va a pedir que rellenemos este campo obligatoriamente)
  4. Seleccionamos el segundo elemento que hemos añadido y en la paleta de propiedades le indicamos:
    1. Título: Primer apellido
    2. Requerido: Sí
    3. Columnas: 3 (Esto indica que de todo el ancho de la fila, sólo usaremos la mitad)
  5. Seleccionamos el tercer elemento que hemos añadido y en la paleta de propiedades le indicamos:
    1. Título: Segundo apellido
    2. Columnas: 3
  6. Seleccionamos el cuardo elemento que hemos añadido y en la paleta de propiedades le indicamos:
    1. Título: Correo electrónico
    2. Requerido: Sí
    3. Tipo: Email (esto implica que nos validará que cumplimentemos de forma correcta el correo electrónico)

7. Guardamos, visualizamos y cerramos el editor

  1. Como hicimos en el paso 5, guardamos los cambios
  2. Visualizamos el resultado. 
  3. Si todo ha ido correcto hemos finalizado con nuestro primer formulario. En la parte superior derecha, tenemos la opción de "Cerrar diseñador". Apretamos sobre esa opción volvemos a la pantalla con los datos del formulario.

8. Publicamos el formulario

  1. Como veíamos en los apartados 2 y 3, esta pantalla contiene dos partes, la específica de datos y la específica de versiones
  2. Nos fijamos que la versión se indica que es la 1.0 y el estado Borrador.
  3. Apretamos al botón situado en la parte superior derecha denominado "Publicar". (***)
  4. Confirmamos que queremos publicar el formulario
  5. Vemos que ha cambiado el estado pasando de borrador a publicado (****)

(***) Si no puedes publicar el formulario se debe a que tu instalación en modo de publicación restringida y debes pedir a un usuario con rol gestor o administrador que te la publique.  Nuestras demos siempre tendrán desactivadas la opción de publicación restringida.

(****) Cuando un formulario está publicado no podemos modificar su contenido. Automáticamente se pone en modo lectura. Para poder modificarlo tienes que crear una nueva versión del formulario. 


9. Comprueba que el formulario está en modo lectura

  1. Vuelve a acceder a la pantalla del diseñador
  2. Intenta añadir un nuevo elemento. Al estar publicada la versión no puedes realizar cambios. Para saber más consulta la documentación referente a las versiones.

Próximos pasos

  1. En a pantalla con los datos del formulario podemos crear una nueva versión en borrador. Una vez creada la nueva versión (estará en estado borrador) podemos volver a modificar el formulario.
  2. Prueba los diferentes tipos de datos del elemento input
  3. Prueba  los otros elementos que no hemos probado
  4. Juega con el número de columnas de los elementos