Components

KPI Focus

1.0.0

Order widget

Compact KPI Overview for 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).

With arcComponentKpiFocus(), you can display important key figures clearly and attractively directly in your Ninox dashboards. Each KPI box shows a main number with an icon and title, as well as an additional subtitle with further information – for example, trends, changes, or status messages.

The component is ideal for:

Dashboard overviews (e.g., orders, tasks, appointments)
Inventory and stock management
Team or project KPIs
Any other type of key figures that should be quickly and clearly understood

💡 Special features:

Freely configurable number of KPI elements
Individual icons and colors per KPI
Subtitle area for additional values and brief descriptions
Ideal to combine with other arcComponents and widgets for a consistent dashboard design

Predefined component: You don't have to worry about layout, colors, or icon design – just input your own data and get started right away.

Required widgets: KPI Bar, Layout, Text, Icon

Application Code

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

Parameters

uniqueId

Type: text
Required field: yes

The uniqueId is a unique identifier for the component. If you use the component multiple times on a page, you should generate the ID dynamically, for example with + Nr.

 uniqueId: "" + Nr,

items Block

The block items contains all KPI elements that should be displayed within the component. Each element in the array represents a single KPI box with title, icon, value, and an optional subtitle area.

With items, you can:

define as many KPIs as you like,
assign a unique icon and color to each KPI,
add additional information such as trends or status indicators via the subtitle.

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

Parameter	Type	Required	Description	Example
`id`	Number	✅	Unique ID of the KPI element. Used to differentiate between the individual KPIs.	`1`
`title`	Text	❌	Title displayed above the value.	`"Inventory"`
`iconName`	Text	✅	Name of the icon from the built-in icon library.	`"buildings"`
`value`	Text	✅	The main value displayed in the KPI box.	`text(sum(inventory.sum_inventory))`
`subtitle`	Object	❌	Additional area below the main value with detail information. See below.	See `subtitle` structure

subtitle Block

The block subtitle is optional and allows you to display additional information below the main value. This way, you can emphasize trends, status values, or detail information about your KPI.

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

Parameter	Type	Required	Description	Example
`color`	Text	❌	Sets the text and icon color for the subtitle. Supports hex or CSS colors.	`"#3b82f6"`
`iconName`	Text	❌	Icon for the subtitle. Displayed to the left of the value. Drawn from the active icon set in the user cockpit.	`"truck"`
`value`	Text	❌	The additional value displayed in the subtitle.	`cnt(inventory_entries[BookingType = 1])`
`description`	Text	❌	A short description or explanation for the value.	`"new deliveries"`

Example

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