SELECT

Categoría: Entradas y formulariosSin hijos

Lista desplegable nativa.

En esta página

Props
Eventos y acciones que acepta
Estado y contexto que usa
Simulador interactivo
Acciones relacionadas
Ejemplo en un manifest real

Props

Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.

Props: SELECT
Prop	Tipo	Requerido	Valores permitidos	Por defecto	Descripción
name	nombre	No	—	—	Nombre del campo en el formulario.
label	texto	No	—	—	Etiqueta visible.
helperText	texto	No	—	—	Texto de ayuda bajo el control.
placeholder	texto	No	—	—	Texto de ejemplo.
bind	nombre	No	—	—	Clave de `state` enlazada (bidireccional). Admite ruta con puntos: "form.email".
bindTo	nombre	No	—	—	Obsoleto: usa `bind`.
value	cualquiera	No	—	—	Valor controlado (normalmente una expresion `${state.x}`).
defaultValue	cualquiera	No	—	—	Valor inicial.
required	booleano	No	`truefalse`	—	Marca el campo como obligatorio (asterisco + regla required).
disabled	booleano	No	`truefalse`	—	Deshabilita el control.
readOnly	booleano	No	`truefalse`	—	Solo lectura.
size	enum	No	`"xs""sm""md""lg"`	"md"	Tamano en escala.
rules	objeto	No	—	—	Reglas de validacion declarativas.
onChange	accion(es)acción	No	—	—	Accion al cambiar el valor (recibe `value`).
options	arreglo de objeto	No	—	—	Opciones.
valueKey	nombre	No	—	—	Clave del valor en cada opcion (por defecto value).
labelKey	nombre	No	—	—	Clave del texto en cada opcion (por defecto label).

Estructuras anidadas

rules

SELECT: rules
Prop	Tipo	Valores permitidos	Por defecto	Descripción
rules.required	booleano	`truefalse`	—	El valor no puede estar vacio.
rules.minLength	numero	`0 … 100000`	—	Longitud minima del texto.
rules.maxLength	numero	`0 … 100000`	—	Longitud maxima del texto.
rules.min	numero	—	—	Valor minimo (numeros).
rules.max	numero	—	—	Valor maximo (numeros).
rules.minItems	numero	`0 … 1000`	—	Minimo de elementos (listas).
rules.maxItems	numero	`0 … 1000`	—	Maximo de elementos (listas).
rules.pattern	regex	—	—	Expresion regular (sin delimitadores) que debe cumplir el texto.
rules.email	booleano	`truefalse`	—	Debe ser un correo valido.
rules.url	booleano	`truefalse`	—	Debe ser una URL http(s) valida.
rules.message	texto	—	—	Mensaje de error propio (sustituye al generico).

options[]

SELECT: options[]
Prop	Tipo	Valores permitidos	Por defecto	Descripción
options[].value	cualquiera	—	—	Valor que se guarda.
options[].label	texto	—	—	Texto visible.
options[].disabled	booleano	`truefalse`	—	Opcion no seleccionable.
options[].description	texto	—	—	Texto secundario.

Props comunes a todos los componentes

Props comunes a todos los componentes
Prop	Tipo	Valores permitidos	Por defecto	Descripción
hidden	booleano	`truefalse`	—	true oculta el componente (admite expresiones).
onLoad	accion(es)acción	—	—	Accion que se ejecuta una vez al montar.
onLoadWhen	cualquiera	—	—	Condicion: onLoad se ejecuta cuando pasa a verdadera.
ariaLabel	texto	—	—	Nombre accesible explicito.

Eventos y acciones que acepta

Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.

Eventos y acciones que acepta
Evento	Recibe	Descripción
onChange	`${value}`	Accion al cambiar el valor (recibe `value`).
onLoad	—	Accion que se ejecuta una vez al montar.

Estado y contexto que usa

Cómo interactúa con state y context (expresiones ${...}).

bind
Enlace bidireccional: lee y escribe state.<clave> (admite rutas "a.b"). Ver value/defaultValue.
bindTo
Obsoleto: usa bind.
disabled
Admite una expresión (${state.x}) para deshabilitar según el estado.
value / defaultValue
Valor controlado por expresión (${state.x}) o valor inicial único.
items / data / rows / options
Los datos suelen venir de ${state.<clave>} (rellenada por resultKey de CALL_BACKEND) o de ${context.*}.
hidden / onLoadWhen
Condiciones comunes: hidden: "${!state.x}" oculta el componente; onLoadWhen ejecuta onLoad al pasar a verdadera.

Simulador interactivo

Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.

…

Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.

Usadas en sus ejemplos y manifests

TOAST
Muestra un aviso breve.
Obligatorios: message · Campos: messagevarianttone
SET_STATE
Guarda value en state[key] (la clave admite ruta con puntos).
Obligatorios: key · Campos: keyvalue
NEXT_STEP
Avanza el WIZARD que contiene al componente.
Obligatorios: — · Campos: —

Acciones que lo controlan

SET_STATE
Guarda value en state[key] (la clave admite ruta con puntos).
Obligatorios: key · Campos: keyvalue

Ver todas las acciones

Ejemplo en un manifest real

Tomado de bloomx-extensions/trello/manifest.json (core-trello), en mounts[1].component.props.children[0].props.steps[1].content[0] (punto OVERLAY).

También se usa en: composer-helper/manifest.json, domain-metrics/manifest.json.

trello/manifest.json · mounts[1].component.props.children[0].props.steps[1].content[0]

{
  "type": "SELECT",
  "props": {
    "label": "List",
    "options": "${state.lists}",
    "valueKey": "id",
    "labelKey": "name",
    "onChange": {
      "actions": [
        {
          "action": "SET_STATE",
          "key": "selectedList",
          "value": "${value}"
        },
        {
          "action": "NEXT_STEP"
        }
      ]
    }
  }
}

Manifest mínimo

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "SELECT",
        "props": {
          "label": "List",
          "options": "${state.lists}",
          "valueKey": "id",
          "labelKey": "name",
          "onChange": {
            "actions": [
              {
                "action": "SET_STATE",
                "key": "selectedList",
                "value": "${value}"
              },
              {
                "action": "NEXT_STEP"
              }
            ]
          }
        }
      }
    }
  ]
}

SELECT

Categoría: Entradas y formulariosSin hijos

Lista desplegable nativa.

En esta página

Props
Eventos y acciones que acepta
Estado y contexto que usa
Simulador interactivo
Acciones relacionadas
Ejemplo en un manifest real

Props

Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.

Props: SELECT
Prop	Tipo	Requerido	Valores permitidos	Por defecto	Descripción
name	nombre	No	—	—	Nombre del campo en el formulario.
label	texto	No	—	—	Etiqueta visible.
helperText	texto	No	—	—	Texto de ayuda bajo el control.
placeholder	texto	No	—	—	Texto de ejemplo.
bind	nombre	No	—	—	Clave de `state` enlazada (bidireccional). Admite ruta con puntos: "form.email".
bindTo	nombre	No	—	—	Obsoleto: usa `bind`.
value	cualquiera	No	—	—	Valor controlado (normalmente una expresion `${state.x}`).
defaultValue	cualquiera	No	—	—	Valor inicial.
required	booleano	No	`truefalse`	—	Marca el campo como obligatorio (asterisco + regla required).
disabled	booleano	No	`truefalse`	—	Deshabilita el control.
readOnly	booleano	No	`truefalse`	—	Solo lectura.
size	enum	No	`"xs""sm""md""lg"`	"md"	Tamano en escala.
rules	objeto	No	—	—	Reglas de validacion declarativas.
onChange	accion(es)acción	No	—	—	Accion al cambiar el valor (recibe `value`).
options	arreglo de objeto	No	—	—	Opciones.
valueKey	nombre	No	—	—	Clave del valor en cada opcion (por defecto value).
labelKey	nombre	No	—	—	Clave del texto en cada opcion (por defecto label).

Estructuras anidadas

rules

SELECT: rules
Prop	Tipo	Valores permitidos	Por defecto	Descripción
rules.required	booleano	`truefalse`	—	El valor no puede estar vacio.
rules.minLength	numero	`0 … 100000`	—	Longitud minima del texto.
rules.maxLength	numero	`0 … 100000`	—	Longitud maxima del texto.
rules.min	numero	—	—	Valor minimo (numeros).
rules.max	numero	—	—	Valor maximo (numeros).
rules.minItems	numero	`0 … 1000`	—	Minimo de elementos (listas).
rules.maxItems	numero	`0 … 1000`	—	Maximo de elementos (listas).
rules.pattern	regex	—	—	Expresion regular (sin delimitadores) que debe cumplir el texto.
rules.email	booleano	`truefalse`	—	Debe ser un correo valido.
rules.url	booleano	`truefalse`	—	Debe ser una URL http(s) valida.
rules.message	texto	—	—	Mensaje de error propio (sustituye al generico).

options[]

SELECT: options[]
Prop	Tipo	Valores permitidos	Por defecto	Descripción
options[].value	cualquiera	—	—	Valor que se guarda.
options[].label	texto	—	—	Texto visible.
options[].disabled	booleano	`truefalse`	—	Opcion no seleccionable.
options[].description	texto	—	—	Texto secundario.

Props comunes a todos los componentes

Props comunes a todos los componentes
Prop	Tipo	Valores permitidos	Por defecto	Descripción
hidden	booleano	`truefalse`	—	true oculta el componente (admite expresiones).
onLoad	accion(es)acción	—	—	Accion que se ejecuta una vez al montar.
onLoadWhen	cualquiera	—	—	Condicion: onLoad se ejecuta cuando pasa a verdadera.
ariaLabel	texto	—	—	Nombre accesible explicito.

Eventos y acciones que acepta

Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.

Eventos y acciones que acepta
Evento	Recibe	Descripción
onChange	`${value}`	Accion al cambiar el valor (recibe `value`).
onLoad	—	Accion que se ejecuta una vez al montar.

Estado y contexto que usa

Cómo interactúa con state y context (expresiones ${...}).

bind
Enlace bidireccional: lee y escribe state.<clave> (admite rutas "a.b"). Ver value/defaultValue.
bindTo
Obsoleto: usa bind.
disabled
Admite una expresión (${state.x}) para deshabilitar según el estado.
value / defaultValue
Valor controlado por expresión (${state.x}) o valor inicial único.
items / data / rows / options
Los datos suelen venir de ${state.<clave>} (rellenada por resultKey de CALL_BACKEND) o de ${context.*}.
hidden / onLoadWhen
Condiciones comunes: hidden: "${!state.x}" oculta el componente; onLoadWhen ejecuta onLoad al pasar a verdadera.

Simulador interactivo

Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.

…

Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.

Usadas en sus ejemplos y manifests

TOAST
Muestra un aviso breve.
Obligatorios: message · Campos: messagevarianttone
SET_STATE
Guarda value en state[key] (la clave admite ruta con puntos).
Obligatorios: key · Campos: keyvalue
NEXT_STEP
Avanza el WIZARD que contiene al componente.
Obligatorios: — · Campos: —

Acciones que lo controlan

SET_STATE
Guarda value en state[key] (la clave admite ruta con puntos).
Obligatorios: key · Campos: keyvalue

Ver todas las acciones

Ejemplo en un manifest real

Tomado de bloomx-extensions/trello/manifest.json (core-trello), en mounts[1].component.props.children[0].props.steps[1].content[0] (punto OVERLAY).

También se usa en: composer-helper/manifest.json, domain-metrics/manifest.json.

trello/manifest.json · mounts[1].component.props.children[0].props.steps[1].content[0]

{
  "type": "SELECT",
  "props": {
    "label": "List",
    "options": "${state.lists}",
    "valueKey": "id",
    "labelKey": "name",
    "onChange": {
      "actions": [
        {
          "action": "SET_STATE",
          "key": "selectedList",
          "value": "${value}"
        },
        {
          "action": "NEXT_STEP"
        }
      ]
    }
  }
}

Manifest mínimo

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "SELECT",
        "props": {
          "label": "List",
          "options": "${state.lists}",
          "valueKey": "id",
          "labelKey": "name",
          "onChange": {
            "actions": [
              {
                "action": "SET_STATE",
                "key": "selectedList",
                "value": "${value}"
              },
              {
                "action": "NEXT_STEP"
              }
            ]
          }
        }
      }
    }
  ]
}

Props

Estructuras anidadas

rules

options[]

Eventos y acciones que acepta

Estado y contexto que usa

Simulador interactivo

Acciones relacionadas

Usadas en sus ejemplos y manifests

Acciones que lo controlan

Ejemplo en un manifest real

Props

Estructuras anidadas

rules

options[]

Eventos y acciones que acepta

Estado y contexto que usa

Simulador interactivo

Acciones relacionadas

Usadas en sus ejemplos y manifests

Acciones que lo controlan

Ejemplo en un manifest real