Embedded Files
Recordemos el escenario: un formulario en el que se introducen edad e ingresos anuales estimados. Más o menos, con esa información se deriva al usuario en una oferta no detallada más que en el título. Hay 3 ofertas: básica, normal y premium. El que se le ofrezca una u otra depende de la combinación de valores de las dos variables anteriores, y según la siguiente tabla, se le ofrecerá una de ellas.
Paso a paso
Paso a paso
Formulario de instanciación
Formulario de instanciación
Queremos personalizar el formulario hasta tener un aspecto como este:
¿Cómo conseguimos esto? En realidad, la parte más difícil es la del control de radio buttons.
Formulario de instanciación
Formulario de instanciación
Editamos el creado anteriormente, fcontratante.
Añadir una variable con los datos del radio-button
Añadir una variable con los datos del radio-button
En UI Designer vamos a añadir una variable "ingresos" de tipo JSON.
NOMBRE: ingresos
TIPO: JSON
VALOR:
[
{"label": "menos de 20000 €", "value": 0},
{"label": "entre 20000 y 50000 €", "value": 1},
{"label": "más de 50000 €", "value": 2}
]
El valor de la variable es un array JSON (entre [ y ]) donde cada documento (entre { y }) es una conjunto de parejas clave-valor. Fíjate que "label" identifica a lo que queremos mostrar en pantalla y "value" al valor que realmente vamos a manejar. Es decir, si seleccionamos la opción "menos de 20000 €" el formulario devolverá en este control el valor 0.
Añadir un widget radio-button
Añadir un widget radio-button
En el formulario, transforma o elimina el widget ingresos que UI Designer había puesto previamente. Lo cambiamos por un widget RADIO BUTTONS. En la configuración vamos a utilizar esa variable que hemos llamado "ingresos".
Pero vayamos paso a paso...
En primer lugar, debemos enlazar la variable al control:
En valores disponibles pincha sobre fx. A continuación escribe el nombre "ingresos". A partir de ahora, este widget está asociado a nuestra variable.
Ahora, vamos a indicarle lo que tiene que mostrar en pantalla como opciones. En clave mostrada enlazamos la etiqueta "label" (fíjate, con las dobles comillas). Tendremos que escribirlo.
Y ahora la clave de retorno, lo que realmente elegiremos, los valores que se corresponden con las etiquetas anteriores: "value". Igualmente, no se selecciona del desplegable, se escribe.
Y, por último, el valor seleccionado. Esto tiene dos efectos: marca una opción, la cero (0), y almacena la nueva opción que elijamos, permitiendo luego que pase a la variable de negocio.
Lo que tienes que escribir es, directamente, sin pulsar el botón lateral de enlace:
formInput.vnContratanteInput.ingresos
Fíjate que la variable formInput mantiene un valor complejo, elcontratanteInput, que a su vez se compone de edad e ingresos. Esta variable se ha generado desde el contrato. Está enlazada a los widgets del formulario y se devuelve a Bonita con formOutput.
Fijáte que en UI Designer no lo verás tal y como se verá en el formulario en marcha. Si quieres, haz una vista previa para comprobar que está bien definido.
Ya está preparado el formulario de instanciación.
Page updated
Report abuse