Developer Kit · Components

Cyber Switch

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:

<figure><table><tbody><tr><th>Parameter

</th><th>Beschreibung

</th><th>Default-Wert

</th></tr><tr><td>backgroundColor

</td><td>Hintergrund der gesamten Komponente

</td><td>#F8FAFC

</td></tr></tbody></table></figure> <pre><code class="language-javascript">basicSettings: { backgroundColor: "#F8FAFC" }, </code></pre>

💡 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.

<figure><table><tbody><tr><th>Parameter

</th><th>Beschreibung

</th><th>Default-Wert

</th></tr><tr><td>color

</td><td>Textfarbe für inaktive Buttons

</td><td>#727c90

</td></tr><tr><td>backgroundColor

</td><td>Hintergrundfarbe für inaktive Buttons

</td><td>#F8FAFC

</td></tr></tbody></table></figure> <pre><code class="language-javascript">inactiveSettings: { color: "#727c90", backgroundColor: "#F8FAFC" },</code></pre>

💡 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.

<figure><table><tbody><tr><th>Parameter

</th><th>Beschreibung

</th><th>Default-Wert

</th></tr><tr><td>color

</td><td>Textfarbe für aktiven Button

</td><td>#ffffff

</td></tr><tr><td>backgroundColor

</td><td>Hintergrundfarbe für aktiven Button

</td><td>#3b82f6

</td></tr></tbody></table></figure> <pre><code class="language-javascript">activeSettings: { color: "#fff", backgroundColor: "#3b82f6" },</code></pre>

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.

<figure><table><tbody><tr><th>Parameter

</th><th>Beschreibung

</th><th>Beispiel

</th></tr><tr><td>title

</td><td>Text, der im Button angezeigt wird.

</td><td> <pre><code class="language-javascript">title: "Menupunkt 1",</code></pre>

</td></tr><tr><td>active

</td><td>Bedingung, wann der Button als aktiv dargestellt wird.

</td><td>

</td></tr><tr><td>clickAction

</td><td>Aktion, die beim Klick auf den Button ausgeführt wird (z. B. Feld aktualisieren).

</td><td>

</td></tr></tbody></table></figure>💡 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:

<figure><table><tbody><tr><th>Widget

</th><th>Beschreibung

</th></tr><tr><td>arcCustomLayout

</td><td>Grundstruktur zur Darstellung der Buttons

</td></tr><tr><td>arcCustomText (optional & kostenfrei)

</td><td>Nur nötig, wenn du Texte innerhalb der Switch-Items selbst gestalten willst

</td></tr></tbody></table></figure>## 🧩 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.

Cyber Switch

Cyber Switch

Cyber Switch Komponente

Gesamter Anwendungscode

Einzelne Parameter

basicSettings Block

inactiveSettings Block

activeSettings Block

items Block

Möglichkeiten, den items-Block aufzubauen

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

2. Manueller Aufbau mit statischer Definition

Benötigte Widgets

Möglichkeiten, den `items`-Block aufzubauen