Developer Kit · Components

KPI Focus

Kompakte KPI-Übersicht für Dashboards

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: <a href="https://www.arc-rider.de/documentation/custom-kpi-bar">KPI Bar</a>, <a href="https://www.arc-rider.de/documentation/custom-layout">Layout</a>, <a href="https://www.arc-rider.de/documentation/text">Text</a>, <a href="https://www.arc-rider.de/documentation/custom-icon">Icon</a>

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.

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.

<figure><table><tbody><tr><th>Parameter

</th><th>Typ

</th><th>Pflicht

</th><th>Beschreibung

</th><th>Beispiel

</th></tr><tr><td>id

</td><td>Zahl

</td><td>✅

</td><td>Eindeutige ID des KPI-Elements. Wird zur Unterscheidung der einzelnen KPIs genutzt.

</td><td>1

</td></tr><tr><td>title

</td><td>Text

</td><td>❌

</td><td>Titel, der oberhalb des Wertes angezeigt wird.

</td><td>"Lagerbestand"

</td></tr><tr><td>iconName

</td><td>Text

</td><td>✅

</td><td>Name des Icons aus der integrierten Icon-Bibliothek.

</td><td>"buildings"

</td></tr><tr><td>value

</td><td>Text

</td><td>✅

</td><td>Der Hauptwert, der in der KPI-Box angezeigt wird.

</td><td>text(sum(lager.sum_lagerbestand))

</td></tr><tr><td>subtitle

</td><td>Objekt

</td><td>❌

</td><td>Zusätzlicher Bereich unterhalb des Hauptwerts mit Detailinformationen. Siehe unten.

</td><td>Siehe subtitle-Struktur

</td></tr></tbody></table></figure>### 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.

<figure><table><tbody><tr><th>Parameter

</th><th>Typ

</th><th>Pflicht

</th><th>Beschreibung

</th><th>Beispiel

</th></tr><tr><td>color

</td><td>Text

</td><td>❌

</td><td>Legt die Text- und Icon-Farbe für den Subtitle fest. Unterstützt Hex- oder CSS-Farben.

</td><td>"#3b82f6"

</td></tr><tr><td>iconName

</td><td>Text

</td><td>❌

</td><td>Icon für den Subtitle. Wird links neben dem Wert angezeigt. Wird aus dem aktiven Icon-Set aus dem User Cockpit gezogen.

</td><td>"truck"

</td></tr><tr><td>value

</td><td>Text

</td><td>❌

</td><td>Der zusätzliche Wert, der im Subtitle angezeigt wird.

</td><td>cnt(lagerbuchungen[Buchungsart = 1])

</td></tr><tr><td>description

</td><td>Text

</td><td>❌

</td><td>Eine kurze Beschreibung oder Erläuterung für den Wert.

</td><td>"neue Lieferungen"

</td></tr></tbody></table></figure>## 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"
                }
            }]
    })