Components

KPI Focus

1.0.0

Widget bestellen

Kompakte KPI-Übersicht für Dashboards

KPI-Übersicht mit drei Boxen auf gelbem Hintergrund: 23 offene Aufträge (2 überfällig, rot), 14 offene Aufgaben (9 diese Woche, grün) und 3 Termine in den nächsten 7 Tagen (0 morgen, orange).

Mit arcComponentKpiFocus() kannst du wichtige Kennzahlen übersichtlich und ansprechend direkt in deinen Ninox-Dashboards darstellen. Jede KPI-Box zeigt eine Hauptzahl mit Icon und Titel sowie eine zusätzliche Unterzeile (Subtitle) mit weiterführenden Informationen – zum Beispiel Trends, Veränderungen oder Statusmeldungen.

Die Component eignet sich ideal für:

Dashboard-Übersichten (z. B. Aufträge, Aufgaben, Termine)
Lager- und Bestandsmanagement
Team- oder Projekt-KPIs
Jede andere Art von Kennzahlen, die schnell und klar erfassbar sein sollen

💡 Besonderheiten:

Frei konfigurierbare Anzahl von KPI-Elementen
Individuelle Icons und Farben pro KPI
Subtitle-Bereich für zusätzliche Werte und kurze Beschreibungen
Ideal kombinierbar mit anderen arcComponents und Widgets für ein konsistentes Dashboard-Design

Vorgefertigte Komponente: Du musst dich nicht um Layout, Farben oder Icon-Design kümmern – einfach deine eigenen Daten einsetzen und direkt loslegen.

Benötigte Widgets: KPI Bar, Layout, Text, Icon

Anwendungscode

arcComponentKpiFocus({
        uniqueId: "" + Nr,
        items: [{
                id: 1,
                title: "",
                iconName: "",
                value: "",
                subtitle: {
                    color: "",
                    iconName: "",
                    value: "",
                    description: ""
                }
            }, {
                id: 2,
                title: "",
                iconName: "",
                value: "",
                subtitle: {
                    color: "",
                    iconName: "",
                    value: "",
                    description: ""
                }
            }, {
                id: 3,
                title: "",
                iconName: "",
                value: "",
                subtitle: {
                    color: "",
                    iconName: "",
                    value: "",
                    description: ""
                }
            }]
    })

Parameter

uniqueId

Typ: text
Pflichtfeld: ja

Die uniqueId ist eine eindeutige Kennung für die Komponente. Wenn du die Komponente mehrfach auf einer Seite verwendest, solltest du die ID dynamisch erzeugen, zum Beispiel mit + Nr.

 uniqueId: "" + Nr,

items-Block

Der Block items enthält alle KPI-Elemente, die innerhalb der Komponente angezeigt werden sollen. Jedes Element im Array repräsentiert eine einzelne KPI-Box mit Titel, Icon, Wert und einem optionalen Subtitle-Bereich.

Mit items kannst du:

beliebig viele KPIs definieren,
jedem KPI ein eigenes Icon und eine eigene Farbe zuweisen,
zusätzliche Informationen wie Trends oder Statusangaben über den Subtitle hinzufügen.

{
                id: 1,
                title: "",
                iconName: "",
                value: "",
                subtitle: {
                    color: "",
                    iconName: "",
                    value: "",
                    description: ""
                }
            }

Parameter	Typ	Pflicht	Beschreibung	Beispiel
`id`	Zahl	✅	Eindeutige ID des KPI-Elements. Wird zur Unterscheidung der einzelnen KPIs genutzt.	`1`
`title`	Text	✅	Titel, der oberhalb des Wertes angezeigt wird.	`"Lagerbestand"`
`iconName`	Text	✅	Name des Icons aus der integrierten Icon-Bibliothek.	`"buildings"`
`value`	Text	✅	Der Hauptwert, der in der KPI-Box angezeigt wird.	`text(sum(lager.sum_lagerbestand))`
`subtitle`	Objekt	❌	Zusätzlicher Bereich unterhalb des Hauptwerts mit Detailinformationen. Siehe unten.	Siehe `subtitle`-Struktur

subtitle-Block

Der Block subtitle ist optional und erlaubt es, unterhalb des Hauptwertes zusätzliche Informationen anzuzeigen. Damit kannst du z. B. Trends, Statuswerte oder Detailinformationen zu deiner KPI hervorheben.

 subtitle: {
    color: "",
    iconName: "",
    value: "",
    description: ""
     }

Parameter	Typ	Pflicht	Beschreibung	Beispiel
`color`	Text	❌	Legt die Text- und Icon-Farbe für den Subtitle fest. Unterstützt Hex- oder CSS-Farben.	`"#3b82f6"`
`iconName`	Text	❌	Icon für den Subtitle. Wird links neben dem Wert angezeigt. Wird aus dem aktiven Icon-Set aus dem User Cockpit gezogen.	`"truck"`
`value`	Text	❌	Der zusätzliche Wert, der im Subtitle angezeigt wird.	`cnt(lagerbuchungen[Buchungsart = 1])`
`description`	Text	❌	Eine kurze Beschreibung oder Erläuterung für den Wert.	`"neue Lieferungen"`

Beispiel

arcComponentKpiFocus({
        uniqueId: "KPI Focus Component " + Nr,
        items: [{
                id: 1,
                title: "Lagerbestand",
                iconName: "buildings",
                value: text(sum(lager.sum_lagerbestand)),
                subtitle: {
                    color: "#3b82f6",
                    iconName: "truck",
                    value: cnt(lagerbuchungen[Buchungsart = 1 and week('Erstellt am') = week(today())]),
                    description: "neue Lieferungen"
                }
            }, {
                id: 2,
                title: "Warenwert",
                iconName: "coins",
                value: text(sum(lager.vk_wert_buchungen)),
                subtitle: {
                    color: "green",
                    iconName: "arrow-up-bold",
                    value: text(sum(lagerbuchungen[Buchungsart = 2 and year('Erstellt am') = year(today())].vk_wert)),
                    description: " dieses Jahr"
                }
            }, {
                id: 3,
                title: "Buchungen",
                iconName: "swap",
                value: text(cnt(lagerbuchungen)),
                subtitle: {
                    color: "red",
                    iconName: "warehouse",
                    value: "+ " + cnt(lagerbuchungen[Buchungsart = 2]),
                    description: " diese Woche"
                }
            }, {
                id: 4,
                title: "Mitarbeiter",
                iconName: "users",
                value: text(cnt(mitarbeiter)),
                subtitle: {
                    color: "#3b82f6",
                    iconName: "users",
                    value: cnt(mitarbeiter['Berechtigt zur Lagerbewegung' = true]),
                    description: "Berechtigung zur Lagerbewegung"
                }
            }]
    })