Widgets

Custom KPI Bar

1.3.1

Order widget

Custom KPI Bar

The Custom KPI Bar consists of an application code that you insert into a Ninox formula field on your desired interface in the database. This consists of a general part (settings), where you make basic settings, and a detail area (cards), where you individually determine which values, colors, or actions you apply.

Complete Application Code

Here you see a sample application code that defines your KPI bar. With data, you define the contents that you then output using the function arcKPIBar().

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)

General Settings

In the general settings, you make the basic settings for your KPI card. This affects all cards. The individual parameters are explained below:

uniqueId assigns a unique name to your KPI bar. It is important that this designation is unique. For example, if you have multiple KPI bars on a dataset and do not specify a unique name, the values will overwrite each other. So try to name it as individually as possible.

uniqueId: "KPI Bar 1",

height determines the height of your KPI bar. You can specify the following values:

height: "250px" // Pixel Werte

colorLabel specifies the color of the text. You can specify the following values:

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

fontSizeLabel determines the size of your text above and below the KPI value. You can specify this with the following values:

fontSizeLabel: "12px" // Pixel Werte

colorValue specifies the color of your KPI value. You can specify the following values:

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

fontSizeValue determines the size of your KPI value. You can specify this with the following values:

fontSizeValue: "35px" // Pixel Werte

backgroundColor determines the background color of your card. You can specify the following values:

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

borderColor determines the color of the border of the card. You can specify the following values:

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

Default Values as Fallback

💡 Note: All values of the parameters are specified in quotation marks. If you do not enter anything in the quotation marks, the system will revert to a fallback. This means there are pre-set default values, so something will always be output. Here you see the card with the fallback values:

Detail Area

In the detail area, you define all styles and values of the individual KPI cards. This means: Each card can be designed individually. The styles will override the values from the general settings. Below you see a code for a sample 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 is the individual number of your card and ensures clarity and data structure. You specify this as follows:

card: 1 // Nummer deiner Karte als reine Zahl

settings are the same setting values as in the general settings. You can override these and customize them for each card here.

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

title is the heading above your KPI value.

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 outputs your value of the KPI card.

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 specifies the subtitle below your KPI value.

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.

Duplicating Your KPI Cards

You can decide how many KPI cards you want to display. You can easily duplicate your cards in the code via copy-paste. Separate the individual cards with a comma (,).

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

Parameters

In the detail area of your KPI cards, you can define various parameters. You can decide which parameters you want to define. If you leave parameters out, they will not be output. Here you can see all parameters that you can use for the KPI bar:

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

Functions

You can define your parameters with all Ninox functions & syntax. We have also created some useful arcRider functions to make your values even clearer.

shortNumbers() shortens long numbers from 4 digits and appends the number name (K, M, B, T) behind it.

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.)

Examples

Below you will find some practical examples that illustrate the different uses of the KPI bar.

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 Individual

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 Dark Mode

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)

Further Links:

> NX Custom KPI Bar