Embedded Files
Una vez terminado el proceso, veamos una forma de mejorar el aspecto y el uso del formulario inicial de instanciación. Vamos a cambir el input en el que teníamos que escribir el número 0 o 1 por un radio button con dos opciones exclusivas.
Paso a paso
Paso a paso
Volvemos a entrar en el formulario de instanciación del proceso ELECCIÓN para editarlo.
Más por excesiva precaución que por necesidad en este ejemplo, vamos a duplicar el formulario fsenyalsin, guardándolo como fsenyalsin2.
Con el nuevo formulario ya guardado, recuerda asignarlo al proceso ELECCIÓN.
Si seguiste los pasos del ejemplo anterior, tendrás un formulario como el que se se muestra aquí.
Vamos a cambiar el widget input "valor" por un radio buttón.
Uso de radio-buttons
Uso de radio-buttons
Aunque se puede hacer de varias formas, vamos a utilizar un control que ofrece el propio formulario, el intercambio de widgets.
Para ello, seleccionamos el widget y, en el menú de contexto que nos aparece, pulsamos sobre el icono correspondiente.
En el dialogo que nos aparece a continuación, seleccionamos el nuevo widget.
El diálogo nos fuerza a mostrar las propiedades del widget aunque no vamos a modificar nada. Despues de eso, entonces sí nos deja pulsar el botón "cambiar".
El resultado es un radio button estándar que querremos configurar a nuestro gusto.
De momento, hacemos unos cambios cosméticos.
NOTA: en ciertos widgets, y dependiendo del idioma del sistema, Bonita traduce automáticamente el texto durante la ejecución. Es el caso de los botones submit. A pesar de eso, nosotros hemos puesto nuestra propia etiqueta.
Definición de una variable JSON
Definición de una variable JSON
Necesitamos definir un vector (etiqueta,valor) donde especificar las etiquetas y valores correspondientes a cada opción.
nombre: opciones
tipo: JSON
valor:
[
{"etiqueta": "vete por arriba", "valor": "0"},
{"etiqueta": "vete por abajo", "valor": "1"}
]
Configuración del widget radio button
Configuración del widget radio button
Selecciona el widget con el ratón.
En "valores disponibles" enlazaremos la variable recién definida. Pincha en fx y elige de entre la lista desplegable.
Lo que queremos hacer es sustituir las opciones "yes"|"no" por las nuestras "vete por arriba"|"vete por abajo", y eso está en la variable "opciones" que hemos creado. Pero aún no lo hemos conseguido.
Ahora es cuando realmente cambiamos el "yes"|"no" por nuestras opciones.
Esta configuración resulta un poco más extraña. Pincha primero en el botón de enlace fx e ignora la lista desplegable: escribe directamente "etiqueta", con las comillas dobles.
Exactamente lo mismo para "clave de retorno" pero con el valor "valor".
Si te fijas en la variable "formInput", valores iniciales del formulario, vemos la estructura de lo definido en el contrato de la tarea, vnsenyalInput.valor.
Pero es que, cuando le demos al botón de "enviar", el formulario devolverá exáctamente esa variable, vnsenyalInput, pero modificada con los valores que hayamos introducido.
De aquí sale la configuración de "valor seleccionado". Aquí, simplemente, escribe:
formInput.vnsenyalInput.valor
En otras palabras, cuando interactuemos con el radio button, el valor de la opción que elijamos, 0 o 1, irá a ese atributo de la variable.
Recapitulando:
la variable define todas las etiquetas y valores a usar en el widget, en nuestro caso 2.
"valores disponibles" se enlaza con esa variable
"clave mostrada" utiliza las "etiquetas" definidas en la variable en el mismo orden que aparecen en ella, y es lo que se va a ver en el formulario
"clave de retorno" es el valor asociado a cada una de esas etiquetas, y el valor que finalmente devolverá el formulario;
si elijo "por arriba" devolverá 0
si elijo "por abajo" devolverá 1
"valor seleccionado" es la variable donde el formulario devuelve el dato anterior
Puedes comprobar el aspecto de tu formulario, después de "guardar", con la vista previa.
Si ejecutas el proceso de nuevo, puedes comprobar que funciona.
Page updated
Report abuse