Components

Switch Card

1.0.0

Widget bestellen

Component: SwitchCard

The arcComponentSwitchCard is a versatile UI component that can dynamically switch between various contents – such as inventories, capacities, or other visualizations. It combines a visually appealing card with an embedded CyberSwitch that toggles between the defined views.

Typically, it consists of:

a title and subtitle to categorize the content,
an interactive switch (arcCustomComponentCyberSwitch) with any number of entries,
and a dynamic content area that adapts based on the selection.

💡 Particularly suitable for dashboards or overview pages where users can switch between multiple metrics or representations – without needing to leave the view.

Application Code

In the following example, you can see the basic structure of the SwitchCard with two toggle options – each containing its own logic (active) and content to display in the lower area of the card.

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

Tutorial Video - how to easily set up the SwitchCard

In this tutorial, Lisa shows you how to set up the free SwitchCard component in Ninox.

Main Parameters

These parameters are passed directly in the call to arcComponentSwitchCard:

Parameter	Type	Description	Example
`uniqueId`	Text	Unique ID for the component (important for styling and reuse)	`uniqueId: "card element Lagerkapazitäten" + Nr,`
`title`	Text	Headline of the card	`title: "Lagebestände",`
`subtitle`	Text	Subtitle or additional info below the title	`subtitle: "Lagebestände aller Lager",`
`switchItems`	List	List of toggle options (see below for details)	`switchItems: [ {…}, {…} ]`

💡 Note: The title and subtitle values are displayed optionally – if they are empty, the space is automatically freed. The uniqueId should always be assigned to avoid conflicts with other components.

Entry in `switchItems`

Each element in switchItems represents a toggle option (e.g., "Inventories", "Capacities", "Distribution") with its own title, activation logic, action logic, and displayed content.

Parameter	Type	Description	Example
`id`	Number or Text	Unique ID for the item (can be used for dynamic mapping)	`id: 1,`
`title`	Text	Title of the button in the switch (e.g., "Inventories")	`title: "Bestände",`
`recordId`	ID/Ref	ID of the current record that the action refers to	`recordId: Nr,`
`fieldId`	Function or Text (ID)	Reference to the field that needs to be updated	`fieldId: fieldId(Nr, "filter_lagerkapazitaet"),`
`value`	Any	Value to be set when the button is clicked	`value: 2,`
`active`	Bool./Expr.	Expression of when the item is active	`active: filter_lagerkapazitaet = "2",`
`content`	Text	The actual content displayed when this item is active	`content: 'arcProgressBarComponent _lager'`

💡 Note:

content can be pure Ninox text, a function call, or a composed widget.
The first entry with active: true is always displayed.
If you only have one item, the switch will be automatically hidden.

 Typical content for `content`

The content value can have different structures – depending on which widget or element you want to display in the card. Here are some typical examples:

Content Type	Description	Example
Widget Reference	Call of another widget (e.g., a progress indicator, a donut chart, a custom layout, etc.)	`content: helper_donuts_lager`
Text Output	Simple text (e.g., as a placeholder or for quick display)	`content: "Noch keine Daten vorhanden"`

Required Widgets

The SwitchCard is a free component that you can use directly – provided that you have the following widgts licensed in your team:

Widget	Description
`arcCustomCard`	Basic structure of the card (layout, padding, background)
`arcCustomLayout`	Flexible nesting of contents and layouts
`arcCustomText` (free)	Display of title and subtitle
`arcCustomComponentCyberSwitch` (free)	Switch for selecting content within the card

Conclusion

The SwitchCard component is a powerful UI element that allows you to present content dynamically, elegantly, and clearly. Whether KPIs, charts, or complex widgets – the presentation automatically adjusts to the selection in the switch.

Thanks to the modular structure with arcCustomCard, arcCustomLayout, and arcCustomComponentCyberSwitch, the component remains flexible and can be easily integrated into existing layouts and design systems.

👉 Use it wherever you want to switch between multiple views or data areas within a surface – for example:

in dashboards
in detail views with multiple data perspectives
or for visual filtering of contents

Let’s make data delightful. 🚀