Cyber Switch Komponente

Mit arcCustomComponentCyberSwitch erstellst du ganz einfach einen modernen Umschalter zwischen zwei (oder mehr) Zuständen – perfekt für Filter, Views oder einfache Statuswechsel in deiner App. Die Komponente basiert auf arcCustomLayout und kombiniert UI-Design und Interaktion in einem vorgefertigten, reaktiven Block.

Der Cyber Switch kommt ohne komplizierte Setup-Schritte aus: Du definierst lediglich die Items, die aktiven und inaktiven Styles – und schon ist dein Schalter einsatzbereit. Dabei kannst du das Design vollständig an dein Farbschema anpassen.

💡 Besonders hilfreich:

• Ideal für visuelle Filter wie "Aktiv / Inaktiv", "Heute / Morgen", "Liste / Karte" etc.

• Nutzt clickAction, um z. B. Felder direkt zu aktualisieren.

• Jeder Button passt sich automatisch an das übergeordnete Layout an.

Im folgenden Abschnitt findest du den Anwendungscode sowie ein Beispiel zur Anwendung in Ninox.

Gesamter Anwendungscode

Im folgenden leeren Anwendungscode findest du ein Beispiel mit zwei Items, die manuell definiert werden – inklusive individueller clickAction für jeden Schalter.

arcCustomComponentCyberSwitch({
		basicSettings: {
			backgroundColor: ""
		},
		inactiveSettings: {
			color: "",
			backgroundColor: ""
		},
		activeSettings: {
			color: "",
			backgroundColor: ""
		},
		items: [{
		title: "",
		active: "",
		clickAction: {
    		recordId: Nr,
    		type: "",
    		field: fieldId(current, ""),
    		value: ""
    		}
    	}, {
		title: "",
		active: "",
		clickAction: {
    		recordId: Nr,
    		type: "",
    		field: fieldId(current, ""),
    		value: ""
            }
    	}]
	})

Einzelne Parameter

basicSettings Block

Der basicSettings-Block definiert die grundlegenden Design-Eigenschaften der gesamten Schalter-Komponente. Aktuell gibt es nur einen konfigurierbaren Parameter:

basicSettings: {
			backgroundColor: "#F8FAFC"
		},

💡 Tipp: Nutze helle, neutrale Farben wie #f8fafc oder #e5e7eb, um den aktiven Zustand visuell stärker hervorzuheben.

inactiveSettings Block

Mit inactiveSettings legst du das Design für die nicht aktive(n) Option(en) fest – also für alle Items, die nicht den aktuellen Status darstellen.

inactiveSettings: {
			color: "#727c90",
			backgroundColor: "#F8FAFC"
		},

💡 Tipp: Wähle hier dezente Farben, damit der aktive Zustand deutlich hervorsticht. Beliebt ist z. B. eine Kombination aus hellgrauem Hintergrund mit leicht abgedunkelter Schriftfarbe.

activeSettings Block

Mit activeSettings gestaltest du das Design für den aktiven Button – also für das Item, das aktuell ausgewählt ist. Dadurch wird klar ersichtlich, welcher Zustand gerade aktiv ist.

activeSettings: {
			color: "#fff",
			backgroundColor: "#3b82f6"
		},

items Block

Im items-Block definierst du die einzelnen Schaltflächen (Switches), die innerhalb der CyberSwitch-Komponente angezeigt werden. Jeder Eintrag repräsentiert dabei einen Button mit eigenem Titel, Aktiv-Status und einer zugehörigen Aktion.

title: "Menupunkt 1",

active: helper_Menu = "1",

clickAction: [{
			recordId: Nr, 
			type: "update",
			field: fieldId(current, "helper_Menu"),
			value: 1 
			}]

💡 Hinweise zur Verwendung:

• Du kannst beliebig viele Items definieren – mindestens zwei sind sinnvoll.

• Die Items werden automatisch gleichmäßig in der Breite verteilt (width: "fraction").

• Es kann immer nur ein Item gleichzeitig als „aktiv“ dargestellt werden. Daher sollte dein Ausdruck bei active sicherstellen, dass er nur für eines zutrifft.

• Der clickAction nutzt den gewohnten Aktionsstandard (z. B. type: "update"), wie du ihn aus anderen Komponenten kennst.

Möglichkeiten, den items-Block aufzubauen

Der items-Block kann auf zwei verschiedene Arten aufgebaut werden – je nach Anwendungsfall:

1. Dynamischer Aufbau über Hilfstabelle (empfohlen bei vielen Einträgen)

Wenn du eine Tabelle (z. B. Menu) mit deinen möglichen Schaltereinträgen hast, kannst du diese dynamisch abrufen und in Buttons umwandeln.

items: (select Menu).[{
				title: Title,
				active: number(current.helper_Menu) = number(Nr),
				clickAction: {
					recordId: current.Nr,
					type: "update",
					field: fieldId(current, "helper_Menu"),
					value: number(Nr)
				}
			}]

 2. Manueller Aufbau mit statischer Definition

Alternativ kannst du die Buttons auch einzeln manuell definieren. Das bietet dir maximale Kontrolle über Reihenfolge, Texte und Aktionen – z. B. bei einfachen Umschaltern wie "Liste / Karte" oder "Heute / Morgen".

items: [{
		title: "Allgemein",
		active: helper_Menu = "1",
		clickAction: {
    		recordId: Nr,
    		type: "update",
    		field: fieldId(current, "helper_Menu"),
    		value: 1
    		}
    	}, {
		title: "Kontaktdaten",
		active: helper_Menu = "2",
		clickAction: {
    		recordId: Nr,
    		type: "update",
    		field: fieldId(current, "helper_Menu"),
    		value: 2
            }
    	}, {
		title: "Aufträge",
		active: helper_Menu = "3",
		clickAction: {
    		recordId: Nr,
    		type: "update",
    		field: fieldId(current, "helper_Menu"),
    		value: 3
    		}
    	}]

Benötigte Widgets

Der CyberSwitch ist eine kostenlose Component, die du direkt verwenden kannst – vorausgesetzt, du hast die folgenden Widgets in deinem Team lizenziert:

🧩 Fazit

Mit dem arcCustomComponentCyberSwitch kannst du in wenigen Minuten ein modernes, visuell ansprechendes Umschaltelement in deine Ninox-Oberfläche integrieren – ideal für Filter, View-Switches oder interaktive Dashboards.

Dank der Kombination mit arcCustomLayout ist das Design flexibel anpassbar und lässt sich nahtlos in bestehende Strukturen einfügen. Ob dynamisch über Hilfstabellen oder manuell mit gezielter Steuerung: Du behältst die volle Kontrolle.