---
title: "Signature"
slug: "signature"
category: "Mini Widgets"
reactComponent: "ArcWidgetSignature"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "signature.tsx"
locale: "es"
hosts: "ninox"
---

# Signature (Unterschrift)

## AI Defaults (read first)

- **uniqueId**: Obligatorio, p. ej. `"signature-" + Nr`.
- **recordId**: Raw `Nr` des Datensatzes (nicht `number(Nr)`).
- **fieldId**: `fieldId(Nr, "Feldname")` – **Textfeld** für die Data-URL (`data:image/png;base64,...`).
- **value**: Aktueller Feldinhalt aus der Formel übergeben, z. B. `Unterschrift`, damit Vorschau und Ansicht funktionieren.
- **height**: z. B. `"200px"` oder `"100%"` im umgebenden Layout.
- **autoSaveDelay**: Millisekunden Debounce nach jedem Strich-Ende (`pointerup`); Standard `600`. `0` = sofort speichern nach Strich.
- **Persistence**: Speichern/Löschen über **Action Performer** (`type: "update"`). React: `onAction` — kein globales `database`.

# Dibujar una firma

El widget `arcCustomSignature` dibuja una firma con **ratón, táctil o lápiz** (pointer events) en un canvas HTML, la exporta como **data-URL PNG** y la guarda mediante Action Performer (`update`) en el campo de texto indicado. Entre trazo y trazo se guarda con **debounce** (no se necesita un botón de guardar independiente).

## Código de aplicación

```javascript
arcCustomSignature({
    uniqueId: "signature-" + Nr,
    recordId: Nr,
    fieldId: fieldId(Nr, "Unterschrift"),
    value: Unterschrift,
    height: "220px",
    lineColor: "#000000",
    lineWidth: 2,
    backgroundColor: "#FFFFFF",
    placeholder: "Hier unterschreiben",
    readonly: false,
    autoSaveDelay: 600,
    clearLabel: "Löschen",
    editLabel: "Neu unterschreiben"
})
```

## Parámetros

| Parameter | Beschreibung |
|-----------|----------------|
| `uniqueId` | ID único (`id` HTML). |
| `recordId` | Registro que se actualiza. |
| `fieldId` | Campo de texto de destino (string data-URL). |
| `value` | Opcional: valor actual para visualización/vista previa. |
| `height` | Altura mínima del widget. |
| `lineColor` | Color del trazo (hex). |
| `lineWidth` | Ancho del trazo en píxeles CSS. |
| `backgroundColor` | Fondo del lienzo. |
| `placeholder` | Texto de aviso cuando el área está vacía. |
| `readonly` | `true`: solo visualización, sin entrada. |
| `autoSaveDelay` | Debounce en ms tras `pointerup`; `0` = sin retraso. |
| `clearLabel` | Tooltip y `aria-label` para el **icono de papelera** arriba a la derecha (modo de dibujo). |
| `editLabel` | Tooltip y `aria-label` para el **icono de refresco** arriba a la izquierda (modo de vista con firma guardada). |

## Comportamiento

- **Vista**: si `value` es una URL `data:image/…` válida, la firma se muestra como imagen; el **icono de refresco** arriba a la izquierda vuelve a abrir el lienzo.
- **Guardado**: tras cada trazo completado, se guarda silenciosamente en segundo plano una vez transcurrido `autoSaveDelay` (sin línea de estado en el widget).
- **Borrado**: **icono de papelera** arriba a la derecha en el lienzo — vacía el área y pone el campo en `null` (de inmediato, sin debounce).

## Notas de NinoxScript

- Crea el campo para la firma como **texto** (data-URL larga).
- Establece siempre `fieldId` con `fieldId(Nr, "…")`.
- Usa `value: Unterschrift` (nombre de visualización) para que el widget conozca el contenido guardado.