Files
upstream-mirror e7da97194a
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s
snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)
2026-09-17 23:28:13 +05:00

170 lines
5.0 KiB
Plaintext

---
title: Widgets
description: Erkunden Sie die Widget-Typen und Visualisierungsoptionen in Twenty.
---
import { ChartIcon } from '/snippets/chart-icon.mdx';
## Verfügbare Widgets
Twenty bietet verschiedene Widget-Typen, um Ihre CRM-Daten zu visualisieren.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Balkendiagramme</span>
Stellen Sie Daten als horizontale oder vertikale Balken dar.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Balkendiagramm" />
</Frame>
**Am besten geeignet für:**
* Vergleich von Werten über Kategorien hinweg
* Ranglisten anzeigen
* Kennzahlen nach Zeitraum verfolgen
**Beispielverwendung:**
* Deals nach Phase
* Umsatz nach Vertriebsmitarbeitern
* Hinzugefügte Kontakte pro Monat
<Note>
**Anzeigegrenzen**: Balkendiagramme können maximal 100 Balken anzeigen sowie bei Verwendung von Group By 50 Gruppen pro Balken. Wenn Sie die Warnung "Nicht angezeigte Daten: max. X Balken pro Diagramm" sehen, fügen Sie Filter hinzu, um Ihre Daten einzugrenzen, oder ändern Sie die Gruppierung (z. B. nach Woche statt nach Tagen).
</Note>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Tortendiagramme</span>
Zeigen Sie Anteile eines Ganzen.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Tortendiagramm" />
</Frame>
**Am besten geeignet für:**
* Zusammensetzung oder Verteilung anzeigen
* Teile mit dem Ganzen vergleichen
* Wichtige Segmente hervorheben
**Beispielverwendung:**
* Deal-Verteilung nach Quelle
* Kontaktaufschlüsselung nach Branche
* Pipeline-Zusammensetzung nach Eigentümer
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Liniendiagramme</span>
Stellen Sie Trends im Zeitverlauf dar.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Liniendiagramm" />
</Frame>
**Am besten geeignet für:**
* Veränderungen im Zeitverlauf verfolgen
* Trends erkennen
* Mehrere Kennzahlen vergleichen
**Beispielverwendung:**
* Monatlicher Trend der Anzahl der Deals
* Umsatzwachstum über Quartale
* Aktivitätsniveau im Zeitverlauf
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Aggregierte Diagramme</span>
Zeigen Sie einzelne Kennzahlen prominent an.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Aggregiertes Diagramm" />
</Frame>
**Am besten geeignet für:**
* KPIs hervorheben
* Summen oder Durchschnitte anzeigen
* Schnelle Statusprüfungen
**Beispielverwendung:**
* Gesamtwert der Pipeline
* Anzahl offener Chancen
* Konversionsrate
**Erweiterte Optionen:**
* **Verhältnis**: Berechnen Sie für Select-Felder Verhältnisse zwischen Werten. Gehen Sie zu **Angezeigte Daten** → wählen Sie Ihr Feld → aktivieren Sie die Option **Verhältnis**.
* **Präfix & Suffix**: Fügen Sie benutzerdefinierten Text vor oder nach der Zahl hinzu (z. B. "$"-Präfix oder "%"-Suffix) für eine bessere Lesbarkeit.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
Betten Sie externe Tools und Inhalte direkt in Ihr Dashboard ein.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-table.png" alt="Tabellendiagramm" />
</Frame>
**Am besten geeignet für:**
* Suche nach einzelnen Elementen
* Überprüfung exakter Werte
* Prüfung oder Referenz
**Beispielverwendung:**
* Deals, die diesen Monat abgeschlossen werden
* Neue Leads in dieser Woche
* Überfällige Rechnungen
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="table" />Tabelle</span>
Sieh dir gefilterte Datensätze direkt in deinem Dashboard an.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
</Frame>
**Am besten geeignet für:**
* Externe Berichte oder Dashboards anzeigen
* Vertriebstools von Drittanbietern integrieren
* Live-Inhalte aus anderen Systemen anzeigen
**Anwendungsbeispiele:**
* Kennzahlen aus Ihrem Support-Tool
* Kennzahlen aus Ihrem Dialer
* Live-Inhalte aus Ihrem Tool für Sales-Sequenzen
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Rich-Text</span>
Fügen Sie formatierten Text und Inhalte direkt zu Ihrem Dashboard hinzu.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Rich-Text" />
</Frame>
**Am besten geeignet für:**
* Kontext oder Anweisungen hinzufügen
* Dashboard-Beschreibungen
* Notizen und Anmerkungen
**Funktionen:**
* Rich-Text-Formatierung (fett, kursiv, Listen usw.)
* Bild- und Dateiuploads
* Bearbeitung im Markdown-Stil
<Note>
**Bald verfügbar**: Tachometerdiagramme sind noch nicht verfügbar, stehen aber auf unserer Roadmap.
</Note>
### Widgets duplizieren
1. Klicken Sie auf das Widget
2. Öffnen Sie **Optionen**
3. Klicken Sie auf **Widget duplizieren**