Components

Switch Card

1.0.0

Widget bestellen

Component: SwitchCard

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.

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.

Hauptparameter

Diese Parameter werden direkt im Aufruf der arcComponentSwitchCard übergeben:

Parameter	Typ	Beschreibung	Beispiel
`uniqueId`	Text	Eindeutige ID für die Komponente (für Styling und Wiederverwendung wichtig)	`uniqueId: "card element Lagerkapazitäten" + Nr,`
`title`	Text	Überschrift der Karte	`title: "Lagebestände",`
`subtitle`	Text	Untertitel oder Zusatzinfo unter dem Titel	`subtitle: "Lagebestände aller Lager",`
`switchItems`	Liste	Liste mit den Umschaltoptionen (siehe unten für Details)	`switchItems: [ {…}, {…} ]`

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

Parameter	Typ	Beschreibung	Beispiel
`id`	Zahl o. Text	Eindeutige ID für das Item (kann z. B. für dynamisches Mapping genutzt werden)	`id: 1,`
`title`	Text	Titel des Buttons im Switch (z. B. "Bestände")	`title: "Bestände",`
`recordId`	ID/Ref	ID des aktuellen Datensatzes, auf den sich die Aktion bezieht	`recordId: Nr,`
`fieldId`	Funktion o. Text (ID)	Referenz auf das Feld, das aktualisiert werden soll	`fieldId: fieldId(Nr, "filter_lagerkapazitaet"),`
`value`	beliebig	Wert, der gesetzt werden soll, wenn der Button geklickt wird	`value: 2,`
`active`	bool./Expr.	Ausdruck, wann das Item aktiv ist	`active: filter_lagerkapazitaet = "2",`
`content`	Text	Der eigentliche Inhalt, der angezeigt wird, wenn dieses Item aktiv ist	`content: 'arcProgressBarComponent _lager'`

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

Inhaltstyp	Beschreibung	Beispiel
Widget-Referenz	Aufruf eines anderen Widgets (z. B. eine Fortschrittsanzeige, ein Donut-Chart, ein eigenes Layout, etc.)	`content: helper_donuts_lager`
Textausgabe	Einfacher Text (z. B. als Platzhalter oder zur schnellen Anzeige)	`content: "Noch keine Daten vorhanden"`

Benötigte Widgets

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

Widget	Beschreibung
`arcCustomCard`	Grundstruktur der Karte (Layout, Padding, Hintergrund)
`arcCustomLayout`	Flexible Verschachtelung von Inhalten und Layouts
`arcCustomText` (kostenfrei)	Darstellung von Titel und Untertitel
`arcCustomComponentCyberSwitch` (kostenfrei)	Umschalter zur Auswahl der Inhalte innerhalb der Karte

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