Mini Widgets

Select (Dropdown)

1.7.0

Widget bestellen

Select (Dropdown)

Das Widget arcCustomSelect ist dein Tool für moderne, stilvolle Dropdowns in Ninox. Es ersetzt das klassische Auswahlfeld durch ein vollständig anpassbares Interface – mit Icons, Hovereffekten, Tastatursteuerung und dynamischen Einträgen.

Du verwendest arcCustomSelect überall dort, wo du deinen Nutzern eine Auswahlmöglichkeit anbieten möchtest – sei es zur Statusvergabe, zum Filtern, oder zur Bearbeitung von Datenfeldern. Das Widget eignet sich ideal für:

Auswahl von Statuswerten (z. B. „Offen“, „In Bearbeitung“, „Abgeschlossen“)
Schnelles Tagging oder Labeling von Datensätzen
Kompakte Navigation innerhalb von Masken
Filterung in Kombination mit anderen Widgets

📢 Der große Vorteil: Du kannst das Design flexibel anpassen (z. B. Breite, Farben, Schriftgröße), dynamische Item-Listen aus Tabellen befüllen und sogar das Verhalten bei Fokus oder Klick feinsteuern.

Gesamter Anwendungscode

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
		}
	currentValue: text(Status),
	items: let id := Nr;
		(select Status).[{
			title: Titel,
			active: number(id.Status) = number(Nr),
			value: number(Nr)
			}]
})

Einzelne Parameter

uniqueId

Pflichtfeld: ✅

Mit uniqueId wird jede Select-Instanz eindeutig identifizierbar – besonders wichtig, wenn mehrere Custom Selects gleichzeitig auf der Seite verwendet werden.

Die ID sorgt intern dafür, dass:

Fokus, Auswahl und Tastaturverhalten korrekt zugeordnet werden,
keine Überschneidungen zwischen Instanzen auftreten,
der Zustand jeder Select-Box stabil bleibt, auch bei schnellem Wechsel oder dynamischem Nachladen.

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

recordId

Pflichtfeld: ✅

Der Parameter recordId verknüpft die Select-Komponente mit einem konkreten Datensatz in Ninox – und zwar genau dem, in dem sich das Feld befindet, das du mit dem Select-Widget bespielen möchtest.

recordId: Nr, // Ninox-Tabellen Id

field

Pflichtfeld: ✅

Der Parameter field gibt an, welches Feld im angegebenen Datensatz (recordId) vom Select-Widget gelesen und beschrieben werden soll.

Dabei handelt es sich nicht um den sichtbaren Feldnamen, sondern um die interne fieldId des Feldes in Ninox.

🔍 So findest du die fieldId

Die fieldId ist eine systeminterne Bezeichnung, z. B. "K4".

Du kannst sie auf zwei Arten ermitteln:

Mit der Ninox-Funktion: fieldId()
Oder mit dem kostenlosen Mini-Widget: fieldFinder

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

embedded

Gibt an, ob das Select-Widget innerhalb eines anderen Widgets eingebettet ist – z. B. innerhalb einer Custom Table-Spalte oder eines Layout-Containers – oder ob es frei in einem Ninox-Formular als eigenständiges Widget eingebunden wird (z. B. direkt in einem Formelfeld).

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

Der Parameter width steuert die Darstellungsbreite des Select-Widgets. Du kannst entweder eine feste Breite in Pixeln angeben, z. B. "240px", oder eine relative Breite wie "100%", damit sich das Widget flexibel an das umgebende Layout anpasst.

Anwendung

In frei platzierten Formelfeldern kannst du mit width gezielt das Layout beeinflussen.
Wird das Widget eingebettet verwendet (z. B. in einer CustomTable-Spalte), kannst du die Breite automatisch an das Eltern-Element anpassen, wenn du die width: 100% einstellst.

💡 Empfehlung: Vermeide sehr kleine Breiten – lange Platzhalter oder Auswahlwerte könnten sonst abgeschnitten dargestellt werden.

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

height

Mit dem Parameter height kannst du die sichtbare Höhe der Select-Komponente steuern. Das ist besonders nützlich, wenn du ein einheitliches Layout brauchst oder die Darstellung in Tabellen und verschachtelten Layouts kontrollieren möchtest.

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

alignX

Mit alignX bestimmst du die horizontale Ausrichtung des sichtbaren Inhalts im Select-Feld – also zum Beispiel, ob der ausgewählte Wert linksbündig, zentriert oder rechtsbündig dargestellt wird.

Anwendung

"left" ist der Standardwert und eignet sich in den meisten Fällen.
"center" kann in sehr schmalen Feldern oder bei rein ikonischen Inhalten sinnvoll sein.
"right" wird selten verwendet, kann aber bei Zahlen oder bestimmten Layoutvorgaben hilfreich sein.

💡 Empfehlung: Verwende center oder right nur, wenn das restliche Layout es verlangt – bei längeren Texten ist left in der Regel besser lesbar.

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

itemsWidth

Mit itemsWidth legst du die Breite der Dropdown-Liste fest – also des Bereichs, in dem die Auswahloptionen angezeigt werden. Wenn du diesen Wert nicht setzt, richtet sich die Breite der Liste automatisch nach der Breite des Select-Feldes.

Anwendung: Du kannst die Dropdown-Liste bewusst breiter oder schmaler machen als das Select-Feld selbst. Das ist besonders hilfreich, wenn die Optionsinhalte länger sind als die Breite des eigentlichen Felds zulässt.

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

itemsHeight

Der Parameter itemsHeight legt die Höhe einzelner Einträge in der Dropdown-Liste fest. Damit kannst du steuern, wie viel Platz jeder Auswahlpunkt einnimmt – unabhängig von der Schriftgröße.

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

fontColor

Mit fontColor kannst du die Schriftfarbe der Auswahlanzeige im Select-Feld festlegen. Das betrifft sowohl Platzhaltertext als auch den aktuell ausgewählten Wert.

💡 Empfehlung: Verwende möglichst hohe Kontraste zum Hintergrund – insbesondere bei eingebetteten Varianten in farbigen Layouts. Bei dunklem Hintergrund solltest du eine helle Schriftfarbe wählen, z. B. "#ffffff".

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

fontWeight

Der Parameter fontWeight bestimmt die Schriftstärke des Textes im Select-Feld (values & placeholder). Damit kannst du gezielt steuern, ob der Text eher dezent oder betont dargestellt werden soll.

Anwendung: Du kannst zwischen vordefinierten Werten wie "normal" oder "bold" wählen oder numerische Gewichtungen wie 400 (normal) oder 600 (halbfett) verwenden. Das ist besonders nützlich, wenn du verschiedene Schriftstärken im Layout systematisch verwendest.

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

backgroundColor

Der Parameter backgroundColor legt die Hintergrundfarbe des sichtbaren Select-Feldes fest – also die Fläche, in der der Platzhalter oder der ausgewählte Wert angezeigt wird.

Anwendung: Du kannst damit das Widget visuell an deine Oberfläche anpassen, z. B. in dunklen Layouts oder bei farblich abgestimmten Eingabefeldern. Unterstützt werden Farbwerte im HEX-Format, RGB oder Klartextnamen wie "white" oder "transparent".

💡 Empfehlung: Achte auf ausreichenden Kontrast zur Schriftfarbe (fontColor), damit der Text gut lesbar bleibt. In dunklen Layouts kann "transparent" sinnvoll sein, wenn das Hintergrunddesign durchscheinen soll.

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

borderColor

Mit dem Parameter borderColor legst du die Farbe des Rahmens rund um das Select-Feld fest. Dadurch kannst du das Widget gezielt an dein Farbschema oder Layout anpassen.

💡 Empfehlung: Verwende kontrastreiche Rahmenfarben nur gezielt – z. B. um Felder hervorzuheben oder Gruppen optisch zu trennen. Dezente Grautöne wie "#dddddd" oder "#999999" wirken meist angenehm zurückhaltend.

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

borderWidth

Mit borderWidth bestimmst du die Dicke des Rahmens rund um das Select-Feld. Dadurch kannst du die visuelle Präsenz des Widgets im Layout erhöhen oder bewusst reduzieren.

Anwendung: Setze dünne Rahmen ("1px") für eine dezente Integration oder dickere ("2px" bis "3px") für optische Hervorhebung. "0px" entfernt den Rahmen komplett, besonders nützlich bei eingebetteten Designs mit klaren Flächen.

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

borderRadius

Der Parameter borderRadius steuert die Abrundung der Ecken des Select-Feldes. Damit kannst du das Erscheinungsbild der Komponente zwischen eckig, leicht abgerundet oder komplett rund gestalten.

🧩 Typische Werte

"0px" → komplett eckig
"4px" → leicht abgerundet (Standard)
"6px" → modern und weich
"50%" → rund (nur sinnvoll bei quadratischer Breite/Höhe)

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

itemsSettings Block

Mit itemsSettings kannst du das Erscheinungsbild des gesamten Dropdown-Menüs steuern – nicht einzelner Listeneinträge, sondern des gesamten Bereichs, in dem alle Optionen angezeigt werden.

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: "30px", // Wert in px oder aber auch z.B. "auto" (passt sich Inhalt an)
  borderRadius: "" // default:  3px

labelSettings Block

Mit labelSettings steuerst du die Darstellung eines optionalen Labels über dem Select-Feld – also einen kurzen Titel oder Hinweistext wie z. B. „Status“ oder „Kategorie“. Dieser Text erscheint oberhalb des Widgets.

title – Der Text, der als Label angezeigt wird (z. B. "Kategorie")
fontSize – Schriftgröße des Labels (z. B. "11px")
alignX – Horizontale Ausrichtung des Labels ("left", "center", "right")
height – Höhe des Label-Containers (z. B. "15px")

labelSettings: {
		title: "", 
		fontSize: "",
		alignX: "",
		height: ""
	}

Einzelerklärungen:
  
  title: "Status", // Wort, in "" welches als Label ausgegeben werden soll
  title: "", // kein Label wird angezeigt

  fontSize: "30px", // z.B. Pixel Werte
  fontSize: "", // default: 11px

  alignX: "right", // Label ist rechtsbündig
  alignX: "left", // Label ist linksbündig
  alignX: "", // default: left

  height: "40px", // z.B. Pixel Werte
  height: "", // default: 15px

💡 Hinweise

Wird title nicht gesetzt oder leer gelassen, erscheint kein Label.
Die Ausrichtung (alignX) betrifft nur das Label, nicht das Select-Feld selbst.
fontSize und height helfen bei der exakten Abstimmung mit anderen Feldern im Layout.

clickPosition

Der Parameter clickPosition legt fest, welcher Teil des Select-Feldes klickbar ist, um das Dropdown-Menü zu öffnen.

🧩 Mögliche Einstellungen

"icon" – Nur das kleine Pfeilsymbol ganz rechts ist klickbar.
"field" – Das gesamte Feld (inklusive Textfläche und Icon) ist klickbar. (Standard)

clickPosition: "icon", // nur auf icon klickbar (select klappt sich aus)
clickPosition: "", // default: klick auf gesamtem select möglich

placeholder

Der Parameter placeholder definiert den Anzeigetext im Select-Feld, solange noch kein Wert ausgewählt wurde. Er dient als Hinweis für den Nutzer, was im Feld erwartet wird oder welche Auswahl getroffen werden kann.

🧩 Typische Anwendungsbeispiele

"Bitte auswählen"
"Status wählen"
"–"

placeholder: "select", // eigener Platzhalter
placeholder: "", // default: "Auswählen"

Wird ein placeholder gesetzt, erscheint er grau und leicht transparent, bis eine echte Auswahl getroffen wurde.

💡 Hinweise

Der Text wird nicht gespeichert, sondern dient nur zur Anzeige.
Ist bereits ein currentValue übergeben, wird der placeholder nicht angezeigt.
Halte den Text kurz – z. B. "select" oder "choose" – besonders in schmalen Feldern.

disabled

Der Parameter disabled legt fest, ob das Select-Feld deaktiviert ist – also nicht klickbar und nicht bearbeitbar.

🧩 Verhalten im deaktivierten Zustand

Das Dropdown lässt sich nicht öffnen.
Der Mauszeiger zeigt Icon "prohibit" (Kreis mit diagonalem Strich)
Der aktuelle Wert bleibt sichtbar, kann aber nicht verändert werden.
Optisch wird das Feld leicht abgeblendet dargestellt.

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

Der Parameter multiselect aktiviert den Mehrfachauswahl-Modus im Select-Feld. Damit können mehrere Werte gleichzeitig ausgewählt und in das Feld geschrieben werden – statt nur ein einzelner.

🧩 Verhalten bei aktivem multiselect: true

Jeder Klick auf einen Eintrag fügt den Wert zur Liste hinzu (anstatt ihn zu ersetzen).
Bereits ausgewählte Werte bleiben erhalten.
Einträge können visuell als „aktiv“ markiert sein.
Die Auswahl bleibt auch nach einem Klick geöffnet, damit mehrere Werte direkt nacheinander gewählt werden können.
Die Tastatursteuerung unterscheidet sich leicht:
- Enter bestätigt eine Auswahl, das Menü bleibt offen.
- Tab wechselt direkt zum nächsten Feld, ohne automatisch zu bestätigen.

multiselect: true // wenn du das Select als Multi-Select nutzen möchtest
multiselect: "" // default: false

⚠️ Wichtig bei der Umsetzung in Ninox

In Ninox kann ein multiselect nicht direkt in ein Mehrfachauswahlfeld oder Mehrfach-Referenzfeld schreiben. Du musst stattdessen ein Hilfsfeld vom Typ Text verwenden:

Übergib dieses Hilfsfeld im Parameter field (bzw. fieldId) an das Select-Widget.
Dort wird der Text aller ausgewählten Werte (z. B. IDs oder Namen) gesammelt – meist als kommaseparierte Liste.
Nutze anschließend einen „Trigger nach Änderung“ auf das Hilfsfeld, um die tatsächliche Mehrfachauswahl zu befüllen.

Trigger-Code:

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

In dem Parameter emptyValue bestimmst du, was der Text des zurücksetzen Buttons (erstes Auswahlfeld im geöffneten dropdown/items) sein soll.(seit v1.1.0) (wird überschrieben, wenn im reset Block bei title etwas eingetragen ist)

!! Vorerst bleibt der bisherige Einstellungs-Parameter emptyValue: "zurücksetzen"noch aktiv, nutzt aber bitte in Zukunft für diese Einstellungen den Parameter title: "zurücksetzen" im reset Block.

emptyValue: "empty", // eigener Text
emptyValue: "", // default: "(leer)")

reset Block

Der reset-Block steuert, ob und wie im Dropdown-Menü eine „Zurücksetzen“-Option angezeigt wird, mit der der aktuelle Wert gelöscht oder auf einen definierten Wert zurückgesetzt werden kann.

title – Der angezeigte Text für den Zurücksetzen-Eintrag (z. B. "(leer)", "Zurücksetzen").
value – Der Wert, der gesetzt wird, wenn der Eintrag angeklickt wird. Wenn nicht gesetzt, wird automatisch emptyValue verwendet.
hide – Wenn true, wird der Reset-Eintrag nicht angezeigt, kann aber trotzdem intern genutzt werden.

reset: {
			title: "reset",
			value: 0,
			hide: true
		},

Einzelerklärungen:

  title: "reset", // eigener Text
  title: "", // default: Wert in Parameter emptyValue (falls emptyValue: "" dann ist hier default: "(leer)")
  
  value: 0, // eigener Wert (0 = setzt den Wert auf 0 statt null zurück)
  value: "", // default: null (Ninox-Feld wird null gesetzt)

  hide: true, // select kann nicht zurückgesetzt werden
  hide: "", // default: false (zurücksetzen Button wird angezeigt)

focusAction Settingsblock

Du kannst nun mit dem Parameter autoFocus in dem neuen Settingsblock focusAction im Select bestimmen, ob der cursor automatisch in das Suchfeld springt oder nicht. Besonders für Tablets, wo die Tastatur sofort aufspringt und den User irritieren könnte ist das abschalten hilfreich.

focusAction: {
    autoFocus: false // true or false // default: true
}

currentValue

Der Parameter currentValue legt fest, welcher Wert im Select-Feld bei ausgewählten items sein soll. Er bestimmt also die Anzeige des Feldes im geschlossenen Zustand.

🧩 Verhalten je nach Modus

Single-Select (multiselect: false)
Der Wert wird direkt als einzelner Text oder Zahl übergeben (z. B. "Offen" oder 1).
Multi-Select (multiselect: true)
Der Wert ist ein Array von Strings oder Zahlen, z. B. [Bluse, Kleidung, Oberteil] oder [1, 2].
Jeder enthaltene Wert wird in der Liste als „aktiv“ markiert.

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

items Block

Pflichtfeld: ✅

Der items-Block definiert die Auswahlmöglichkeiten, die im Dropdown angezeigt werden. Jede Option wird als Objekt mit bestimmten Eigenschaften angegeben – z. B. sichtbarer Text, interner Wert und aktiver Zustand.

🔄 Zwei Aufbauvarianten: Du kannst das customSelect auf zwei verschiedene Arten mit Werten befüllen:

1. Dynamisch aus einer Ninox-Tabelle

Ideal für Listen, die sich ändern können oder mit anderen Feldern verknüpft sind.

items: let id := Nr;
		(select Status_Projekte).[{
			title: Titel,
			active: number(id.Status) = number(Nr),
			value: number(Nr)
			}]

2. Manuelle Liste im Code

Geeignet, um z. B. ein einfaches Auswahlfeld aus Ninox direkt nachzubauen, bzw. anzusteuern. (ohne externe Tabelle).

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)
			}]

🧩 Struktur pro Eintrag

title – Der sichtbare Text im Menü
value – Der zu speichernde Wert
active – Wann wird dieser Eintrag als ausgewählt markiert

🎹 Tastaturverhalten im Vergleich

Taste	Single-Select Verhalten	Multi-Select Verhalten
Tab	✅ Auswahl wird bestätigt➡️ Fokus springt weiter	➡️ Fokus springt weiter🚫 Keine Bestätigung
Enter	✅ Auswahl wird bestätigt🔒 Select wird geschlossen	✅ Auswahl wird bestätigt🔓 Select bleibt geöffnet
Escape	❌ Select wird geschlossen	❌ Select wird geschlossen

✅ Fazit

Das customSelect-Widget ist eine vielseitige Lösung für individuelle Auswahlfelder in Ninox – von einfachen Einzelauswahlen bis zu dynamischen Multi-Selects mit Hilfslogik.

Nutze es, wenn du mehr Kontrolle über Darstellung, Verhalten und Interaktion brauchst als Ninox von Haus aus bietet.

Mit klaren Parametern, flexiblen Datenquellen und voller Tastatursteuerung lässt sich das Widget nahtlos in jedes Formular oder Layout integrieren.