Developer Kit · Patterns

Nested Widget Descriptors

Nested Widget Descriptors (Object-Notation)

AI Defaults

Root: in Vue: the `ArcWidget…` component with `:data` and `@action`.
Nested: in a slot: `{ widget, uid, data }` inside the parent's `data`. -** `widget`**: kebab-case ID (`"arc-widget-button"`), not the Vue component name. ---

Widgets anidados como objeto JSON

Los mini-widgets y otros widgets se colocan en slots como objeto JSON puro — no como HTML pre-renderizado.

Esto es útil en bloques de layout, celdas de tabla, sidebars de drawing y superficies profundamente anidadas.

Dos notaciones

Root (componente de Vue)

El punto de entrada es el componente. Los descriptores anidados viven dentro de data.

Anidado (contenido en un slot)

En blocks[].value (y slots comparables) usas la notación de descriptor de widget:

{
    widget: "arc-widget-button",
    uniqueId: "open-btn-" + Nr,   // oder kurz: uid: "open-btn-" + Nr
    data: {
        title: "Öffnen",
        height: "20px",
        width: "auto",
        actions: [{ type: "popup", recordId: "42" }]
    }
}

Para el ID, el descriptor acepta ambas notaciones por igual: - uniqueId — coherente con la configuración raíz - uid — forma corta, igualmente válida

Correspondencia

Componente de Vue	Descriptor
`<ArcWidgetLayout … />`	`widget: "arc-widget-layout"`
Config-Props	En `data: { … }`

Ejemplo completo (Layout → Button)

Ver también <a href="/docs/vue/widgets/custom-layout">Custom Layout</a> para bloques de layout anidados.

{
    widget: "arc-widget-layout",
    uniqueId: "sidebar-item-" + Nr,   // uid: "sidebar-item-" + Nr wäre gleichwertig
    data: {
        embedded: true,
        direction: "horizontal",
        gap: "10px",
        blocks: [{
            width: "fraction",
            height: "auto",
            value: "Mangel ID"
        }, {
            width: "auto",
            height: "auto",
            value: {
                widget: "arc-widget-button",
                uniqueId: "open-btn-" + Nr,   // uid: "open-btn-" + Nr wäre gleichwertig
                data: {
                    title: "Öffnen",
                    height: "20px",
                    actions: [{ type: "popup", recordId: "42" }]
                }
            }
        }]
    }
}

Widgets padre con slots de descriptor

Estos widgets montan descriptores anidados (tienen append_content):

ID de widget	Slots típicos
`arc-widget-layout`	`blocks[].value`
`arc-widget-button`	`icon`, `title`, `subtitle`, `prefix`, `suffix`
`arc-widget-table`	`table[].columns[].value`
`arc-widget-drawing`	`sidebarItem`, `rightSideContent`, contenido de shapes
`arc-widget-kanban`	`value` de tarjetas, contenido de swimlanes
`arc-widget-select`	`currentValue`, `items[].title`
`arc-widget-input`	slots de label/prefix
`arc-widget-badge`	contenido del badge
`arc-widget-upload`	`container.value`
`arc-widget-calendar-week`	contenido de entries
`arc-widget-calendar-timeline`	contenido de celdas/entries
`arc-widget-calendar-grid`	contenido de celdas

Widgets hijo (frecuentemente anidados)

Todos los widgets registrados en el bundle pueden aparecer como valor de widget, por ejemplo:

Valor de `widget`	Componente de Vue (solo root)
`arc-widget-layout`	`ArcWidgetLayout`
`arc-widget-button`	`ArcWidgetButton`

¿Qué formato usar cuándo?

Situación	Formato
Widget raíz en la app	`<ArcWidgetXxx :data @action />`
Contenido en un slot	`{ widget, uid, data }`
Texto plano en un bloque	String (`value: "Text"`)

Errores a evitar

❌ widget: "arcCustomLayout" oder widget: "ArcWidgetLayout" — ID incorrecto (CamelCase)
❌ Poner uniqueId o uid dentro de data — siempre al nivel superior (al mismo nivel que widget y data)

Ver también

<a href="/docs/vue/widgets/custom-layout">Custom Layout</a> — bloques de layout y slots value
<a href="/docs/vue/mini-widgets/buttons">Button</a> — prefix / suffix como widgets anidados