FORM

Props

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

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.

Estado y contexto que usa

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

• value / defaultValue

  Valor controlado por expresión (${state.x}) o valor inicial único.

• 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 relacionadas

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.

Ver todas las acciones

Ejemplo en un manifest real

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

También se usa en: airtable-records/manifest.json, asana-tasks/manifest.json, calendar/manifest.json, dropbox-links/manifest.json, github-issues/manifest.json, google-meet/manifest.json.

{
  "type": "FORM",
  "props": {
    "onSubmit": {
      "action": "CALL_BACKEND",
      "function": "savePage",
      "onSuccess": {
        "action": "TOAST",
        "message": "Saved to Notion"
      },
      "args": {
        "subject": "${formData.subject}"
      }
    },
    "fields": [
      {
        "name": "subject",
        "label": "Page Title",
        "defaultValue": "${context.subject}"
      }
    ]
  }
}

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "FORM",
        "props": {
          "onSubmit": {
            "action": "CALL_BACKEND",
            "function": "savePage",
            "onSuccess": {
              "action": "TOAST",
              "message": "Saved to Notion"
            },
            "args": {
              "subject": "${formData.subject}"
            }
          },
          "fields": [
            {
              "name": "subject",
              "label": "Page Title",
              "defaultValue": "${context.subject}"
            }
          ]
        }
      }
    }
  ]
}