Visualisiere Fortschritte oder Status – mit Stil.

Mit dem arcCustomSteps-Widget kannst du mehrstufige Prozesse, Status- oder Fortschrittsanzeigen direkt in deinem Ninox-Interface umsetzen – klar strukturiert, visuell ansprechend und vollständig anpassbar. Ob Projektphasen, Prozessstatus oder Ampelsysteme: Die Steps lassen sich flexibel in Breite, Farben, Abständen und Aktionen konfigurieren.

Die einzelnen Schritte können dynamisch aus deinen Datensätzen aufgebaut und optional mit Aktionen (z. B. update, delete, popup) versehen werden. So entsteht eine interaktive Fortschrittsanzeige, die nicht nur informiert, sondern auch steuert.

In dieser Dokumentation zeigen wir dir:

• wie das Widget aufgebaut ist,

• welche Parameter du anpassen kannst,

• und wie du es Schritt für Schritt in dein System integrierst.

👉 Scroll weiter für Beispielcode, Parameterübersicht und Anwendungstipps.

Anwendungscode

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)

Parameter

Das Widget erhält ein Objekt mit folgenden Hauptbestandteilen:

• uniqueId – eine eindeutige Kennung für das Widget

• settings – allgemeine Darstellungseinstellungen für alle Steps

• steps[] – eine Liste von Einzelschritten mit optionalen Detailwerten

Die Werte aus settings gelten für alle Steps, können aber pro Step gezielt überschrieben werden (z. B. Farbe oder Breite).

Settings-Block

embedded

Typ: boolean
Default: false

Legt fest, ob das Widget in ein bestehendes Layout eingebettet wird.

• Bei true wird auf äußere Rahmen, Hintergrundfarben und Standard-Abstände verzichtet.

• Ideal, wenn das Widget in einem größeren Komponenten-Container liegt, der selbst das Layout steuert.

💡 Tipp: Wenn du embedded: true setzt, musst du sicherstellen, dass das umgebende Element eine passende Höhe und ggf. ein eigenes Layout mitbringt. Das Widget passt sich dann vollständig diesem Rahmen an.

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

height

Typ: text
Default: "100%"

Definiert die Höhe des gesamten Steps-Widgets. Akzeptiert klassische CSS-Werte wie "150px", "auto" oder "100%".

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

💡 Tipp: Wenn du das Widget nicht eingebettet nutzt (embedded: false), solltest du eine feste Höhe setzen – insbesondere bei schmalen Step-Breiten, damit Layout und Scrollverhalten konsistent bleiben.

fontsizeLabel

Typ: text
Default: "13px"

Bestimmt die Schriftgröße für title und subtitle innerhalb eines Steps. Dieser Wert wirkt sowohl auf die obere (title) als auch untere (subtitle) Beschriftung jedes Steps – sofern kein eigener Wert direkt im Step gesetzt ist.

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

💡 Tipp: Für kompakte Layouts empfiehlt sich eine kleinere Schriftgröße wie "10px" oder "11px" – besonders bei vielen Steps mit schmaler Breite.

fontsizeValue

Typ: text
Default: "35px"

Gibt die Schriftgröße für den zentralen Wert (value) eines Steps an – also die Zahl oder Kennung im Kreis. Dieser Wert beeinflusst die Lesbarkeit und visuelle Gewichtung des zentralen Inhalts. Wird häufig für Statuszahlen, Zähler oder Phasen verwendet.

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

💡 Tipp: Kleinere Werte wie "20px" eignen sich für sehr kompakte Steps, größere Größen wirken besonders bei wenigen, breit angelegten Schritten.

colorValue

Typ: text
Default: "#3E6FFF"

Legt die Textfarbe des zentralen value-Elements im Step-Kreis fest. Die Farbe bezieht sich ausschließlich auf den Text (z. B. Zahl, Status oder Kennung) – nicht auf den Hintergrund des Kreises.

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

💡 Tipp: Die Lesbarkeit hängt stark vom Hintergrund ab. Achte auf ausreichend Kontrast zur backgroundColor.

colorLabel

Typ: text
Default: "#566eb1"

Definiert die Textfarbe für title und subtitle innerhalb eines Steps. Dieser Farbwert wird für die obere und untere Beschriftung verwendet – solange der Step selbst keine abweichende Farbe angibt.

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

💡 Tipp: Verwende helle Schriftfarben wie #ffffff nur bei dunklem Hintergrund – ansonsten leidet die Lesbarkeit.

borderColor

Typ: text
Default: "#e5e5e5"

Definiert die Farbe der Trennlinien zwischen den Steps. Diese Farbe wird als rechte Rahmenlinie jedes Steps gesetzt (außer beim letzten Step). Sie hilft, die Schritte visuell voneinander abzugrenzen.

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

💡 Tipp: Wenn du eine besonders reduzierte oder fließende Darstellung möchtest, setze borderColor: "transparent" – so verschwinden die Trennlinien vollständig.

backgroundColor

Typ: text
Default: "#f7f8fc"

Bestimmt die Hintergrundfarbe der Step-Kreise und der Verbindungslinien. Diese Farbe wird auf die mittleren Kreise (value) sowie die Linien zwischen den Steps angewendet – nicht jedoch auf den äußeren Hintergrund des gesamten Widgets (dieser ist meist transparent oder durch Container geregelt).

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

💡 Tipp: Ein heller Hintergrund sorgt für einen klaren, modernen Look. Für Spezialeffekte kannst du auch "transparent" oder leicht getönte Farben einsetzen.

alignX

Typ: text
Werte: "left", "center" (default), "right"

Steuert die horizontale Ausrichtung der Steps innerhalb des Widgets.

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

Diese Einstellung beeinflusst, wo die Steps innerhalb der Leiste ausgerichtet werden, insbesondere wenn weniger Steps vorhanden sind als Platz zur Verfügung steht.

• "left" → Steps starten ganz links

• "center" → Steps zentriert

• "right" → Steps rechtsbündig

💡 Hinweis: Diese Ausrichtung gilt sowohl für das gesamte Widget als auch für die Inhalte in jedem Step (z. B. Titel, Subtitle, Value).

stepWidth

Typ: text
Beispiel: "80px"
Default: (leer)

Legt die Mindestbreite jedes Steps fest. Wird kein Wert angegeben, passen sich die Steps automatisch an die Breite ihres Inhalts oder Containers an. Die Breite betrifft sowohl den sichtbaren Bereich des Steps als auch dessen Klickfläche.

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

💡 Tipp: Verwende feste Breiten bei vielen Steps mit kurzen Texten, um ein gleichmäßiges Layout zu erzielen. Bei variierenden Inhalten lieber leer lassen und auf automatische Skalierung setzen.

gapY

Typ: text
Beispiel: "10px"
Default: (leer)

Definiert den vertikalen Abstand (gap) zwischen den Elementen innerhalb eines Steps – also zwischen title, value und subtitle. Dieser Wert wirkt innerhalb des einzelnen Steps, nicht zwischen den Steps.

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

💡 Tipp: Mit einem kleineren Wert erzeugst du eine kompaktere Darstellung, größere Gaps wirken luftiger und lesbarer – besonders bei größeren Schriftgrößen.

stepRadius

Typ: text
Beispiel: "8px"
Default: (leer)

Bestimmt die Abrundung des Step-Kreises (value) über den CSS-Wert border-radius. Ein hoher Wert wie "50px" erzeugt einen perfekt runden Kreis – niedrigere Werte führen zu weicheren Rechtecken oder Pillenformen.

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

💡 Tipp: Für klassische runde Zähler-Designs setze "50%" oder "999px" – für eckigere Varianten kannst du mit Werten wie "4px" oder "8px" experimentieren.

connectionLine Block

In der Setting-Gruppe connectionLine bestimmst du Parameter zu der Linie zwischen deinen Steps. Mit dem Parameter show bestimmst du, ob die Linie überhaupt sichtbar sein soll (Mögliche Werte: true / false; default: true). Mit dem Parameter height, definierst du die Pixel-Höhe der Linie (default: 3px).

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

steps[]: Einzelne Schritte konfigurieren

Jeder Eintrag in steps ist ein Objekt, das einen einzelnen Step beschreibt. Neben Titel, Wert und Aktionen kannst du auch viele Designparameter direkt je Step setzen – sie überschreiben dann die allgemeinen Einstellungen aus settings.

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

💡 Tipp: Du musst nicht alle Felder angeben. Jeder Step übernimmt automatisch die Werte aus settings, wenn keine eigenen Angaben gemacht werden.

actions[]: Interaktive Schritte

Jeder Step kann mit einer oder mehreren Aktionen versehen werden, die beim Klick auf den value-Kreis ausgelöst werden. Aktionen werden über ein Array von Objekten definiert:

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