Portada

Podemos extender la funcionalidad de los campos de nuestro formulario con la propiedad actions. Por ejemplo, si quisiéramos ocultar X número de campos en base al valor de otro campo, lo podemos hacer con la siguiente configuración en actions:

​> Security (Access, Logs & Backups) & Fields

{
  "security": {...},
  "fields": {
    "Email": {...},
    "LabOptions": {
      ...
   -->"actions": {
        "<cualquier nombre>": {
          "active": true,
          "event": "onChange",
          "conditional": "{{LabOptions}} == 'opt2'",
          "action": "hide_fields",
          "targets": "Description,Language,LabDependentOptions,LabDateInsert,LabDocuments,LabFiles",
        }
      }
    }
  }
}

En este caso le estamos diciendo a nuestro modelo que, de cumplirse la condición, es decir {{ LabOptions }} == 'opt2' sea igual a true, debe aplicarse la acción que está definida en action: "hide_fields". Lo que significa que Description,Language,LabDependent... todos aquellos campos que hemos especificado en la propiedad targets se ocultarán en cuanto el valor de LabOptions sea igual a opt2 ("hide_fields" es un valor especial, más abajo de mostramos todos los valores que puedes especificar). La frecuencia con la que esta condition se ejecutará dependende de la propiedad event.

Con la propiedad active podemos activar/desactivar este comportamiento. Es decir, si es false nada de lo comentado con anterioridad se ejecutará.

El orden es el siguiente:

:plantuml
@startuml
control Conditional as Cond
participant Evento as Event
participant Acción as Action

Event -> Cond : Algo dispara el evento que luego comprueba la condición
Cond -> Action : Si la condición es verdadera, se ejecuta la acción en los targets especificados
@enduml


Como puedes observar, las propiedades más importantes dentro de actions son: active, event, conditional, action, targets. Aquí las definimos con mayor detalle.

Reglas

Campo
Tipo
Descripción
Ejemplos
active
​boolean​
En caso de ser false deshabilitará la ejecución de la acción.
{..., "active": false}
event
​onChange​
El evento que causará la re-evaluación de la condición y seguidamente ejecutará el efecto en caso de que la condición sea true
{..., "event": "onChange"}
conditional
​string​
Si no se añade un valor a este campo se asume true por defecto, es decir la acción siempre se ejecutará.

Cualquier variable que incluyamos en llaves {{MyVariable}} será reemplazado con el valor actual del input que contiene esta acción. Por ejemplo, si LabOptions es un select con estas opciones: "opt1", "opt2", "opt3" y el usuario ha seleccionado "opt3" y en nuestra configuración de conditional tenemos: "{{LabOptions}} == 'opt1'" esto resultará en lo siguiente: "'opt3' == 'opt1'" que es igual a false.
​{..., "conditional": "{{LabOptions}} == 'opt2'"}
action
​hide_fields|display_fields
La acción que se realizará siempre y cuando el resultado de conditional evalúe a true.

hide_fields: tendrá como efecto ocultar los campos especificados en target.
display_fields: tendrá como efecto mostrar los campos especificados en target. Esto implica que los campos especificados en target estarán ocultos por defecto.
{..., "display": "hide_fields"}
targets
​string​
Aquí debes especificar el nombre de los campos (separados por coma) sobre los que esta acción tendrá efecto. Ejemplo, si su valor es: {..., "targets": "Email,Name,Phone"} entonces esta acción sólo tendrá efecto en los inputs de Email, Name y Phone.

​Importante: "hide_fields" ocultará todos los campos que especifiques en esta propiedad targets, excepto si el campo es el mismo que está siendo responsable de causar el evento. Es decir, si estás configurando actions and base al valor del campo    Email, no puedes incluir Email como parte de los targets que quieres ocultar (porque podría bloquear la UI). Por eso aunque lo incluyas, nosotros en el código vamos a ignorar ese target.​
​{..., "targets": "Email,Name,Phone"}


Cesta de compras