> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/metric-card-component.md).

# Metrikkarte-Komponente

Hebe einen wichtigen Wert auf einer Seite hervor.

Nutze eine **Metrikkarte**, um eine wichtige Zahl auf einer Seite hervorzuheben. Metrikkarten eignen sich für Summen, Anzahlen, Durchschnitte und andere zusammengefasste Werte.

Bevor du die Komponente hinzufügst, stelle sicher, dass du Folgendes hast:

* eine wichtige Kennzahl, die Nutzer zuerst sehen sollen
* eine Quelltabelle mit den zusammenzufassenden Datensätzen
* ein Feld, dessen Werte du mit der gewünschten Aggregation zusammenfassen kannst.

## Metrikkarte-Komponente hinzufügen

{% stepper %}
{% step %}
**Tab Hinzufügen öffnen**

Öffne im **Einstellungsbereich** den Tab **Hinzufügen**.
{% endstep %}

{% step %}
**Metrikkarte hinzufügen**

Ziehe die Komponente **Metrikkarte** aus **Ansichten** an die gewünschte Stelle auf der Seite.
{% endstep %}

{% step %}
**Komponente benennen**

Die **Bezeichnung** und der **Interne Name** werden automatisch erstellt. Du kannst sie unter **Einstellungen** bei Bedarf ändern.
{% endstep %}

{% step %}
**Quelle mit Konstant konfigurieren**

Unter **Quelle**:

* Lasse **Konstant** als Datenpunktoption ausgewählt.
* Wähle die **Tabelle**.
* Bestimme das zusammenzufassende **Feld**.
* Lege die **Aggregation** fest.
* Füge einen **Filter** hinzu, wenn du einen **Trend** anzeigen möchtest.
  {% endstep %}

{% step %}
**Anzeige anpassen**

Wähle das **Zahlenformat**. Füge bei Bedarf ein **Symbol** hinzu und aktiviere **Trend**. Ziehe die Komponente, um sie zu verschieben. Nutze die Anfasser, um ihre Größe anzupassen.

Um **Trend** zu aktivieren, füge zuerst dem Filter ein Datumsfeld hinzu.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Um eine Komponente zu entfernen, wähle sie aus und klicke im blauen Menü darüber auf <i class="fa-trash-can">:trash-can:</i> **Komponente löschen**.
{% endhint %}

## Einstellungen der Metrikkarte-Komponente

In **Einstellungen** legst du die grundlegenden Details fest:

* **Bezeichnung** zeigt den Titel der Komponente.
* **Interner Name** wird automatisch ausgefüllt. Ändere ihn nur bei Bedarf und mit Bedacht. Skripte verwenden den Internen Namen, nicht die Bezeichnung.

Unter **Allgemein** konfigurierst du das Verhalten der Karte:

* **Bei Klick** legt fest, was geschieht, wenn Nutzer die Karte anklicken.

Unter **Quelle** konfigurierst du den angezeigten Wert:

* **Datenpunkt** stellt die Datenbeschaffung ein. Verwende **Konstant**, um sie mit Steuerelementen zu konfigurieren oder **Logik**, um ein Ninox Skript zu verwenden.\
  \
  Wenn **Datenpunkt** auf **Konstant** gesetzt ist:
* **Tabelle** wählt die Quelltabelle.
* **Feld** wählt das zusammenzufassende Feld.
* **Aggregation** wählt **Anzahl**, **Summe**, **Durchschnitt**, **Median**, **Minimum** oder **Maximum**.\
  Nutze **Anzahl** für die Zahl passender Datensätze. Die anderen Aggregationen fassen Werte aus dem gewählten Feld zusammen.\
  \
  Wenn **Datenpunkt** auf **Logik** gesetzt ist:
* Füge in **Logik** das Ninox Skript hinzu, das die Daten abruft. Hier erwartet Ninox ein numerisches Ergebnis, zum Beispiel eine Summe, einen Durchschnitt oder Anteil.

Unter **Anzeige** konfigurierst du das Erscheinungsbild:

* **Zahlenformat** zeigt den Wert als **Zahl**, **Währung**, **Prozent** oder **Kompakt**.
* **Symbol** fügt der Karte ein Symbol hinzu.\
  \
  Wenn **Datenpunkt** auf **Konstant** gesetzt ist:
* **Trend** zeigt einen Trendindikator, wenn ein Datumsfilter festgelegt ist.\
  Wenn **Trend** aktiviert ist, legst du Folgendes fest:
  * **Zeitraum** bietet **Gestern**, **Letzte Woche**, **Letzter Monat** oder **Letztes Jahr**.
  * **Trendformat** bietet **Prozent** oder **Absoluter Wert**.
  * **Positiv** legt fest, ob ein Aufwärts- oder Abwärtstrend positiv bewertet wird.<br>

{% hint style="info" %}
Nutze für **Logik** unter **Datenpunkt** Ninox AI im [Funktionen des Logik-Editors](/ninox-scripting/de/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md), um ein Skript zu erstellen oder ein vorhandenes Skript erklären zu lassen.
{% endhint %}

#### **Schauen wir uns ein Beispiel an:**

Wenn du den Datenabruf über **Logik** ausführst, strukturiere das Skript so:

{% code lineNumbers="true" %}

```
sum((select termine where status = "erledigt").stunden)
```

{% endcode %}

Nutze Ninox AI mit folgendem Prompt, um ein solches Skript zu erstellen:\
"Zeige mir die insgesamt für alle Kunden geleisteten Arbeitsstunden."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/metric-card-component.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.