ALERT

Categoría: Estado y avisosAcepta hijos

Aviso en linea (role=alert para danger/warning).

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: ALERT
Prop	Tipo	Requerido	Valores permitidos	Por defecto	Descripción
tone	enum	No	`"neutral""primary""success""warning""danger""info"`	"info"	Intencion semantica; el tema decide el color.
title	texto	No	—	—	Titulo.
message	texto	No	—	—	Mensaje.
description	texto	No	—	—	Alias de message.
icon	icono (Lucide)	No	—	—	Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico.
dismissible	booleano	No	`truefalse`	—	Se puede cerrar.

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.

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

Eventos y acciones que acepta
Evento	Recibe	Descripción
onLoad	—	Accion que se ejecuta una vez al montar.

Estado y contexto que usa

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

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

CALL_BACKEND
Llama a una funcion del server.js. Pone state.$loading[key]/state.$error[key] solos, admite reintento y guarda el resultado con resultKey.
Obligatorios: function · Campos: functionargsparamskeyresultKeyretrytoastOnErroronSuccess
SET_STATE
Guarda value en state[key] (la clave admite ruta con puntos).
Obligatorios: key · Campos: keyvalue

Acciones que lo controlan

Ninguna.

Ver todas las acciones

Ejemplo en un manifest real

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

También se usa en: airtable-records/manifest.json, asana-tasks/manifest.json, calendly/manifest.json, composer-helper/manifest.json, dropbox-links/manifest.json, github-issues/manifest.json.

giphy/manifest.json · mounts[1].component.children[0].children[0].props.false[0].children[1].props.false[0].props.true[0]

{
  "type": "ALERT",
  "props": {
    "tone": "danger",
    "title": {
      "es": "No se pudieron cargar los GIF",
      "en": "Could not load GIFs"
    },
    "message": {
      "es": "Comprueba tu conexión e inténtalo de nuevo.",
      "en": "Check your connection and try again."
    }
  },
  "children": [
    {
      "type": "BUTTON",
      "props": {
        "label": {
          "es": "Reintentar",
          "en": "Retry"
        },
        "icon": "RefreshCw",
        "variant": "outline",
        "size": "sm",
        "onClick": {
          "action": "CALL_BACKEND",
          "function": "searchGifs",
          "key": "giphy",
          "toastOnError": false,
          "args": {
            "q": "${state.query}"
          },
          "onSuccess": {
            "action": "SET_STATE",
            "key": "gifs",
            "value": "${result.data}"
          }
        }
      }
    }
  ]
}

Manifest mínimo

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "ALERT",
        "props": {
          "tone": "danger",
          "title": {
            "es": "No se pudieron cargar los GIF",
            "en": "Could not load GIFs"
          },
          "message": {
            "es": "Comprueba tu conexión e inténtalo de nuevo.",
            "en": "Check your connection and try again."
          }
        },
        "children": [
          {
            "type": "BUTTON",
            "props": {
              "label": {
                "es": "Reintentar",
                "en": "Retry"
              },
              "icon": "RefreshCw",
              "variant": "outline",
              "size": "sm",
              "onClick": {
                "action": "CALL_BACKEND",
                "function": "searchGifs",
                "key": "giphy",
                "toastOnError": false,
                "args": {
                  "q": "${state.query}"
                },
                "onSuccess": {
                  "action": "SET_STATE",
                  "key": "gifs",
                  "value": "${result.data}"
                }
              }
            }
          }
        ]
      }
    }
  ]
}

ALERT

Categoría: Estado y avisosAcepta hijos

Aviso en linea (role=alert para danger/warning).

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: ALERT
Prop	Tipo	Requerido	Valores permitidos	Por defecto	Descripción
tone	enum	No	`"neutral""primary""success""warning""danger""info"`	"info"	Intencion semantica; el tema decide el color.
title	texto	No	—	—	Titulo.
message	texto	No	—	—	Mensaje.
description	texto	No	—	—	Alias de message.
icon	icono (Lucide)	No	—	—	Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico.
dismissible	booleano	No	`truefalse`	—	Se puede cerrar.

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.

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

Eventos y acciones que acepta
Evento	Recibe	Descripción
onLoad	—	Accion que se ejecuta una vez al montar.

Estado y contexto que usa

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

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

CALL_BACKEND
Llama a una funcion del server.js. Pone state.$loading[key]/state.$error[key] solos, admite reintento y guarda el resultado con resultKey.
Obligatorios: function · Campos: functionargsparamskeyresultKeyretrytoastOnErroronSuccess
SET_STATE
Guarda value en state[key] (la clave admite ruta con puntos).
Obligatorios: key · Campos: keyvalue

Acciones que lo controlan

Ninguna.

Ver todas las acciones

Ejemplo en un manifest real

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

giphy/manifest.json · mounts[1].component.children[0].children[0].props.false[0].children[1].props.false[0].props.true[0]

{
  "type": "ALERT",
  "props": {
    "tone": "danger",
    "title": {
      "es": "No se pudieron cargar los GIF",
      "en": "Could not load GIFs"
    },
    "message": {
      "es": "Comprueba tu conexión e inténtalo de nuevo.",
      "en": "Check your connection and try again."
    }
  },
  "children": [
    {
      "type": "BUTTON",
      "props": {
        "label": {
          "es": "Reintentar",
          "en": "Retry"
        },
        "icon": "RefreshCw",
        "variant": "outline",
        "size": "sm",
        "onClick": {
          "action": "CALL_BACKEND",
          "function": "searchGifs",
          "key": "giphy",
          "toastOnError": false,
          "args": {
            "q": "${state.query}"
          },
          "onSuccess": {
            "action": "SET_STATE",
            "key": "gifs",
            "value": "${result.data}"
          }
        }
      }
    }
  ]
}

Manifest mínimo

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "ALERT",
        "props": {
          "tone": "danger",
          "title": {
            "es": "No se pudieron cargar los GIF",
            "en": "Could not load GIFs"
          },
          "message": {
            "es": "Comprueba tu conexión e inténtalo de nuevo.",
            "en": "Check your connection and try again."
          }
        },
        "children": [
          {
            "type": "BUTTON",
            "props": {
              "label": {
                "es": "Reintentar",
                "en": "Retry"
              },
              "icon": "RefreshCw",
              "variant": "outline",
              "size": "sm",
              "onClick": {
                "action": "CALL_BACKEND",
                "function": "searchGifs",
                "key": "giphy",
                "toastOnError": false,
                "args": {
                  "q": "${state.query}"
                },
                "onSuccess": {
                  "action": "SET_STATE",
                  "key": "gifs",
                  "value": "${result.data}"
                }
              }
            }
          }
        ]
      }
    }
  ]
}

Estructura

Texto

Acciones

Entradas y formularios

Datos

Navegación

Estado y avisos

Superpuestos

Gráficos

Lógica

ALERT

Props

Eventos y acciones que acepta

Estado y contexto que usa

Simulador interactivo

Usadas en sus ejemplos y manifests

Acciones que lo controlan

Ejemplo en un manifest real

Estructura

Texto

Acciones

Entradas y formularios

Datos

Navegación

Estado y avisos

Superpuestos

Gráficos

Lógica

ALERT

Props

Eventos y acciones que acepta

Estado y contexto que usa

Simulador interactivo

Usadas en sus ejemplos y manifests

Acciones que lo controlan

Ejemplo en un manifest real

Props

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

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