Premium Widgets

Custom NumPad

AI Defaults

uniqueId: Required, `"numpad-" + Nr`.
embedded: Default `false`, set `true` when nested in a layout.
currentValue: Initial display value (string or number).
actions: Required for submit — use `##numpadValue##` placeholder (numeric, dot decimal) like `##inputValue##` on Input.
confirm / dataBag: Standard action types — no Numpad-specific API; nest `confirm` or `dataBag` inside `actions`.
keyboard: Opt-in (`true` or `{ enabled: true, submitOnEnter: true }`) — physical keyboard when no other field is focused.
fontColor: Text color on digit and submit buttons (default `#ffffff`). Display uses `display.fontColor`.
Optimized for iPad: Primary use case is tablet input without keyboard popup.

Custom NumPad

Con el Numpad puedes diseñar tus interfaces todavía mejor. Especialmente optimizado para iPad, el Numpad ofrece una forma fluida de introducir números directamente — sin que aparezca un teclado molesto. El botón de submit (o Enter con el teclado activado) dispara el sistema central de Actions — incluyendo confirm, dataBag y cadenas de acciones arbitrarias.

Diferencia: Para un campo numérico con un pequeño numpad emergente (análogo al selector de fecha) usa arcCustomInput con type: "number" y numpad / numberFormat — consulta <a href="/documentation/input">Input</a>. Este widget de aquí es el numpad independiente, en línea o a pantalla completa.

Código de aplicación

arcCustomNumPad({
    uniqueId: "numpad-" + Nr,
    embedded: false,
    currentValue: text(Menge),
    actionTitle: "Speichern",
    backgroundColor: "#007bff",
    fontColor: "#ffffff",
    display: {
        fontColor: "#121B2B",
        height: "30%"
    },
    suffix: "€",
    clearOnFirstInput: true,
    decimalSeparator: ",",
    maxDecimals: 2,
    keyboard: true,
    actions: [{
        type: "update",
        recordId: Nr,
        fieldId: fieldId(Nr, "Menge"),
        value: "##numpadValue##"
    }]
})

Ajustes generales

uniqueId

uniqueId la asignas de forma individual y debería ser única. Si creas varios numpads con distintos settings en tu interfaz, los estilos no se sobrescriben.

uniqueId: "numpad-" + Nr,

embedded

Controla si el widget está independiente o integrado en un layout.

embedded: false,
embedded: true,

currentValue

Valor inicial en el display — p. ej. el valor actual del campo o vacío.

currentValue: text(Menge),
currentValue: "",

actionTitle

Texto en el botón de submit debajo del teclado numérico. Default: "Submit".

actionTitle: "Speichern",

backgroundColor

Color de fondo de los botones de dígitos y de submit. Default: #007bff. Al pulsar (ratón o teclado) se muestra automáticamente una variante ligeramente más clara del mismo color.

backgroundColor: "#007bff",

fontColor

Color del texto en los botones de dígitos y de submit. Default: #ffffff.

fontColor: "#ffffff",
fontColor: "#121B2B",

display

Feld	Typ	Beschreibung
`fontColor`	text	Color del texto del display
`height`	text	Altura máx. del display (CSS, p. ej. `"30%"`)

display: {
    fontColor: "#121B2B",
    height: "30%"
},

suffix

Sufijo opcional junto al valor (p. ej. moneda o unidad).

suffix: "€",

clearOnFirstInput

Si es true, en la primera entrada de dígito se borra y sustituye un currentValue predefinido — en lugar de añadirse.

clearOnFirstInput: true,

decimalSeparator

Separador de visualización para los decimales. Default: ",". El placeholder ##numpadValue## siempre se resuelve como número decimal con punto (compatible con Ninox).

decimalSeparator: ",",
decimalSeparator: ".",

maxDecimals

Límite opcional de decimales tras el separador decimal.

maxDecimals: 2,

actions

Submit dispara actions con ##numpadValue## ya resuelto — análogo a ##inputValue## en arcCustomInput.

actions: [{
    type: "update",
    recordId: Nr,
    fieldId: fieldId(Nr, "Menge"),
    value: "##numpadValue##"
}]

Varias actions se ejecutan de forma consecutiva.

confirm

Diálogo de confirmación antes de guardar — no se necesita código específico de Numpad:

actions: [{
    type: "confirm",
    title: "Wert übernehmen?",
    message: "##numpadValue## speichern?",
    confirmLabel: "Speichern",
    cancelLabel: "Abbrechen",
    actions: [{
        type: "update",
        recordId: Nr,
        fieldId: fieldId(Nr, "Menge"),
        value: "##numpadValue##"
    }]
}]

dataBag

Actualizaciones parciales de estado JSON — consulta <a href="../patterns/data-bag-actions.md"><code>data-bag-actions</code></a>:

let stateField := fieldId(Nr, "helper_mainContentState");
actions: [{     type: &quot;update&quot;,     recordId: Nr,     fieldId: stateField,     dataBag: {         base: helper_mainContentState,         patch: { lastAmount: &quot;##numpadValue##&quot; }     } }]</code></pre>
keyboard
Entrada mediante teclado físico (opt-in). Default: false.
keyboard: true,
keyboard: {
    enabled: true,
    submitOnEnter: true
},
Taste Wirkung
0–9 Añadir dígito
, o . Separador decimal (una vez)
Backspace Borrar el último dígito (botón ⌫)
Delete / Escape Borrar todo (C)
Enter Submit (dispara actions)
Comportamiento con varios numpads: El numpad activo es el último cargado o pulsado.
Red de seguridad: Mientras el foco esté en otro campo de entrada (input, textarea, arcCustomInput, arcCustomSelect, …), el numpad no captura las pulsaciones de teclas.
Teclado numérico
Layout (3 columnas):
1  2  3
4  5  6
7  8  9
C  ⌫  0
,  (Dezimal, volle Breite)
C — restablece el valor a 0
⌫ — elimina el último dígito
Decimal — separador decimal de un solo uso (etiqueta = decimalSeparator)

Taste	Wirkung
`0`–`9`	Añadir dígito
`,` o `.`	Separador decimal (una vez)
`Backspace`	Borrar el último dígito (botón ⌫)
`Delete` / `Escape`	Borrar todo (`C`)
`Enter`	Submit (dispara `actions`)