Custom Steps

Anwendungscode

let current := this;
let list := (select 'Auftrag Steps');
let data := {
		uniqueId: "Auftragsphase",
		settings: {
			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: value
					}]
			}]
	};
arcCustomSteps(data)

Parameter

Folgend werden die Parameter des Widgets genauer erklärt. Es gibt einen allgemeinen Part zu der Step-Leiste und einen konkreten Step-Part, in dem du deine Werte der Leiste definierst.

Settings

height

height bestimmt die Höhe deiner Stepleiste.

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

fontsizeLabel

fontsizeLabel bestimmt die Schrift-Größe deines titles und subtitles.

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

fontsizeValue

fontsizeValue bestimmt die Schrift-Größe deines values.

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

colorValue

Die Farbe deines values bestimmst du mit colorValue.

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

colorLabel

Die Farbe deines titles & des subtitles bestimmst du mit colorLabel.

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

backgroundColor

backgroundColor definiert dir Hintergrundfarbe hinter deiner Step-Leiste.

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

alignX

alignX definiert die Postion des title, value & subtitles auf der X-Achse.

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

stepWidth

Mit stepWidth kannst du die Breite deiner Steps bestimmen. Sie funktioniert wie eine minWidth, so lange die Mindestbreite nicht erreicht ist, verteilen sich die Steps auf die gesamte Breite, wenn der Anzeigebereich kleiner wird, greift die Mindest Breite, die du bei stepWidth eingetragen hast.

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

gapY

gapY bestimmt den Abstand zwischen Text und Step. Also den Abstand von title zu value und von value zu subtitle.

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

stepRadius

Mit dem Parameter stepRadius kannst du die Ecken des Steps mit Pixelwerten abrunden. Wenn du keine runde Ecken haben möchtest, dann machst du sie einfach leicht eckig. (z. B.: stepRadius: 8px,)

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

connectionLine Block

In der neuen 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
			}