---
title: "KPI Focus"
slug: "kpi-focus"
category: "Components"
hosts: "ninox"
---

# KPI Focus

# Kompakte KPI-Übersicht für Dashboards

![](https://framerusercontent.com/images/HI2EdFNTyBNJVfddUlOkVk442M.png)

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](https://www.arc-rider.de/documentation/custom-kpi-bar), [Layout](https://www.arc-rider.de/documentation/custom-layout), [Text](https://www.arc-rider.de/documentation/text), [Icon](https://www.arc-rider.de/documentation/custom-icon) 

## Anwendungscode


```javascript
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

![](https://framerusercontent.com/images/X6ZMPiPuINt3bM4sjgBfTJGxDQ.png)


```javascript
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"
                }
            }]
    })
```