Cyber Switch Component

With arcCustomComponentCyberSwitch, you can easily create a modern toggle between two (or more) states – perfect for filters, views, or simple status changes in your app. The component is based on arcCustomLayout and combines UI design and interaction into a pre-built, reactive block.

The Cyber Switch comes without complicated setup steps: You only need to define the items, the active and inactive styles – and your switch is ready to use. You can fully customize the design to match your color scheme.

💡 Especially helpful:

• Ideal for visual filters like "Active / Inactive", "Today / Tomorrow", "List / Map", etc.

• Uses clickAction to update fields directly, for example.

• Each button automatically adapts to the overarching layout.

In the following section, you will find the application code as well as an example of its use in Ninox.

Complete Application Code

In the following empty application code, you will find an example with two items that are defined manually – including an individual clickAction for each switch.

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: ""
            }
    	}]
	})

Individual Parameters

basicSettings Block

The basicSettings block defines the fundamental design properties of the entire switch component. Currently, there is only one configurable parameter:

basicSettings: {
			backgroundColor: "#F8FAFC"
		},

💡 Tip: Use light, neutral colors like #f8fafc or #e5e7eb to visually highlight the active state.

inactiveSettings Block

With inactiveSettings, you set the design for the inactive option(s) – for all items that do not represent the current status.

inactiveSettings: {
			color: "#727c90",
			backgroundColor: "#F8FAFC"
		},

💡 Tip: Choose subtle colors here so that the active state stands out clearly. A popular choice is a combination of light gray background with slightly darker text color.

activeSettings Block

With activeSettings, you design the appearance for the active button – that is, for the item that is currently selected. This makes it clear which state is currently active.

activeSettings: {
			color: "#fff",
			backgroundColor: "#3b82f6"
		},

items Block

In the items block, you define the individual buttons (switches) that are displayed within the CyberSwitch component. Each entry represents a button with its own title, active status, and associated action.

title: "Menupunkt 1",

active: helper_Menu = "1",

clickAction: [{
			recordId: Nr, 
			type: "update",
			field: fieldId(current, "helper_Menu"),
			value: 1 
			}]

💡 Usage Notes:

• You can define as many items as you like – at least two are advisable.

• The items will be automatically distributed evenly in width (width: "fraction").

• Only one item can be displayed as "active" at a time. Therefore, your expression for active should ensure that it only applies to one.

• The clickAction follows the familiar action standards (e.g., type: "update") that you know from other components.

Ways to Structure the items Block

The items block can be structured in two different ways – depending on the use case:

1. Dynamic Structure via Helper Table (recommended for many entries)

If you have a table (e.g., Menu) with your possible switch entries, you can dynamically retrieve these and convert them into buttons.

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. Manual Structure with Static Definition

Alternatively, you can also manually define the buttons individually. This gives you maximum control over order, text, and actions – for example in simple toggles like "List / Map" or "Today / Tomorrow".

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
    		}
    	}]

Required Widgets

The CyberSwitch is a free Component that you can use directly – provided you have the following Widgets licensed in your team:

🧩 Conclusion

With the arcCustomComponentCyberSwitch, you can integrate a modern, visually appealing toggle element into your Ninox interface in just a few minutes – ideal for filters, view switches, or interactive dashboards.

Thanks to the combination with arcCustomLayout, the design is flexibly customizable and can be seamlessly integrated into existing structures. Whether dynamically via helper tables or manually with targeted control: You maintain full control.