Custom Menu

Das Widget arcCustomMenu ist ein flexibles Menü-System, mit dem du Navigationselemente, Filter oder Umschaltoptionen direkt auf deiner Oberfläche darstellen kannst. Ideal, um zwischen Ansichten zu wechseln, Datenfelder zu setzen oder Popups auszulösen – ganz ohne komplexes UI-Bauen in Ninox.

Das Menü lässt sich optisch komplett an dein Design anpassen: Farben, Schriftgrößen, Icons, aktive Zustände und Hover-Effekte sind frei konfigurierbar. Buttons können zusätzlich Badges tragen und mit verschiedenen Aktionen belegt werden (update, popup, delete).

💡 Das Widget kann eingebettet in bestehende Layouts verwendet werden oder als eigene Komponente dargestellt werden – je nach Einsatzszenario.

🔧 Struktur des arcCustomMenu-Widgets

Das arcCustomMenu besteht aus einem zentralen Konfigurationsobjekt mit folgenden Bereichen:

1. Allgemeine Einstellungen

   Direkt auf oberster Ebene (uniqueId, embedded, hoverActions)

2. Menü-Konfiguration (menu[…])

   Steuert das Layout der Menüleiste – z. B. Positionierung, Schriftgröße und Farben für normale und aktive Zustände

3. Menüpunkte (menu[…].menuItems[…])

   Einzelne Buttons mit Titel, Icon, Aktivitätszustand und Aktionen (z. B. Feldwert ändern, Popup öffnen)

let current := this;
arcCustomMenu({
		uniqueId: "menu " + Nr,
		embedded: false,
        borderRadius: "4px",
		hoverActions: {
			backgroundColor: "#192e65",
			fontColor: "#fff",
			borderColor: "#192e65",
			iconColor: "#fff",
			animation: "0.2s"
		},
		menu: [{
				tableId: tableId(current),
				embedded: false,
				settings: {
					menuBar: {
						width: "",
						position: "",
						backgroundColor: "",
						borderColor: "",
						fontSize: "20px"
					},
					stateNormal: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					},
					stateActive: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					}
				}
			}, {
				menuItems: [{
						item: 1,
						title: "Table",
						active: Menu = text("A"),
						icon: arcCustomIcon({
								name: "table"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "K",
								value: "A"
							}]
					}, {
						item: 2,
						title: "Kanban",
						active: Menu = text("B"),
						icon: arcCustomIcon({
								name: "kanban"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "K",
								value: "B"
							}]
					}, {
						item: 3,
						title: "KPI Bar",
						active: Menu = text("C"),
						icon: arcCustomIcon({
								name: "copy"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "K",
								value: "C"
							}]
					}]
			}]
	})

Allgemeine Parameter-Einstellungen

uniqueId

Typ: text
Pflichtfeld: ja

Definiert eine eindeutige ID für die jeweilige Menü-Instanz. Diese ID wird intern zur gezielten CSS-Ansprache verwendet und ist notwendig, damit mehrere Menüs auf derselben Seite unabhängig voneinander funktionieren.

💡 Tipp: Setze die ID dynamisch, z. B. mit uniqueId: "menu-" + Nr, wenn du das Widget mehrfach aufrufst.

embedded

Typ: boolean
Default: false

Legt fest, ob das Widget in ein bestehendes Widget (z. B. Layout) eingebettet wird oder als eigenständiges Widget auf der Ninox Oberfläche integriert wird.

💡 Hinweis: Wenn du embedded: true setzt, musst du sicherstellen, dass das umgebende Element eine passende Höhe und ggf. ein eigenes Layout mitbringt. Das Widget passt sich dann vollständig diesem Rahmen an.

embedded: false,
embedded: true,

hoverActions

Typ: object
Default: kein Hover-Verhalten

Definiert das Verhalten beim Überfahren eines Menüpunktes mit der Maus.

Du kannst hier gezielt Farben und Animationen setzen, die beim Hover-Effekt angewendet werden sollen. Alle Felder sind optional – wenn du nichts angibst, bleibt das Standarddesign erhalten.

💡 Tipp: Hover-Effekte verbessern die Benutzerführung deutlich – sie geben visuelles Feedback und zeigen, dass ein Element interaktiv ist. Schon ein einzelner Wert wie backgroundColor reicht aus, um dieses Feedback spürbar zu machen.

borderRadius

Typ: text
Default: kein Radius (eckige Kanten)

Legt den Eckenradius der Menü-Buttons fest. Mit diesem Wert kannst du die Buttons abgerundet gestalten – von leicht soften Ecken bis zu pillenförmig.

Typische Werte:

• "4px" für leicht abgerundet

• "12px" für deutliche Rundung

• "50%" für kreisförmige Buttons

💡 Tipp: Ein kleiner borderRadius sorgt oft schon für ein moderneres, freundlicheres Erscheinungsbild – vor allem in Kombination mit Hover-Farben.

  borderRadius: "4px", // Pixelwerte in ""

Menü-Einstellungen (menu[…])

In diesem Block steuerst du das Layout und Design der Menüleiste – also Ausrichtung, Größe und Farben. Er ist Teil des ersten Elements im menu-Array:

		menu: [{
				tableId: tableId(current),
				settings: {
					menuBar: {
						width: "",
						position: "",
						backgroundColor: "",
						borderColor: "",
						fontSize: "20px"
					},
					stateNormal: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					},
					stateActive: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					}
				}
			}, {
				menuItems: [...]
			}]

tableId

Typ: text
Pflichtfeld: ja

Definiert die Tabelle, auf die sich Aktionen innerhalb des Menüs beziehen. Auch wenn der tableId-Wert aktuell nicht direkt verarbeitet wird, ist er Teil der erwarteten Datenstruktur und sollte immer gesetzt werden.

settings-Block

Typ: object
Pflichtfeld: ja

Enthält die visuellen Einstellungen für die Menüleiste und die Darstellung der Buttons – im normalen sowie im aktiven Zustand.

Der settings-Block besteht aus drei Unterobjekten:

• menuBar → Layout & Ausrichtung der Leiste

• stateNormal → Design nicht aktiver Buttons

• stateActive → Design aktiver Buttons

💡 Tipp: Wenn du Werte leer lässt, greifen automatisch sinnvolle Standardwerte – so kannst du das Menü auch minimal konfigurieren und es sieht trotzdem gut aus.

settings: {
					menuBar: {
						width: "", // Pixel-Werte o. Prozent-Werte in ""
						position: "", // left, center, right
						backgroundColor: "", // HEX-Wert in ""
						borderColor: "", // HEX-Wert in ""
						fontSize: "100px" // Pixel-Wert in ""
					},
                    stateNormal: {
						backgroundColor: "", // HEX-Wert in "" | definiert die Hintergrundfarbe deines Buttons im unangeklickten Modus.
						borderColor: "", // HEX-Wert in "" | definiert die Rahmengrundfarbe deines Buttons im unangeklickten Modus.
						fontColor: "" // HEX-Wert in "" | definiert die Schriftfarbe deines Buttons im unangeklickten Modus.
					},
					stateActive: {
						backgroundColor: "", // HEX-Wert in "" | definiert die Hintergrundfarbe deines Buttons im angeklickten Modus.
						borderColor: "", // HEX-Wert in "" | definiert die Rahmengrundfarbe deines Buttons im angeklickten Modus.
						fontColor: "" // HEX-Wert in "" | definiert die Schriftfarbe deines Buttons im angeklickten Modus.
					}
				}
			}

menuItems[]

Der zweite Teil des menu-Arrays enthält die eigentlichen Menüeinträge. Jeder Menüpunkt wird als Objekt in der Liste menuItems definiert. Ein Menüeintrag besteht in der Regel aus einem Titel, einem Icon, einem aktiven Zustand und einer oder mehreren auszuführenden Aktionen.

menuItems: [{
						item: 1,
						field: "menuText",
						title: "Übersicht",
						activeState: if menuText = text("U") then "active" else "" end,
						iconName: "info",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "B",
								value: "U"
							}]
					}

item

Dieser Wert ist eine laufende Nummer, die intern zur Sortierung oder Identifikation der Menüeinträge verwendet wird.

Typ: number
Pflichtfeld: ja

item: 1, // Zahlenwert. Beschrifte hier deine Menüpunkte einfach nach Anzahl. 

title

Hier legst du den Text fest, der im Button angezeigt wird. Der Titel ist für die Nutzer sichtbar und sollte die Funktion des Buttons klar benennen.

Typ: text
Pflichtfeld: ja

title: "Übersicht",

activeState definiert, wann dein Menüpunkt aktiv sein soll. In diesem Beispiel: Wenn der Text "A" in dem Textfeld menuText steht, dann soll der Button aktiv sein.

activeState: if menuText = text("A") then "active" else "" end,

icon

Mit dem icon-Feld kannst du ein Icon zu deinem Button hinzufügen. Die Icons werden typischerweise über arcCustomIcon({ name: "..." }) definiert. Wenn kein Icon angegeben wird, besteht der Button nur aus Text.

Typ: function
Pflichtfeld: nein

icon: "", // Kein Icon wird angezeigt
icon: arcCustomIcon({
		name: "kanban" }), // Benutze das Widget arcCiustomIcon()

active

Das Feld active bestimmt, ob ein Menüpunkt gerade als aktiv markiert ist. Meist handelt es sich dabei um einen Ausdruck, der den aktuellen Zustand vergleicht – z. B. Menu = "A" oder Menu=1. Aktive Menüpunkte werden visuell hervorgehoben (z. B. mit einer anderen Hintergrundfarbe) und helfen den Nutzern zu erkennen, welcher Bereich gerade ausgewählt ist.

Typ: boolean oder Ausdruck
Pflichtfeld: ja

active: Menu = "B",

actions

In actions legst du fest, was beim Klick auf den Button passieren soll. Du kannst hier eine oder mehrere Aktionen definieren. Jeder Aktionseintrag ist ein Objekt mit einem type und ggf. zusätzlichen Parametern wie recordId, field oder value.

Typ: array
Pflichtfeld: ja

💡 Hinweis: Jede Aktion wird in der Reihenfolge ausgeführt, in der sie im Array steht. Du kannst mehrere Aktionen kombinieren – z. B. zuerst einen Feldwert setzen und danach ein Popup öffnen.

Mögliche Aktionen

Aktion: update

actions: [{
				recordId: Nr,
				type: "update", // update aktualisiert/manipuliert ein Feld. 
				field: "B", // Feld Id des zu manipulierenden Feldes.
				value: "A" // Wert, der in das Feld geschrieben werden soll. In dem Beispiel: wird "A" in ein Textfeld geschrieben.
			}]

Aktion: popup

actions: [{
                recordId: Nr,
                type: "popup", // popup öffnet den Record
            }]

Aktion: delete

actions: [{
                recordId: Nr,
                type: "delete", // delete löscht den Record
            }]

Fazit ✅

Mit arcCustomMenu kannst du flexible Menüleisten in deiner Ninox-Oberfläche erstellen – ideal zum Umschalten von Ansichten, Setzen von Feldwerten oder Öffnen von Popups.

Das Widget lässt sich vollständig an dein Design anpassen: von Farben und Schriften bis hin zu Hover- und Aktiv-Zuständen.

Let’s build smarter interfaces – with arcWidgets.

Fragen oder Feedback? → office@arc-rider.com