---
title: "Cyber Switch"
slug: "component-cyberswitch"
category: "Components"
hosts: "ninox"
---

# Cyber Switch

# Cyber Switch Komponente

![](https://framerusercontent.com/images/PaM0ADwAFOsyz6ngHL15g2UCrL0.png)

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.


```javascript
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>
```javascript
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.

<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>
```javascript
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.

<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>
```javascript
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.

<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>
```javascript
title: "Menupunkt 1",
```

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


```javascript
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".


```javascript
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.