Visualize progress or status – with style.

With the arcCustomSteps widget, you can implement multi-step processes, status displays, or progress bars directly in your Ninox interface – clearly structured, visually appealing, and fully customizable. Whether project phases, process statuses, or traffic light systems: the steps can be flexibly configured in width, colors, spacing, and actions.

The individual steps can be dynamically built from your records and optionally equipped with actions (e.g. update, delete, popup). This creates an interactive progress display that not only informs but also controls.

In this documentation, we show you:

• how the widget is structured,

• which parameters you can adjust,

• and how to integrate it step by step into your system.

👉 Scroll down for sample code, parameter overview, and application tips.

Application Code

let current := this;
let list := (select 'Auftrag Steps');
let data := {
		uniqueId: "Auftragsphase",
		settings: {
            embedded: true,
			height: "150px",
			fontSizeLabel: "10px",
			fontSizeValue: "20px",
			colorValue: "",
            colorLabel: "#ffffff",
			borderColor: "transparent",
			backgroundColor: "transparent",
			alignX: "center",
			stepWidth: "80px",
			gapY: "10px",
			stepRadius: "8px",
			connectionLine: {
				show: true,
				height: "3px"
			}
		},
		steps: list.[{
				title: title,
				value: value,
				subtitle: "Test",
				colorValue: "",
				backgroundColor: "",
				actions: [{
						recordId: current.Nr,
						type: "update",
						field: "",
						value: number(Nr)
					}]
			}]
	};
arcCustomSteps(data)

Parameters

The widget receives an object with the following main components:

• uniqueId – a unique identifier for the widget

• settings – general display settings for all steps

• steps[] – a list of individual steps with optional detail values

The values from settings apply to all steps but can be specifically overridden per step (e.g. color or width).

Settings Block

embedded

Type: boolean
Default: false

Determines whether the widget is embedded in an existing layout.

• If true, outer frames, background colors, and default spacing are omitted.

• Ideal when the widget is in a larger component container that controls the layout itself.

💡 Tip: If you set embedded: true, make sure that the surrounding element has an appropriate height and, if necessary, a layout of its own. The widget will then fully adapt to this framework.

embedded: true,
embedded: "", // default: false

height

Type: text
Default: "100%"

Defines the height of the entire steps widget. Accepts standard CSS values such as "150px", "auto", or "100%".

height: "150px",
height: "",

💡 Tip: If you use the widget not embedded (embedded: false), you should set a fixed height – especially with narrow step widths, to keep layout and scrolling behavior consistent.

fontsizeLabel

Type: text
Default: "13px"

Determines the font size for title and subtitle within a step. This value affects both the top (title) and bottom (subtitle) labeling of each step – unless a specific value is set directly in the step.

fontSizeLabel: "10px", // Pixel-Werte

💡 Tip: For compact layouts, a smaller font size such as "10px" or "11px" is recommended – especially with many steps of narrow width.

fontsizeValue

Type: text
Default: "35px"

Specifies the font size for the central value (value) of a step – that is, the number or identifier in the circle. This value influences the readability and visual weight of the central content. It is often used for status numbers, counters, or phases.

fontSizeValue: "20px", // Pixel-Werte

💡 Tip: Smaller values like "20px" are suitable for very compact steps, while larger sizes are particularly effective with fewer, wide steps.

colorValue

Type: text
Default: "#3E6FFF"

Sets the text color of the central value element in the step circle. The color pertains solely to the text (e.g., number, status, or identifier) – not to the background of the circle.

colorValue: "#ddd", // HEX-Werte

💡 Tip: Readability heavily depends on the background. Ensure sufficient contrast with the backgroundColor.

colorLabel

Type: text
Default: "#566eb1"

Defines the text color for title and subtitle within a step. This color value is used for both the upper and lower labeling – as long as the step itself does not specify a different color.

 colorLabel: "#ffffff", // HEX-Werte

💡 Tip: Use light font colors such as #ffffff only on dark backgrounds – otherwise, readability suffers.

borderColor

Type: text
Default: "#e5e5e5"

Defines the color of the separation lines between the steps. This color is set as the right border line of each step (except for the last step). It helps to visually separate the steps.

 borderColor: "#ededed", // HEX-Werte

💡 Tip: If you want a particularly minimalist or fluid display, set borderColor: "transparent" – this will completely remove the separation lines.

backgroundColor

Type: text
Default: "#f7f8fc"

Defines the background color of the step circles and the connection lines. This color is applied to the middle circles (value) and the lines between the steps – but not to the outer background of the entire widget (which is usually transparent or regulated by the container).

backgroundColor: "transparent", // Transparenter Hintergrund
backgroundColor: "#ededed", // HEX-Werte 

💡 Tip: A light background creates a clear, modern look. For special effects, you can also use "transparent" or slightly tinted colors.

alignX

Type: text
Values: "left", "center" (default), "right"

Controls the horizontal alignment of the steps within the widget.

alignX: "center", // left, center, right
algnX: "", // default: center

This setting affects where the steps are aligned within the bar, especially if there are fewer steps than space available.

• "left" → Steps start far left

• "center" → Steps centered

• "right" → Steps right-aligned

💡 Note: This alignment applies to both the entire widget and the content in each step (e.g., title, subtitle, value).

stepWidth

Type: text
Example: "80px"
Default: (empty)

Sets the minimum width of each step. If no value is specified, the steps automatically adjust to the width of their content or container. The width affects both the visible area of the step and its click area.

stepWidth: "80px", // Pixel-Werte

💡 Tip: Use fixed widths with many steps containing short text to achieve a uniform layout. With varying content, it is better to leave it empty and rely on automatic scaling.

gapY

Type: text
Example: "10px"
Default: (empty)

Defines the vertical spacing (gap) between the elements within a step – that is, between title, value, and subtitle. This value operates within the individual step, not between steps.

gapY: "10px", // Pixel-Werte

💡 Tip: A smaller value creates a more compact display, while larger gaps make it airier and more readable – especially with larger font sizes.

stepRadius

Type: text
Example: "8px"
Default: (empty)

Defines the rounding of the step circle (value) using the CSS value border-radius. A high value like "50px" creates a perfectly round circle – lower values lead to softer rectangles or pill shapes.

stepRadius: "8px", // Pixel-Werte

💡 Tip: For classic round counter designs, set "50%" or "999px" – for sharper variants, you can experiment with values like "4px" or "8px".

connectionLine Block

In the setting group connectionLine, you define parameters for the line between your steps. With the parameter show, you specify whether the line should be visible at all (possible values: true / false; default: true). With the parameter height, you define the pixel height of the line (default: 3px).

connectionLine: {
				show: true, // true, false
				height: "3px" // Pixel-Werte
			}

steps[]: Configure individual steps

Each entry in steps is an object that describes a single step. In addition to title, value, and actions, you can also set many design parameters directly for each step – they then override the general settings from settings.

{
  title: "In Bearbeitung",
  value: "2",
  subtitle: "laufend",
  width: "90px",
  colorLabel: "#ffffff",
  fontSizeLabel: "11px",
  colorValue: "#00cc99",
  fontSizeValue: "28px",
  backgroundColor: "#222",
  borderColor: "transparent",
  actions: [...]
}

💡 Tip: You do not need to specify all fields. Each step automatically takes the values from settings if no specific entries are made.

actions[]: Interactive steps

Each step can be equipped with one or more actions that are triggered when clicking on the value circle. Actions are defined via an array of objects:

{
  type: "update", // "update" | "delete" | "popup"
  recordId: "12345", // ID des betroffenen Datensatzes
  field: fieldId(this,"Status"), // (nur bei "update") Feldname, das geändert werden soll
  value: "Fertig" // (nur bei "update") Neuer Wert
}