Premium Widgets

Custom Dev Tools

AI Defaults

uniqueId: Required, e.g. `"dev-tools-" + Nr`.
errorPanel.visible: Only show when `isAdminMode()` – Dev-Tools sind für Entwickler gedacht.
errorPanel.footerButtons: Nutze `type: "update"` für Feld-Updates, `type: "customJS"` nur für spezielle UI-Aktionen. Core emits `footer_click` (index); Ninox runs `actions`. React: `onFooterClick(index)` / `onAction`. Set `clickable: true` on React hosts.

Custom Dev Tools

Widget auxiliar de desarrollo para Ninox con estructura de secciones ampliable. Primera sección: Error Panel con lista de errores de CodeMirror, salida de debug y botones de footer opcionales.

Código de aplicación

if isAdminMode() then
  arcCustomDevTools({
    uniqueId: "dev-tools-" + Nr,
    errorPanel: {
      visible: true,
      maxErrors: 50,
      debug: {
        activeTab: activeTab,
        filter: filterStatus,
        selectedRecord: selectedRecord
      },
      footerButtons: [
        {
          title: "State zurücksetzen",
          actions: [{
            type: "update",
            recordId: Nr,
            field: fieldId(Nr, "helper_mainContentState"),
            value: ""
          }]
        }
      ]
    }
  })
end

Parámetros

Parameter	Typ	Beschreibung
`uniqueId`	string	Obligatorio, ID único
`errorPanel`	object	Configuración del panel de errores
`errorPanel.visible`	boolean	Panel de errores activado/desactivado
`errorPanel.maxErrors`	number	Número máx. de errores mostrados (Default: 50)
`errorPanel.debug`	object	Variables de debug (key: value), p. ej. `{ activeTab: activeTab, filter: filterStatus }`
`errorPanel.footerButtons`	array	Botones personalizados en el footer, ver abajo

errorPanel.footerButtons

Array de objetos de botón con:

Eigenschaft	Typ	Beschreibung
`title`	string	Etiqueta del botón
`actions`	array	Ninox actions como en arcCustomButton: `[{ type: "update", recordId: Nr, field: ..., value: ... }]`

footerButtons: [
  {
    title: "Editor fokussieren",
    actions: [{ type: "customJS", value: "document.querySelector('.cm-editor')?.focus()" }]
  },
  {
    title: "State zurücksetzen",
    actions: [{
      type: "update",
      recordId: Nr,
      field: fieldId(Nr, "helper_mainContentState"),
      value: ""
    }]
  }
]

Comportamiento

Editor cerrado: Muestra «Editor no abierto». Sin MutationObserver, solo un polling ligero (1 s).
Editor abierto: Recopila errores del gutter de CodeMirror y actualiza la lista.
Botón de escaneo: Recorre el editor una vez y recopila todos los errores (también fuera del área visible). Resuelve el problema de virtualización de CodeMirror.
Clic en un error: Se desplaza hasta la línea en el editor. Enfoque en dos fases: primero el panel desplaza el editor hasta el área de destino, luego se busca y centra la línea tras el render.
Posición: El panel se muestra abajo a la derecha. La posición se puede mover arrastrando y se guarda en localStorage.

Ampliabilidad

Más adelante se pueden añadir más secciones, p. ej. aiHelper: { visible: true }.