WIZARD

Categoría: NavegaciónSin hijos

Asistente por pasos con indicador de progreso.

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: WIZARD
Prop	Tipo	Requerido	Valores permitidos	Por defecto	Descripción
steps	arreglo de objeto	No	—	—	Pasos.
nav	enum	No	`"auto""manual"`	"auto"	auto: botones Atras/Siguiente integrados; manual: el contenido lleva NEXT_STEP/PREV_STEP.
backLabel	texto	No	—	"Atras"	Texto de Atras.
nextLabel	texto	No	—	"Siguiente"	Texto de Siguiente.
finishLabel	texto	No	—	"Finalizar"	Texto del ultimo paso.
onFinish	accion(es)acción	No	—	—	Accion al finalizar (nav auto).

Estructuras anidadas

steps[]

WIZARD: steps[]
Prop	Tipo	Valores permitidos	Por defecto	Descripción
steps[].title	texto	—	—	Titulo del paso.
steps[].description	texto	—	—	Descripcion corta.
steps[].content	componentes	—	—	Componentes del paso.

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
onFinish	—	Accion al finalizar (nav auto).
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

TOAST
Muestra un aviso breve.
Obligatorios: message · Campos: messagevarianttone
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
NEXT_STEP
Avanza el WIZARD que contiene al componente.
Obligatorios: — · Campos: —

Acciones que lo controlan

NEXT_STEP
Avanza el WIZARD que contiene al componente.
Obligatorios: — · Campos: —
PREV_STEP
Retrocede el WIZARD.
Obligatorios: — · Campos: —

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] (punto OVERLAY).

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

{
  "type": "WIZARD",
  "props": {
    "steps": [
      {
        "title": "Select Board",
        "content": [
          {
            "type": "SELECT",
            "props": {
              "label": "Board",
              "options": "${state.boards}",
              "valueKey": "id",
              "labelKey": "name",
              "onChange": {
                "action": "CALL_BACKEND",
                "function": "getLists",
                "args": {
                  "boardId": "${value}"
                },
                "onSuccess": {
                  "actions": [
                    {
                      "action": "SET_STATE",
                      "key": "lists",
                      "value": "${result}"
                    },
                    {
                      "action": "SET_STATE",
                      "key": "selectedBoard",
                      "value": "${value}"
                    },
                    {
                      "action": "NEXT_STEP"
                    }
                  ]
                }
              }
            }
          }
        ]
      },
      {
        "title": "Select List",
        "content": [
          {
            "type": "SELECT",
            "props": {
              "label": "List",
              "options": "${state.lists}",
              "valueKey": "id",
              "labelKey": "name",
              "onChange": {
                "actions": [
                  {
                    "action": "SET_STATE",
                    "key": "selectedList",
                    "value": "${value}"
                  },
                  {
                    "action": "NEXT_STEP"
                  }
                ]
              }
            }
          }
        ]
      },
      {
        "title": "Card Details",
        "content": [
          {
            "type": "FORM",
            "props": {
              "onSubmit": {
                "action": "CALL_BACKEND",
                "function": "createCard",
                "args": {
                  "listId": "${state.selectedList}",
                  "name": "${formData.name}",
                  "desc": "${formData.desc}"
                },
                "onSuccess": {
                  "action": "TOAST",
                  "message": "Card Created!"
                }
              },
              "fields": [
                {
                  "name": "name",
                  "label": "Card Title",
                  "defaultValue": "${context.subject}"
                },
                {
                  "name": "desc",
                  "label": "Description",
                  "type": "textarea",
                  "defaultValue": "From: ${context.from}\n\n${context.emailContent | truncate:500}"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Manifest mínimo

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "WIZARD",
        "props": {
          "steps": [
            {
              "title": "Select Board",
              "content": [
                {
                  "type": "SELECT",
                  "props": {
                    "label": "Board",
                    "options": "${state.boards}",
                    "valueKey": "id",
                    "labelKey": "name",
                    "onChange": {
                      "action": "CALL_BACKEND",
                      "function": "getLists",
                      "args": {
                        "boardId": "${value}"
                      },
                      "onSuccess": {
                        "actions": [
                          {
                            "action": "SET_STATE",
                            "key": "lists",
                            "value": "${result}"
                          },
                          {
                            "action": "SET_STATE",
                            "key": "selectedBoard",
                            "value": "${value}"
                          },
                          {
                            "action": "NEXT_STEP"
                          }
                        ]
                      }
                    }
                  }
                }
              ]
            },
            {
              "title": "Select List",
              "content": [
                {
                  "type": "SELECT",
                  "props": {
                    "label": "List",
                    "options": "${state.lists}",
                    "valueKey": "id",
                    "labelKey": "name",
                    "onChange": {
                      "actions": [
                        {
                          "action": "SET_STATE",
                          "key": "selectedList",
                          "value": "${value}"
                        },
                        {
                          "action": "NEXT_STEP"
                        }
                      ]
                    }
                  }
                }
              ]
            },
            {
              "title": "Card Details",
              "content": [
                {
                  "type": "FORM",
                  "props": {
                    "onSubmit": {
                      "action": "CALL_BACKEND",
                      "function": "createCard",
                      "args": {
                        "listId": "${state.selectedList}",
                        "name": "${formData.name}",
                        "desc": "${formData.desc}"
                      },
                      "onSuccess": {
                        "action": "TOAST",
                        "message": "Card Created!"
                      }
                    },
                    "fields": [
                      {
                        "name": "name",
                        "label": "Card Title",
                        "defaultValue": "${context.subject}"
                      },
                      {
                        "name": "desc",
                        "label": "Description",
                        "type": "textarea",
                        "defaultValue": "From: ${context.from}\n\n${context.emailContent | truncate:500}"
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

Props

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

Props: WIZARD
Prop	Tipo	Requerido	Valores permitidos	Por defecto	Descripción
steps	arreglo de objeto	No	—	—	Pasos.
nav	enum	No	`"auto""manual"`	"auto"	auto: botones Atras/Siguiente integrados; manual: el contenido lleva NEXT_STEP/PREV_STEP.
backLabel	texto	No	—	"Atras"	Texto de Atras.
nextLabel	texto	No	—	"Siguiente"	Texto de Siguiente.
finishLabel	texto	No	—	"Finalizar"	Texto del ultimo paso.
onFinish	accion(es)acción	No	—	—	Accion al finalizar (nav auto).

Estructuras anidadas

steps[]

WIZARD: steps[]
Prop	Tipo	Valores permitidos	Por defecto	Descripción
steps[].title	texto	—	—	Titulo del paso.
steps[].description	texto	—	—	Descripcion corta.
steps[].content	componentes	—	—	Componentes del paso.

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.

Evento

Recibe

Descripción

onFinish

—

Accion al finalizar (nav auto).

onLoad

—

Accion que se ejecuta una vez al montar.

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.

Usadas en sus ejemplos y manifests

TOAST
Muestra un aviso breve.
Obligatorios: message · Campos: messagevarianttone
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
NEXT_STEP
Avanza el WIZARD que contiene al componente.
Obligatorios: — · Campos: —

Acciones que lo controlan

NEXT_STEP
Avanza el WIZARD que contiene al componente.
Obligatorios: — · Campos: —
PREV_STEP
Retrocede el WIZARD.
Obligatorios: — · Campos: —

Ejemplo en un manifest real

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

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

{
  "type": "WIZARD",
  "props": {
    "steps": [
      {
        "title": "Select Board",
        "content": [
          {
            "type": "SELECT",
            "props": {
              "label": "Board",
              "options": "${state.boards}",
              "valueKey": "id",
              "labelKey": "name",
              "onChange": {
                "action": "CALL_BACKEND",
                "function": "getLists",
                "args": {
                  "boardId": "${value}"
                },
                "onSuccess": {
                  "actions": [
                    {
                      "action": "SET_STATE",
                      "key": "lists",
                      "value": "${result}"
                    },
                    {
                      "action": "SET_STATE",
                      "key": "selectedBoard",
                      "value": "${value}"
                    },
                    {
                      "action": "NEXT_STEP"
                    }
                  ]
                }
              }
            }
          }
        ]
      },
      {
        "title": "Select List",
        "content": [
          {
            "type": "SELECT",
            "props": {
              "label": "List",
              "options": "${state.lists}",
              "valueKey": "id",
              "labelKey": "name",
              "onChange": {
                "actions": [
                  {
                    "action": "SET_STATE",
                    "key": "selectedList",
                    "value": "${value}"
                  },
                  {
                    "action": "NEXT_STEP"
                  }
                ]
              }
            }
          }
        ]
      },
      {
        "title": "Card Details",
        "content": [
          {
            "type": "FORM",
            "props": {
              "onSubmit": {
                "action": "CALL_BACKEND",
                "function": "createCard",
                "args": {
                  "listId": "${state.selectedList}",
                  "name": "${formData.name}",
                  "desc": "${formData.desc}"
                },
                "onSuccess": {
                  "action": "TOAST",
                  "message": "Card Created!"
                }
              },
              "fields": [
                {
                  "name": "name",
                  "label": "Card Title",
                  "defaultValue": "${context.subject}"
                },
                {
                  "name": "desc",
                  "label": "Description",
                  "type": "textarea",
                  "defaultValue": "From: ${context.from}\n\n${context.emailContent | truncate:500}"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Manifest mínimo

{
  "manifestVersion": "1.0",
  "id": "my-extension",
  "version": "1.0.0",
  "name": "My extension",
  "permissions": [],
  "mounts": [
    {
      "point": "OVERLAY",
      "component": {
        "type": "WIZARD",
        "props": {
          "steps": [
            {
              "title": "Select Board",
              "content": [
                {
                  "type": "SELECT",
                  "props": {
                    "label": "Board",
                    "options": "${state.boards}",
                    "valueKey": "id",
                    "labelKey": "name",
                    "onChange": {
                      "action": "CALL_BACKEND",
                      "function": "getLists",
                      "args": {
                        "boardId": "${value}"
                      },
                      "onSuccess": {
                        "actions": [
                          {
                            "action": "SET_STATE",
                            "key": "lists",
                            "value": "${result}"
                          },
                          {
                            "action": "SET_STATE",
                            "key": "selectedBoard",
                            "value": "${value}"
                          },
                          {
                            "action": "NEXT_STEP"
                          }
                        ]
                      }
                    }
                  }
                }
              ]
            },
            {
              "title": "Select List",
              "content": [
                {
                  "type": "SELECT",
                  "props": {
                    "label": "List",
                    "options": "${state.lists}",
                    "valueKey": "id",
                    "labelKey": "name",
                    "onChange": {
                      "actions": [
                        {
                          "action": "SET_STATE",
                          "key": "selectedList",
                          "value": "${value}"
                        },
                        {
                          "action": "NEXT_STEP"
                        }
                      ]
                    }
                  }
                }
              ]
            },
            {
              "title": "Card Details",
              "content": [
                {
                  "type": "FORM",
                  "props": {
                    "onSubmit": {
                      "action": "CALL_BACKEND",
                      "function": "createCard",
                      "args": {
                        "listId": "${state.selectedList}",
                        "name": "${formData.name}",
                        "desc": "${formData.desc}"
                      },
                      "onSuccess": {
                        "action": "TOAST",
                        "message": "Card Created!"
                      }
                    },
                    "fields": [
                      {
                        "name": "name",
                        "label": "Card Title",
                        "defaultValue": "${context.subject}"
                      },
                      {
                        "name": "desc",
                        "label": "Description",
                        "type": "textarea",
                        "defaultValue": "From: ${context.from}\n\n${context.emailContent | truncate:500}"
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

Estructura

Texto

Acciones

Entradas y formularios

Datos

Navegación

Estado y avisos

Superpuestos

Gráficos

Lógica

WIZARD

Props

Estructuras anidadas

steps[]

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

WIZARD

Props

Estructuras anidadas

steps[]

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