--- title: "Custom NumPad" slug: "custom-numpad" category: "Widgets" reactComponent: "ArcWidgetNumpad" reactTier: "mini" reactSince: "0.1.0-alpha.5" reactExample: "numpad.tsx" locale: "es" hosts: "ninox" --- # Custom NumPad ## AI Defaults (read first) - **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 [Input](/documentation/input). Este widget de aquí es el numpad **independiente**, en línea o a pantalla completa. ## Código de aplicación ```javascript 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. ```javascript uniqueId: "numpad-" + Nr, ``` ### embedded Controla si el widget está independiente o integrado en un layout. ```javascript embedded: false, embedded: true, ``` ### currentValue Valor inicial en el display — p. ej. el valor actual del campo o vacío. ```javascript currentValue: text(Menge), currentValue: "", ``` ### actionTitle Texto en el botón de submit debajo del teclado numérico. Default: `"Submit"`. ```javascript 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. ```javascript backgroundColor: "#007bff", ``` ### fontColor Color del texto en los botones de dígitos y de submit. Default: `#ffffff`. ```javascript 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%"`) | ```javascript display: { fontColor: "#121B2B", height: "30%" }, ``` ### suffix Sufijo opcional junto al valor (p. ej. moneda o unidad). ```javascript suffix: "€", ``` ### clearOnFirstInput Si es `true`, en la **primera** entrada de dígito se borra y sustituye un `currentValue` predefinido — en lugar de añadirse. ```javascript 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). ```javascript decimalSeparator: ",", decimalSeparator: ".", ``` ### maxDecimals Límite opcional de decimales tras el separador decimal. ```javascript maxDecimals: 2, ``` ## actions Submit dispara `actions` con `##numpadValue##` ya resuelto — análogo a `##inputValue##` en `arcCustomInput`. ```javascript 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: ```javascript 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 [`data-bag-actions`](../patterns/data-bag-actions.md): ```javascript let stateField := fieldId(Nr, "helper_mainContentState"); actions: [{ type: "update", recordId: Nr, fieldId: stateField, dataBag: { base: helper_mainContentState, patch: { lastAmount: "##numpadValue##" } } }] ``` ## keyboard Entrada mediante teclado físico (opt-in). Default: `false`. ```javascript keyboard: true, ``` ```javascript 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`)