---
title: "Switch Card"
slug: "component-switchcard"
category: "Components"
hosts: "ninox"
---

# Switch Card

# Component: SwitchCard

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

Die `arcComponentSwitchCard` ist eine vielseitige UI-Komponente, die dynamisch zwischen verschiedenen Inhalten umschalten kann – etwa zwischen Lagerbeständen, Kapazitäten oder anderen Visualisierungen. Sie kombiniert eine visuell ansprechende **Karte** mit einem eingebetteten **CyberSwitch**, der zwischen den definierten Ansichten wechselt.

Typischerweise besteht sie aus:

- einem **Titel** und **Untertitel** zur Einordnung des Inhalts,
- einem **interaktiven Umschalter** (`arcCustomComponentCyberSwitch`) mit beliebig vielen Einträgen,
- und einem **dynamischen Content-Bereich**, der je nach Auswahl angepasst wird.

💡 Besonders geeignet für Dashboards oder Übersichtsseiten, bei denen Nutzer:innen zwischen mehreren Kennzahlen oder Darstellungen wechseln sollen – ohne dabei die Ansicht verlassen zu müssen.

## Anwendungscode

Im folgenden Beispiel siehst du den Grundaufbau der `SwitchCard` mit zwei Umschaltoptionen – jede davon enthält eigene Logik (`active`) und Content zur Darstellung im unteren Bereich der Karte.


```javascript
arcComponentSwitchCard({
		uniqueId: "",
		title: "",
		subtitle: "",
		switchItems: [{
				id: 1,
				title: "",
				recordId: "",
				fieldId: "",
				value: "",
				active:",
				content: ""
			}, {
				id: 2,
				title: "",
				recordId: "",
				fieldId: "",
				value: "",
				active:",
				content: ""
			},]
	})
```

## Anleitungsvideo - so baust du die switchCard einfach auf

In diesem Tutorial zeigt dir Lisa, wie du die kostenlose SwitchCard-Component in Ninox einrichten kannst.

<iframe src="https://www.youtube.com/embed/sJiWCKzSuH8?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>###  

### Hauptparameter

Diese Parameter werden direkt im Aufruf der `arcComponentSwitchCard` übergeben:

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

</th><th>Typ

</th><th>Beschreibung

</th><th>Beispiel

</th></tr><tr><td>`uniqueId`

</td><td>Text

</td><td>Eindeutige ID für die Komponente (für Styling und Wiederverwendung wichtig)

</td><td>
```javascript
uniqueId: "card element Lagerkapazitäten" + Nr,
```

</td></tr><tr><td>`title`

</td><td>Text

</td><td>Überschrift der Karte

</td><td>
```javascript
title: "Lagebestände",
```

</td></tr><tr><td>`subtitle`

</td><td>Text

</td><td>Untertitel oder Zusatzinfo unter dem Titel

</td><td>
```javascript
subtitle: "Lagebestände aller Lager",
```

</td></tr><tr><td>`switchItems`

</td><td>Liste

</td><td>Liste mit den Umschaltoptionen (siehe unten für Details)

</td><td>
```javascript
switchItems: [ {…}, {…} ]
```

</td></tr></tbody></table></figure>💡 **Hinweis: **Die `title`- und `subtitle`-Werte werden optional angezeigt – wenn sie leer sind, wird der Platz automatisch freigegeben. Der `uniqueId` sollte immer vergeben werden, um Konflikte mit anderen Komponenten zu vermeiden.

### Eintrag in `switchItems`

Jedes Element in `switchItems` repräsentiert eine **Umschaltoption** (z. B. "Bestände", "Kapazitäten", "Verteilung") mit eigenem Titel, Aktivierungslogik, Aktionslogik und angezeigtem Inhalt.

 

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

</th><th>Typ

</th><th>Beschreibung

</th><th>Beispiel

</th></tr><tr><td>`id`

</td><td>Zahl o. Text

</td><td>Eindeutige ID für das Item (kann z. B. für dynamisches Mapping genutzt werden)

</td><td>
```javascript
id: 1,
```

</td></tr><tr><td>`title`

</td><td>Text

</td><td>Titel des Buttons im Switch (z. B. "Bestände")

</td><td>
```javascript
title: "Bestände",
```

</td></tr><tr><td>`recordId`

</td><td>ID/Ref

</td><td>ID des aktuellen Datensatzes, auf den sich die Aktion bezieht

</td><td>
```javascript
recordId: Nr,
```

</td></tr><tr><td>`fieldId`

</td><td>Funktion o. Text (ID)

</td><td>Referenz auf das Feld, das aktualisiert werden soll

</td><td>
```javascript
fieldId: fieldId(Nr, "filter_lagerkapazitaet"),
```

</td></tr><tr><td>`value`

</td><td>beliebig

</td><td>Wert, der gesetzt werden soll, wenn der Button geklickt wird

</td><td>
```javascript
value: 2,
```

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

</td><td>bool./Expr.

</td><td>Ausdruck, wann das Item aktiv ist

</td><td>
```javascript
active: filter_lagerkapazitaet = "2",
```

</td></tr><tr><td>`content`

</td><td>Text

</td><td>Der eigentliche Inhalt, der angezeigt wird, wenn dieses Item aktiv ist

</td><td>
```javascript
content: 'arcProgressBarComponent _lager'
```

</td></tr></tbody></table></figure>**💡 Hinweis:**

- `content` kann reiner Ninox-Text, ein Funktionsaufruf oder auch ein zusammengesetztes Widget sein.
- Es wird immer der erste Eintrag mit `active: true` angezeigt.
- Falls du nur ein Item hast, wird der Switch automatisch ausgeblendet.

###  Typische Inhalte für `content`

Der `content`-Wert kann unterschiedlich aufgebaut sein – je nachdem, welches Widget oder Element du in der Karte anzeigen möchtest. Hier einige typische Beispiele:

<figure><table><tbody><tr><th>Inhaltstyp

</th><th>Beschreibung

</th><th>Beispiel

</th></tr><tr><td>Widget-Referenz

</td><td>Aufruf eines anderen Widgets (z. B. eine Fortschrittsanzeige, ein Donut-Chart, ein eigenes Layout, etc.)

</td><td>
```javascript
content: helper_donuts_lager
```

</td></tr><tr><td>Textausgabe

</td><td>Einfacher Text (z. B. als Platzhalter oder zur schnellen Anzeige)

</td><td></td></tr></tbody></table></figure>## Benötigte Widgets

Die `SwitchCard` 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>`arcCustomCard`

</td><td>Grundstruktur der Karte (Layout, Padding, Hintergrund)

</td></tr><tr><td>`arcCustomLayout`

</td><td>Flexible Verschachtelung von Inhalten und Layouts

</td></tr><tr><td>`arcCustomText` (kostenfrei)

</td><td>Darstellung von Titel und Untertitel

</td></tr><tr><td>`arcCustomComponentCyberSwitch` (kostenfrei)

</td><td>Umschalter zur Auswahl der Inhalte innerhalb der Karte

</td></tr></tbody></table></figure>## Fazit

Die `SwitchCard`-Komponente ist ein leistungsstarkes UI-Element, mit dem du Inhalte dynamisch, elegant und übersichtlich darstellen kannst. Ob KPIs, Diagramme oder komplexe Widgets – die Darstellung passt sich automatisch an die Auswahl im Switch an.

Dank des modularen Aufbaus mit `arcCustomCard`, `arcCustomLayout` und `arcCustomComponentCyberSwitch` bleibt die Komponente flexibel und lässt sich problemlos in bestehende Layouts und Designsysteme integrieren.

👉 Nutze sie überall dort, wo du zwischen mehreren Ansichten oder Datenbereichen innerhalb einer Oberfläche umschalten möchtest – zum Beispiel:

- in Dashboards
- bei Detailansichten mit mehreren Datenperspektiven
- oder zur visuellen Filterung von Inhalten

Let’s make data delightful. 🚀