FOR_EACH

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.

No tiene eventos propios (solo onLoad, común a todos).

Estado y contexto que usa

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

• items / data / rows / options

  Los datos suelen venir de ${state.<clave>} (rellenada por resultKey de CALL_BACKEND) o de ${context.*}.

• condition / items / value

  Se evalúa con el estado y el contexto vigentes; cualquier cambio de state vuelve a evaluarlo.

• 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/appointments/manifest.json (core-appointments), en mounts[1].component.props.children[2] (punto OVERLAY).

También se usa en: calendar/manifest.json, calendly/manifest.json, giphy/manifest.json, summarizer/manifest.json.

{
  "type": "FOR_EACH",
  "props": {
    "items": "${state.schedules}",
    "as": "schedule",
    "template": {
      "type": "BUTTON",
      "props": {
        "label": "${schedule.name} · ${schedule.duration} min",
        "icon": "Clock",
        "className": "w-full justify-start mb-2 text-left",
        "onClick": {
          "action": "INSERT_CONTENT",
          "content": "${schedule.bookingUrl}",
          "closeOverlay": true
        }
      }
    }
  }
}

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "FOR_EACH",
        "props": {
          "items": "${state.schedules}",
          "as": "schedule",
          "template": {
            "type": "BUTTON",
            "props": {
              "label": "${schedule.name} · ${schedule.duration} min",
              "icon": "Clock",
              "className": "w-full justify-start mb-2 text-left",
              "onClick": {
                "action": "INSERT_CONTENT",
                "content": "${schedule.bookingUrl}",
                "closeOverlay": true
              }
            }
          }
        }
      }
    }
  ]
}