Widgets

Custom KPI Bar

1.3.1

Custom KPI Bar

Die Custom KPI Bar besteht aus einem Anwendungscode, den du in einem Ninox Formel-Feld auf deiner Wunschoberfläche in der Datenbank einfügst. Dieser besteht aus einem allgemeinen Part (settings), in dem du Grundeinstellungen vornimmst und einem Detail-Bereich (cards), in dem du individuell bestimmst, welche Werte, Farben oder Aktionen du anwendest.

Gesamter Anwendungscode

Hier siehst du einen beispielhaften Anwendungscode, der deine KPI-Bar definiert. Mit data definierst du die Inhalte, die du dann mit der Funktion arcKPIBar() ausgeben lässt.

let data := {
		uniqueId: "KPI Bar 2",
		settings: {
			height: "",
			colorLabel: "",
			fontSizeLabel: "15",
			colorValue: "",
			fontSizeValue: "40px",
			backgroundColor: "",
			borderColor: ""
		},
		cards: [{
				card: 1,
				settings: {
					colorLabel: "#8e99c4",
					fontSizeLabel: "15",
					colorValue: "#8e99c4",
					fontSizeValue: "40px",
					backgroundColor: "#49547e",
					borderColor: "#646f9b"
				},
				title: "Gesamtumsatz",
				value: "€" + shortNumbers(cnt((select Projekte).Umsatz)),
				subtitle: "€" +
				shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}]
	};
arcKPIBar(data)

Allgemeine Settings

In den allgemeinen Settings nimmst du die Grundeinstellungen deiner KPI Karte vor. Diese wirkt sich auf alle Karten aus. Folgend werden dir die einzelnen Parameter erläutert:

uniqueId vergibt einen eigenen Namen für deine KPI Bar. Es ist wichtig, dass diese Bezeichnung einzigartig ist. Hast du beispielsweise mehrere KPI-Bars auf einem Datensatz und gibst keinen einzigartigen Namen an, dann überschreiben sich die Werte gegenseitig. Versuche also möglichst individuell zu Bezeichnen.

uniqueId: "KPI Bar 1",

height bestimmt die Höhe deiner KPI Bar. Hier kannst du folgende Werte angeben:

height: "250px" // Pixel Werte

colorLabel gibt die Farbe der Schrift an. Hier kannst du folgende Werte angeben:

colorLabel: "FFFFFF" // HEX Code für deinen Farbwert.

fontSizeLabel bestimmt die Größe deiner Schrift über und unter dem KPI-Wert. Diese gibst du mit folgenden Werten an:

fontSizeLabel: "12px" // Pixel Werte

colorValue gibt die Farbe deines KPI Wertes an. Hier kannst du folgende Werte angeben:

colorValue: "FFFFFF" // HEX Code für deinen Farbwert.

fontSizeValue bestimmt die Größe deines KPI-Wertes. Diese gibst du mit folgenden Werten an:

fontSizeValue: "35px" // Pixel Werte

backgroundColor bestimmt die Farbe des Hintergrundes deiner Karte. Hier kannst du folgende Werte angeben:

backgroundColor: "FFFFFF" // HEX Code für deinen Farbwert.

borderColor bestimmt die Farbe der Umrandung der Karte. Hier kannst du folgende Werte angeben:

borderColor: "FFFFFF" // HEX Code für deinen Farbwert.

Standard-Werte als Fallback

💡 Hinweis: Alle Werte der Parameter werden in Anführungszeichen angegeben. Trägst du nichts in die Anführungszeichen ein, so greift das System auf ein Fallback zurück. Das heißt es gibt voreingestellte Standard-Werte, sodass immer etwas ausgegeben wird. Hier siehst du die Karte mit den Fallback-Werten:

Detail-Bereich

Im Detail-Bereich definierst du alle Styles und Werte der einzelnen KPI-Karten. Das heißt: Jede Karte kann individuell gestaltet werden. Die Styles überschreiben in dem Fall die Werte aus den Allgemeinen Settings. Folgend siehst du einen Code für eine beispielhafte KPI Card.

{card: 1,
		settings: {
			colorLabel: "#F9244B",
			fontSizeLabel: "15",
			colorValue: "#F9244B",
			fontSizeValue: "40px",
			backgroundColor: "#FCD9DF",
			borderColor: "#EABDC5"
			},
		title: "Gesamtumsatz",
		value: "€" + shortNumbers(cnt((select Projekte).Umsatz)),
		subtitle: "€" + shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}

card ist die individuelle Nummer deiner Karte und sorgt für Übersichtlichkeit und Datenstruktur. Diese gibst du wie folgt an:

card: 1 // Nummer deiner Karte als reine Zahl

settings sind die gleichen Einstellungswerte, wie in den allgemeinen Settings. Diese kannst du hier je Karte überschreiben und individuell gestalten.

settings: {
	colorLabel: "#F9244B",
	fontSizeLabel: "15",
	colorValue: "#F9244B",
	fontSizeValue: "40px",
	backgroundColor: "#FCD9DF",
	borderColor: "#EABDC5"
    	}

title ist die Überschrift über deinem KPI-Wert.

title: "Gesamtumsatz" // Reiner, statischer Text als Überschrift
title: if Status=abgeschlossen then "Gesamtumsatz" else "Erwarteter Umsatz" // Du kannst alle normalen Ninox Funktionen verwenden, um dir deinen Titel ausgeben zu lassen.

value gibt deinen Wert der KPI Karte aus.

value: "5.000.000€" // Reiner, statischer Text als Wert
value: "€" + shortNumbers(cnt((select Projekte).Umsatz)) // Greife auf Ninox Felder zurück und arbeite mit üblichen Ninox Funktionen / -Schreibweisen.

subtitle gibt den Untertitel unter deinem KPI Wert an.

subtitle: "in diesem Monat" // Reiner, statischer Text als Unterschrift
subtitle: "€" +
				shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat" // Greife auf Ninox Felder zurück und arbeite mit üblichen Ninox Funktionen / -Schreibweisen.

Vervielfältigung deiner KPI Karten

Du kannst selbst bestimmen, wie viele KPI Karten du dir anzeigen lassen möchtest. Per Copy Paste kannst du deine Karten einfach in dem Code vervielfältigen. Trenne die einzelnen Cards durch ein Komma (,).

cards: [{
	card: 1,
	title: "Gesamtumsatz",
	value: "€" + shortNumbers(cnt((select Projekte).Umsatz)),
	subtitle: "€" +
	shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
	" in diesem Monat"
}, {
	card: 2,
	title: "Abgeschlossen gesamt",
	value: shortNumbers(cnt(select Projekte where Abgeschlossen != null)),
	subtitle: shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
	" in diesem Monat"
}, {
	card: 3,
	title: "Conversion Rate",
	value: round(cnt(select Projekte where Abgeschlossen != null) / cnt(select Projekte) * 100, 2) +
	"%",
	subtitle: round(cnt(select Projekte where Abgeschlossen != null and month(Abgeschlossen) = month(today())) /
	cnt(select Projekte where month(Abgeschlossen) = month(today())) *
	100, 2) + "%" + " in diesem Monat"
}]

Parameter

In dem Detail-Bereich deiner KPI-Karten kannst du verschiedenste Parameter definieren. Dabei kannst du selbst entscheiden, welche Parameter du definieren möchtest. Lässt du Parameter einfach weg, werden diese nicht ausgegeben. Hier siehst du alle Parameter, die du bei der KPI Bar verwenden kannst:

card: "",
	settings: {
		colorLabel: "",
		fontSizeLabel: "",
		colorValue: "",
		fontSizeValue: "",
		backgroundColor: "",
		borderColor: ""
	},
    title: "",
	value: "",
	subtitle: ""

Funktionen

Du kannst deine Parameter mit allen Ninox Funktionen & Schreibweisen definieren. Wir haben dir aber auch einige nützliche arcRider Funktionen erstellt, die dir deine Werte noch übersichtlicher machen.

shortNumbers() kürzt lange Zahlen ab 4 Stellen ab und setzt den Zahlennamen (Tsd.,Mio.,Mrd.,Bill.) dahinter.

shortNumbers("2000") // Gibt den abgekürzten Wert der statischen Zahl aus (2 Tsd.) 
shortNumbers(cnt((select Projekte).Umsatz)) // Gibt den abgekürzten Wert der dynamischen Zahl aus (z.B. 35 Mio.)

Beispiele

Folgend findest du einige Praxisbeispiele, die dir den unterschiedlichen Einsatz der KPI Bar veranschaulichen.

KPI Card Fallback

let data := {
		uniqueId: "KPI Bar 1",
		settings: {
			height: "",
			colorLabel: "",
			fontSizeLabel: "15",
			colorValue: "",
			fontSizeValue: "40px",
			backgroundColor: "",
			borderColor: ""
		},
		cards: [{
				card: 1,
				title: "Gesamtumsatz",
				value: "€" + shortNumbers(cnt((select Projekte).Umsatz)),
				subtitle: "€" +
				shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}, {
				card: 2,
				title: "Abgeschlossen gesamt",
				value: shortNumbers(cnt(select Projekte where Abgeschlossen != null)),
				subtitle: shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}, {
				card: 3,
				title: "Conversion Rate",
				value: round(cnt(select Projekte where Abgeschlossen != null) / cnt(select Projekte) * 100, 2) +
				"%",
				subtitle: round(cnt(select Projekte where Abgeschlossen != null and month(Abgeschlossen) = month(today())) /
				cnt(select Projekte where month(Abgeschlossen) = month(today())) *
				100, 2) +
				"%" +
				" in diesem Monat"
			}]
	};
arcKPIBar(data)

KPI Bar individuell

let data := {
		uniqueId: "KPI Bar 2",
		settings: {
			height: "",
			colorLabel: "",
			fontSizeLabel: "15",
			colorValue: "",
			fontSizeValue: "40px",
			backgroundColor: "",
			borderColor: ""
		},
		cards: [{
				card: 1,
				settings: {
					colorLabel: "#F9244B",
					fontSizeLabel: "15",
					colorValue: "#F9244B",
					fontSizeValue: "40px",
					backgroundColor: "#FCD9DF",
					borderColor: "#EABDC5"
				},
				title: "Gesamtumsatz",
				value: "€" + shortNumbers(cnt((select Projekte).Umsatz)),
				subtitle: "€" +
				shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}, {
				card: 2,
				settings: {
					colorLabel: "#000",
					fontSizeLabel: "15",
					colorValue: "#1f96bf",
					fontSizeValue: "40px",
					backgroundColor: "#FDE8A5",
					borderColor: "#D9C78C"
				},
				title: "Abgeschlossen gesamt",
				value: shortNumbers(cnt(select Projekte where Abgeschlossen != null)),
				subtitle: shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}, {
				card: 3,
				settings: {
					colorLabel: "#CAECCD",
					fontSizeLabel: "15",
					colorValue: "#CAECCD",
					fontSizeValue: "40px",
					backgroundColor: "#56C275",
					borderColor: "#9DCDA1"
				},
				title: "Conversion Rate",
				value: round(cnt(select Projekte where Abgeschlossen != null) / cnt(select Projekte) * 100, 2) +
				"%",
				subtitle: cnt(select Projekte where Abgeschlossen != null and month(Abgeschlossen) = month(today())) /
				cnt(select Projekte where month(Abgeschlossen) = month(today())) *
				100 +
				"%" +
				" in diesem Monat"
			}]
	};
arcKPIBar(data)

KPI Bar Darkmode

let data := {
		uniqueId: "KPI Bar 3",
		settings: {
			height: "",
			colorLabel: "",
			fontSizeLabel: "15",
			colorValue: "",
			fontSizeValue: "40px",
			backgroundColor: "",
			borderColor: ""
		},
		cards: [{
				card: 1,
				settings: {
					colorLabel: "#8e99c4",
					fontSizeLabel: "15",
					colorValue: "#8e99c4",
					fontSizeValue: "40px",
					backgroundColor: "#49547e",
					borderColor: "#646f9b"
				},
				title: "Gesamtumsatz",
				value: "€" + shortNumbers(cnt((select Projekte).Umsatz)),
				subtitle: "€" +
				shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}, {
				card: 2,
				settings: {
					colorLabel: "#8e99c4",
					fontSizeLabel: "15",
					colorValue: "#8e99c4",
					fontSizeValue: "40px",
					backgroundColor: "#49547e",
					borderColor: "#646f9b"
				},
				title: "Abgeschlossen gesamt",
				value: shortNumbers(cnt(select Projekte where Abgeschlossen != null)),
				subtitle: shortNumbers(cnt((select Projekte where month(Abgeschlossen) = month(today())).Umsatz)) +
				" in diesem Monat"
			}, {
				card: 3,
				settings: {
					colorLabel: "#8e99c4",
					fontSizeLabel: "15",
					colorValue: "#8e99c4",
					fontSizeValue: "40px",
					backgroundColor: "#49547e",
					borderColor: "#646f9b"
				},
				title: "Conversion Rate",
				value: round(cnt(select Projekte where Abgeschlossen != null) / cnt(select Projekte) * 100, 2) +
				"%",
				subtitle: cnt(select Projekte where Abgeschlossen != null and month(Abgeschlossen) = month(today())) /
				cnt(select Projekte where month(Abgeschlossen) = month(today())) *
				100 +
				"%" +
				" in diesem Monat"
			}]
	};
arcKPIBar(data)

Weiterführende Links:

> NX Custom KPI Bar

Zurück

Custom Layout

Zurück

Custom Layout

Weiter

Custom Menu

Weiter

Custom Menu