Mini Widgets

Select (Dropdown)

Select (Dropdown)

Select (Dropdown)

El widget arcCustomSelect es tu herramienta para dropdowns modernos y con estilo en Ninox. Sustituye el campo de selección clásico por una interfaz totalmente personalizable — con iconos, efectos hover, control por teclado y entradas dinámicas.

Usas arcCustomSelect en cualquier lugar donde quieras ofrecer a tus usuarios una posibilidad de elección — ya sea para asignar estados, filtrar o editar campos de datos. El widget es ideal para:

• Selección de valores de estado (p. ej. «Abierto», «En proceso», «Completado»)
• Etiquetado rápido de registros
• Navegación compacta dentro de vistas
• Filtrado en combinación con otros widgets

📢 La gran ventaja: puedes adaptar el diseño de forma flexible (p. ej. ancho, colores, tamaño de fuente), rellenar listas de items dinámicas desde tablas e incluso controlar con precisión el comportamiento al enfocar o hacer clic.

arcCustomSelect({
    uniqueId: "Status" + Nr,
    recordId: Nr,
    field: "",
    embedded: true,
    width: "",
    height: "",
    alignX: "",
    fontColor: "",
    fontSize: "",
    fontWeight: "",
    backgroundColor: "",
    borderColor: "",
    borderWidth: "",
    borderRadius: "",
    itemsSettings: {
            width: "",
            height: "",
            borderRadius: ""
        },
    labelSettings: {
            title: "",
            fontSize: "",
            alignX: "",
            height: ""
    },
    clickPosition: "",
    placeholder: "",
    disabled: false,
    multiselect: false,
    reset: {
            title: "",
            value: "",
            hide: true
        },
  focusAction: {
    autoFocus: false,
    showCurrentValue: false
        },
    currentValue: text(Status),
    items: let id := Nr;
        (select Status).[{
            title: Titel,
            active: number(id.Status) = number(Nr),
            value: number(Nr)
            }]
})

Parámetros individuales

uniqueId

Obligatorio: ✅

Con uniqueId cada instancia de Select se vuelve identificable de forma única — especialmente importante cuando se usan varios Custom Selects a la vez en la página.

El ID hace internamente que:

• el foco, la selección y el comportamiento de teclado se asignen correctamente,
• no se produzcan solapamientos entre instancias,
• el estado de cada select box se mantenga estable, incluso con cambios rápidos o carga dinámica.

uniqueId: Nr, // Ninox-Feld
uniqueId: "Aufgabe Beschreibung", // Text in "

recordId

Obligatorio: ✅

El parámetro recordId vincula el componente Select con un registro concreto en Ninox — exactamente aquel en el que se encuentra el campo que quieres controlar con el widget Select.

recordId: Nr, // Ninox-Tabellen Id

field

Obligatorio: ✅

El parámetro field indica qué campo del registro indicado (recordId) debe leer y escribir el widget Select.

No se trata del nombre de campo visible, sino de la fieldId interna del campo en Ninox.

🔍 Cómo encontrar la fieldId

La fieldId es una designación interna del sistema, p. ej. "K4".

Puedes averiguarla de dos formas:

• Con la función de Ninox: fieldId()
• O con el mini-widget gratuito: fieldFinder

field: "B1",
field: fieldId(Nr, "Status")
field: "", // gibst du keine Id an, funktioniert das Select nicht

embedded

Indica si el widget Select está integrado dentro de otro widget — p. ej. dentro de una columna de <a href="/custom-table">Custom Table</a> o de un contenedor <a href="https://www.arc-rider.de/en/documentation/custom-layout">Layout</a> — o si se incorpora libremente en un formulario de Ninox como widget independiente (p. ej. directamente en un campo de fórmula).

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true, // wenn Text eingebettet in anderes Widget
embedded: "", // default: true

width

El parámetro width controla el ancho de representación del widget Select. Puedes indicar un ancho fijo en píxeles, p. ej. "240px", o un ancho relativo como "100%", para que el widget se adapte de forma flexible al layout circundante.

Aplicación

• En campos de fórmula colocados libremente, con width puedes influir de forma específica en el layout.
• Si el widget se usa integrado (p. ej. en una columna de <a href="https://www.arc-rider.de/en/documentation/custom-table">CustomTable</a>), puedes adaptar automáticamente el ancho al elemento padre estableciendo width: 100%.

💡 Recomendación: evita anchos muy pequeños — los placeholders largos o los valores seleccionados podrían mostrarse cortados.

width: "100%", // Prozent-Werte oder "80px" Pixel-Werte
width: "auto", // width passt sich an Inhalt an
width: "", // default: 100%

height

Con el parámetro height puedes controlar la altura visible del componente Select. Esto es especialmente útil si necesitas un layout uniforme o quieres controlar la representación en tablas y layouts anidados.

height: "100%", // Prozent-Werte oder "80px" Pixel-Werte
height: "auto", // height passt sich automatisch an Inhalt an
height: "", // default: auto

alignX

Con alignX determinas la alineación horizontal del contenido visible en el campo Select — es decir, por ejemplo, si el valor seleccionado se muestra alineado a la izquierda, centrado o a la derecha.

Aplicación

• "left" es el valor por defecto y funciona bien en la mayoría de los casos.
• "center" puede tener sentido en campos muy estrechos o con contenidos puramente icónicos.
• "right" se usa raramente, pero puede ser útil con números o ciertas necesidades de layout.

💡 Recomendación: usa center o right solo si el resto del layout lo requiere — con textos más largos, left suele ser más legible.

alignX: "left", // linksbündig
alignX: "center", // zentriert
alignX: "right", // rechtsbündig
alignX: "", // default:  left

itemsWidth

Con itemsWidth fijas el ancho de la lista dropdown — es decir, del área en la que se muestran las opciones de selección. Si no estableces este valor, el ancho de la lista se ajusta automáticamente al ancho del campo Select.

Aplicación: puedes hacer la lista dropdown deliberadamente más ancha o más estrecha que el propio campo Select. Esto es especialmente útil cuando los contenidos de las opciones son más largos de lo que permite el ancho del campo real.

itemsWith: "100%", // Prozent-Werte oder "80px" Pixel-Werte
itemsWith: "auto", // width passt sich an Inhalt an
itemsWith: "", // default: 100%

itemsHeight

El parámetro itemsHeight fija la altura de cada entrada en la lista dropdown. Con esto puedes controlar cuánto espacio ocupa cada punto de selección — independientemente del tamaño de fuente.

itemsHeight: "100%", // Prozent-Werte oder "80px" Pixel-Werte
itemsHeight: "auto", // height passt sich an
itemsHeight: "", // default: auto

fontColor

Con fontColor puedes fijar el color de fuente de la visualización de selección en el campo Select. Esto afecta tanto al texto placeholder como al valor actualmente seleccionado. 💡 Recomendación: usa contrastes lo más altos posible con el fondo — especialmente en variantes integradas en layouts con color. Con fondo oscuro deberías elegir un color de fuente claro, p. ej. "#ffffff".

fontColor: "#EEEEEE", // z.B. HEX-Wert in "
fontColor: "", // default: #000

fontSize

El parámetro fontSize determina el tamaño del texto dentro del campo Select — tanto para el placeholder como para las entradas seleccionadas.

fontSize: "15px",
fontSize: "", // default: 13px

fontWeight

El parámetro fontWeight determina el grosor de fuente del texto en el campo Select (values y placeholder). Con esto puedes controlar de forma específica si el texto se muestra más discreto o más marcado.

Aplicación: puedes elegir entre valores predefinidos como "normal" o "bold", o usar pesos numéricos como 400 (normal) o 600 (semi-bold). Esto es especialmente útil si usas distintos grosores de fuente de forma sistemática en el layout.

fontWeight: "700",
fontWeight: "", // default: 400

backgroundColor

El parámetro backgroundColor fija el color de fondo del campo Select visible — es decir, la superficie en la que se muestra el placeholder o el valor seleccionado.

Aplicación: con esto puedes adaptar visualmente el widget a tu interfaz, p. ej. en layouts oscuros o en campos de entrada armonizados por color. Se admiten valores de color en formato HEX, RGB o nombres en texto plano como "white" o "transparent".

💡 Recomendación: presta atención a un contraste suficiente con el color de fuente (fontColor) para que el texto siga siendo legible. En layouts oscuros, "transparent" puede tener sentido si el diseño de fondo debe transparentarse.

backgroundColor: "#4970ff", // z.B. HEX-Wert in "
backgroundColor: "", // default: #FFFFFF

borderColor

Con el parámetro borderColor fijas el color del borde alrededor del campo Select. Con esto puedes adaptar el widget de forma específica a tu esquema de color o layout.

💡 Recomendación: usa colores de borde con mucho contraste solo de forma deliberada — p. ej. para resaltar campos o separar visualmente grupos. Los tonos de gris discretos como "#dddddd" o "#999999" suelen resultar agradablemente sobrios.

borderColor: "#EEEEEE", // z.B. HEX-Wert in "
borderColor: "", // default: #e5e5e5

borderWidth

Con borderWidth determinas el grosor del borde alrededor del campo Select. Con esto puedes aumentar o reducir deliberadamente la presencia visual del widget en el layout.

Aplicación: usa bordes finos ("1px") para una integración discreta, o más gruesos ("2px" a "3px") para un realce visual. "0px" elimina el borde por completo, especialmente útil en diseños integrados con superficies claras.

borderWidth: "#EEEEEE", // z.B. HEX-Wert in "
borderWidth: "", // default: 1px

borderRadius

El parámetro borderRadius controla el redondeo de las esquinas del campo Select. Con esto puedes dar al componente un aspecto entre angular, ligeramente redondeado o completamente redondo.

🧩 Valores típicos

• "0px" → completamente angular
• "4px" → ligeramente redondeado (estándar)
• "6px" → moderno y suave
• "50%" → redondo (solo tiene sentido con ancho/alto cuadrado)

borderRadius: "20px", // z.B. Wert in px
borderRadius: "", // default: 3px

Bloque itemsSettings

Con itemsSettings puedes controlar la apariencia de todo el menú dropdown — no de entradas individuales de la lista, sino de toda el área en la que se muestran todas las opciones.

itemsSettings: {
            width: "", // default: 100%
            height: "", // default: 200px
            borderRadius: "" // default:  5px
        },
Einzelerklärungen:
width: "40px", // Wert in px oder aber auch z.B. "auto"   width: "", // default: 100%
height: "200px", // Wert in px oder aber auch z.B. "auto" (passt sich Inhalt an)   height: "", // default: 200px
borderRadius: &quot;30px&quot;, // Wert in px oder aber auch z.B. &quot;auto&quot; (passt sich Inhalt an)   borderRadius: &quot;&quot; // default:  3px</code></pre>
Bloque labelSettings
Con labelSettings controlas la representación de un label opcional sobre el campo Select — es decir, un título breve o texto de aviso como p. ej. «Estado» o «Categoría». Este texto aparece encima del widget.
title – El texto que se muestra como label (p. ej. "Kategorie") — también como mini-widget (p. ej. arcCustomText)
fontSize – Tamaño de fuente del label (p. ej. "11px")
fontColor – Color de fuente del label (hex, p. ej. "#EEEEEE")
alignX – Alineación horizontal del label ("left", "center", "right")
height – Altura del contenedor del label (p. ej. "15px")
labelSettings: {
        title: "",
        fontSize: "",
        alignX: "",
        height: ""
    }
Einzelerklärungen:
title: &quot;Status&quot;, // Wort, in &quot; welches als Label ausgegeben werden soll   title: &quot;&quot;, // kein Label wird angezeigt
fontSize: &quot;30px&quot;, // z.B. Pixel Werte   fontSize: &quot;&quot;, // default: 11px
alignX: &quot;right&quot;, // Label ist rechtsbündig   alignX: &quot;left&quot;, // Label ist linksbündig   alignX: &quot;&quot;, // default: left
height: &quot;40px&quot;, // z.B. Pixel Werte   height: &quot;&quot;, // default: 15px</code></pre>
💡 Notas
Si title no se establece o se deja vacío, no aparece ningún label.
La alineación (alignX) solo afecta al label, no al campo Select en sí.
fontSize y height ayudan a la coordinación exacta con otros campos en el layout.
clickPosition
El parámetro clickPosition determina qué parte del campo Select es clicable para abrir el menú dropdown.
🧩 Ajustes posibles
"icon" – Solo el pequeño símbolo de flecha en el extremo derecho es clicable.
"field" – Todo el campo (incluyendo el área de texto y el icono) es clicable. (Estándar)
clickPosition: "icon", // nur auf icon klickbar (select klappt sich aus)
clickPosition: "", // default: klick auf gesamtem select möglich
placeholder
El parámetro placeholder define el texto mostrado en el campo Select mientras aún no se haya seleccionado ningún valor. Sirve como aviso para el usuario sobre lo que se espera en el campo o qué selección se puede hacer.
🧩 Ejemplos de uso típicos
"Bitte auswählen"
"Status wählen"
"–"
placeholder: "select", // eigener Platzhalter
placeholder: "", // default: "Auswählen"
Si se establece un placeholder, aparece en gris y ligeramente transparente, hasta que se haga una selección real. 💡 Notas
El texto no se guarda, solo sirve para la visualización.
Si ya se ha pasado un currentValue, el placeholder no se muestra.
Mantén el texto corto — p. ej. "select" o "choose" — especialmente en campos estrechos.
disabled
El parámetro disabled determina si el campo Select está desactivado — es decir, no clicable y no editable.
🧩 Comportamiento en estado desactivado
El dropdown no se puede abrir.
El cursor del ratón muestra el icono «prohibit» (círculo con línea diagonal)
El valor actual permanece visible, pero no se puede cambiar.
Visualmente el campo se muestra ligeramente atenuado.
disabled: true, // das select kann nich angeklickt werden
disabled: if Datum < today() then true else false, // hier können eigene Abhängigkeiten definiert werden, wenn bei einer Bestimmten Bedingung das select nicht klickbar sein soll
disabled: "", // default: false (das select ist anklickbar)
multiselect
El parámetro multiselect activa el modo de selección múltiple en el campo Select. Con esto se pueden seleccionar y escribir varios valores a la vez en el campo — en lugar de solo uno.
🧩 Comportamiento con multiselect: true activo
Cada clic en una entrada añade el valor a la lista (en lugar de sustituirlo).
Los valores ya seleccionados se mantienen.
Las entradas pueden marcarse visualmente como «activas».
La selección permanece abierta incluso después de un clic, para poder elegir varios valores uno tras otro.
El control por teclado difiere ligeramente:</p><ul><li data-preset-tag="p"><p>Enter confirma una selección, el menú permanece abierto.
Tab cambia directamente al siguiente campo, sin confirmar automáticamente.
</li></ul> <pre><code class="language-javascript">multiselect: true // wenn du das Select als Multi-Select nutzen möchtest multiselect: &quot;&quot; // default: false</code></pre>
⚠️ Importante en la implementación en Ninox
En Ninox, un multiselect no puede escribir directamente en un campo de selección múltiple o campo de referencia múltiple. En su lugar debes usar un campo auxiliar de tipo texto:
Pasa este campo auxiliar en el parámetro field (o fieldId) al widget Select.
Ahí se recopila el texto de todos los valores seleccionados (p. ej. IDs o nombres) — normalmente como lista separada por comas.
A continuación, usa un «Trigger tras cambio» sobre el campo auxiliar para rellenar la selección múltiple real.
Código del trigger:
let current := this;
if number(addAuftragsart) = 0 then
    Auftragsart := null
else
    if contains(numbers(current.Auftragsart), number(addAuftragsart)) then
        let value := unique(for item in numbers(current.Auftragsart) do
                    if number(item) = number(addAuftragsart) then
                        0
                    else
                        item
                    end
                end);
        Auftragsart := value[!= 0]
    else
        Auftragsart := unique(numbers(current.Auftragsart), number(addAuftragsart))
    end
end;
addAuftragsart := null
emptyValue
En el parámetro emptyValue determinas cuál debe ser el texto del botón de restablecer (primer campo de selección en el dropdown/items abierto). (desde v1.1.0) (se sobrescribe si en el bloque reset hay algo indicado en title)
<blockquote>*!! Por ahora, el parámetro de configuración anterior **emptyValue: "zurücksetzen"**sigue activo, pero por favor usad en el futuro para este ajuste el parámetro **title: "zurücksetzen"** en el bloque reset.*
</blockquote> <pre><code class="language-javascript">emptyValue: &quot;empty&quot;, // eigener Text emptyValue: &quot;&quot;, // default: &quot;(leer)&quot;) </code></pre>
Bloque reset
El bloque reset controla si y cómo se muestra en el menú dropdown una opción «Restablecer», con la que se puede borrar el valor actual o restablecerlo a un valor definido.
title – El texto mostrado para la entrada de restablecer (p. ej. "(leer)", "Zurücksetzen").
value – El valor que se establece cuando se hace clic en la entrada. Si no se establece, se usa automáticamente emptyValue.
hide – Si es true, la entrada de reset no se muestra, pero puede seguir usándose internamente.
reset: {
            title: "reset",
            value: 0,
            hide: true
        },
Einzelerklärungen:
title: &quot;reset&quot;, // eigener Text   title: &quot;&quot;, // default: Wert in Parameter emptyValue (falls emptyValue: &quot; dann ist hier default: &quot;(leer)&quot;)
value: 0, // eigener Wert (0 = setzt den Wert auf 0 statt null zurück)   value: &quot;&quot;, // default: null (Ninox-Feld wird null gesetzt)
hide: true, // select kann nicht zurückgesetzt werden   hide: &quot;&quot;, // default: false (zurücksetzen Button wird angezeigt)</code></pre>
Bloque de settings focusAction
Con el bloque de settings focusAction puedes controlar el comportamiento del campo de búsqueda en el Select.
Parámetros:
autoFocus – Determina si el cursor salta automáticamente al campo de búsqueda. Especialmente para tablets, donde el teclado aparece de inmediato y podría desorientar al usuario, desactivarlo resulta útil.
showCurrentValue – Si es true, el currentValue (p. ej. tus propios badges construidos con arcCustomLayout) se muestra a la izquierda y el campo de búsqueda al lado. Ideal para Multi-Select con representación de tags.
focusAction: {
    autoFocus: false, // true or false // default: true
    showCurrentValue: true // true or false // default: false
}
🧩 Aplicación típica para showCurrentValue:
Si en currentValue renderizas tus propios badges/tags con arcCustomLayout y estos deben seguir visibles al abrir el Select (con el campo de búsqueda al lado), establece showCurrentValue: true.
currentValue
El parámetro currentValue determina qué valor debe mostrarse en el campo Select con items seleccionados. Es decir, define la visualización del campo en estado cerrado.
🧩 Comportamiento según el modo
Single-Select (multiselect: false)
Multi-Select (multiselect: true)
currentValue: text(Status), // Bezeichnung deines Ninox-Feldes innerhalb von text()
currentValue: arcCustomBadge({
        uniqueId: "customBadge" + Nr,
        embedded: true,
        width: "100%",
        icon: "",
        iconPosition: "",
        fontSize: "",
        fontWeight: "700",
        borderRadius: "",
        singleColor: color(Status),
        fontColor: "",
        backgroundColor: "",
        borderColor: "",
        paddingY: "5px",
        paddingX: "10px",
        value: text(Status)
    }), // individuell gestaltetes customBadge mit der Bezeichnung deines Ninox-Feldes bei value
  currentValue: "", // default: es wird nicht der ausgewählte Wert angezeigt, sondern der placeholder
Bloque items
Campo obligatorio: ✅
El bloque items define las posibilidades de selección que se muestran en el dropdown. Cada opción se indica como un objeto con propiedades determinadas — p. ej. texto visible, valor interno y estado activo.
🔄 Dos variantes de construcción: puedes rellenar customSelect con valores de dos formas distintas:
1. Dinámicamente desde una tabla de Ninox
Ideal para listas que pueden cambiar o están vinculadas a otros campos.
items: let id := Nr;
        (select Status_Projekte).[{
            title: Titel,
            active: number(id.Status) = number(Nr),
            value: number(Nr)
            }]
2. Lista manual en el código
Adecuado para p. ej. reconstruir o controlar directamente un campo de selección simple de Ninox (sin tabla externa).
items: [{
                title: "Offen",
                active: Status = 1,
                value: number(Nr)
            }, {
                title: "In Arbeit",
                active: Status = 2,
                value: number(Nr)
            }, {
                title: "Erledigt",
                active: Status = 3,
                value: number(Nr)
            }]
🧩 Estructura por entrada
title – Visualización en el dropdown (texto o widget, p. ej. arcCustomIcon({ name: "check", iconSize: "16px" }) junto al texto de la etiqueta)
value – El valor a guardar
active – Cuándo se marca esta entrada como seleccionada
💡 icon (en la raíz del Select) y currentValue también admiten mini-widgets integrados — la misma regla que en items[].title.
🎹 Comparativa de comportamiento de teclado
<figure><table><tbody><tr><th>Taste
</th><th>Single-Select Verhalten
</th><th>Multi-Select Verhalten
</th></tr><tr><td>Tab
</td><td>✅ Auswahl wird bestätigt➡️ Fokus springt weiter
</td><td>➡️ Fokus springt weiter🚫 Keine Bestätigung
</td></tr><tr><td>Enter
</td><td>✅ Auswahl wird bestätigt🔒 Select wird geschlossen
</td><td>✅ Auswahl wird bestätigt🔓 Select bleibt geöffnet
</td></tr><tr><td>Escape
</td><td>❌ Select wird geschlossen
</td><td>❌ Select wird geschlossen
</td></tr></tbody></table></figure>## ✅ Conclusión
El widget customSelect es una solución versátil para campos de selección individualizados en Ninox — desde selecciones simples de un solo valor hasta multi-selects dinámicos con lógica auxiliar.
Úsalo cuando necesites más control sobre la representación, el comportamiento y la interacción de lo que Ninox ofrece de fábrica.
Con parámetros claros, fuentes de datos flexibles y control completo por teclado, el widget se integra sin fisuras en cualquier formulario o layout.
---
Idea de función: Nice Select (select nativo moderno)
💡 Ampliación planeada: inspiración de <a href="https://nerdy.dev/nice-select#try-it">Nice Select</a> — appearance: base-select, ::picker(), anchor positioning, animaciones spring, títulos de grupo sticky, esquinas squircle. <a href="https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1">CodePen</a>.