> For the complete documentation index, see [llms.txt](https://docs.buildings.ability.abb/collection/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildings.ability.abb/collection/german/plattform/live-cockpit/widgets/custom-widgets.md).

# Benutzerdefinierte Widgets

Mit *Benutzerdefinierte Widgets*, können Sie Ihre eigenen Widgets erstellen, die genau auf Ihre Bedürfnisse zugeschnitten sind. Der Vorteil gegenüber vorkonfigurierten Widgets besteht darin, dass Sie in benutzerdefinierten Widgets

## Grundprinzip

Ein benutzerdefiniertes Widget besteht aus mehreren Modulen. Sie können beliebig viele dieser Module zu einem Widget zusammenstellen. Außerdem können Sie die einzelnen Module im Detail anpassen.

In Abb. 1 sehen Sie ein Beispiel für ein benutzerdefiniertes Widget, das aus den folgenden Modulen besteht (von oben nach unten):

* Analogtrend
* Heatmap
* Donut

<figure><img src="https://3489494878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9GvUpaatBiReR43XFSMg%2Fuploads%2Fg5IspMURYAzHueVUZgWi%2FEB7B22ED-1352-44F5-9EB6-C53486537AA1.png?alt=media&#x26;token=9ae5011-2635-4752-9cb4-657edd29cf75" alt="" width="188"><figcaption><p>Abb. 1: Eine Vorschau für ein benutzerdefiniertes Widget mit 3 Modulen</p></figcaption></figure>

## Schritt für Schritt: Ein benutzerdefiniertes Widget erstellen

### Schritt 1 – Ein benutzerdefiniertes Widget erstellen

Führen Sie die folgenden Schritte aus, um ein „leeres“ benutzerdefiniertes Widget zu erstellen.

1. Stellen Sie sicher, dass Sie sich im Menüpunkt „Dashboards“ befinden
2. Klicken Sie in der Kontextleiste auf „Widgets“\
   ▷ Die Widget-Auswahl öffnet sich
3. Klicken Sie auf das benutzerdefinierte Widget
4. Geben Sie einen Namen ein
5. Wählen Sie ein Symbol aus. Dieses Symbol erscheint später in der Titelleiste des Widgets
6. Klicken Sie auf „Bestätigen“\
   ▷ Das neue Widget wurde erstellt

### Schritt 2 – Das neue Widget anpassen

Nachdem das Widget in Schritt 1 erstellt wurde, können Sie die ersten Anpassungen vornehmen.

<div data-full-width="true"><figure><img src="https://3489494878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9GvUpaatBiReR43XFSMg%2Fuploads%2FUMFopMQFtogiCh9UHviY%2FE78E66A2-A811-4513-BC3D-AB642F164C39.png?alt=media&#x26;token=6f3d819f-917c-4d2d-895d-5a5e18c30004" alt=""><figcaption><p>Abb. 2:</p></figcaption></figure></div>

<table data-full-width="true"><thead><tr><th width="62.333333333333314"></th><th width="147.5999755859375"></th><th></th></tr></thead><tbody><tr><td><strong>[A]</strong></td><td>Zurück/Abbrechen</td><td>Zurück zur Widget-Übersicht, <strong>ohne</strong> zu speichern.</td></tr><tr><td><strong>[B]</strong></td><td>Name</td><td>Den Namen können Sie hier nachträglich anpassen.</td></tr><tr><td><strong>[C]</strong></td><td>Symbol</td><td>Das Symbol können Sie hier nachträglich anpassen.</td></tr><tr><td><strong>[D]</strong></td><td>Speichern</td><td>Eingaben speichern.</td></tr><tr><td><strong>[E]</strong></td><td>Vorschau</td><td>Eine Vorschau darauf, wie das erstellte Widget aussehen wird.</td></tr><tr><td><strong>[F]</strong></td><td>Modul hinzufügen</td><td>Klicken Sie hier, um dem Widget Module hinzuzufügen.</td></tr><tr><td><strong>[G]</strong></td><td>Testdaten festlegen</td><td>Klicken Sie hier, um Testdaten festzulegen.<br>Ausführlicher erklärt unter -> Testdaten festlegen</td></tr><tr><td><strong>[H]</strong></td><td>Alarmdaten</td><td>Wenn dieses Kästchen aktiviert ist, werden die Alarme des unter „Primäres Asset“ definierten Assets im Widget angezeigt.<br><br>Das „Primäre Asset“ wird festgelegt, wenn Sie die Konfiguration des benutzerdefinierten Widgets abgeschlossen haben und es zum Dashboard hinzufügen. Siehe X</td></tr></tbody></table>

### Schritt 3 – Ein Modul hinzufügen

<div data-full-width="true"><figure><img src="https://3489494878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9GvUpaatBiReR43XFSMg%2Fuploads%2F592OnCGcLf1hxMEy9uRM%2F753B9218-81BD-45FC-9726-F1E771448519.png?alt=media&#x26;token=8cdd535c-0633-43b6-911c-64c8c94a1142" alt=""><figcaption><p>Abb. 3: Die Modulauswahl</p></figcaption></figure></div>

1. Klicken Sie auf **\[F]** um das erste Modul zum neuen Widget hinzuzufügen.\
   ▷ Die Modulauswahl (Abb. 3) erscheint
2. Bewegen Sie die Maus über ein Modul, um eine kurze Beschreibung anzuzeigen
3. Klicken Sie auf ein Modul, um es dem benutzerdefinierten Widget hinzuzufügen\
   ▷ Die **Vorschau \[E]** des Widgets wird mit dem neuen Modul aktualisiert.\
   ▷ Die **Moduloptionen \[I]** (Abb. 4) öffnen sich
4. Konfigurieren Sie das Modul im **Moduloptionen \[I]**
5. Klicken Sie auf das **Speichern** Button **\[J]** um die Einstellungen des Moduls zu speichern, oder klicken Sie auf **\[K]** um abzubrechen.

{% hint style="info" %}
Eine detaillierte Erläuterung der Konfigurationsoptionen für jedes Modul finden Sie im Kapitel [-> Module](/collection/german/plattform/live-cockpit/widgets/custom-widgets/modules.md)
{% endhint %}

<div data-full-width="true"><figure><img src="https://3489494878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9GvUpaatBiReR43XFSMg%2Fuploads%2Fm0bzqrqkn7BwYpRjjOoE%2F1F4F8BFC-8755-46B8-AB27-92B0C9DC98F7.png?alt=media&#x26;token=c1b09de9-2c7e-42d4-ad75-39bfdf328912" alt=""><figcaption><p>Abb. 4 – Modul mit Moduloptionen</p></figcaption></figure></div>

{% hint style="warning" %}
**NICHT** klicken Sie auf den oberen Speichern-Button \[D] (siehe Abb. 1)!

Achten Sie darauf, dass Sie auf den Button **\[J]** für das jeweilige Modul klicken. Andernfalls gehen die von Ihnen vorgenommenen Einstellungen für das Modul verloren.
{% endhint %}

### Schritt 4 – Weitere Module hinzufügen und anordnen

1. Klicken Sie auf **\[F]**\
   ▷ Die Modulauswahl (Abb. 3) öffnet sich.
2. Klicken Sie auf das Modul, das Sie dem Widget hinzufügen möchten
3. Gehen Sie wie in Schritt 3 beschrieben vor, um das neue Modul zu konfigurieren.

## Module neu anordnen

Sie können die Module innerhalb des benutzerdefinierten Widgets beliebig anordnen.

1. In der **Vorschau \[E]**, klicken Sie auf ein Modul.\
   ▷ Das Modul ist schwarz umrandet
2. Klicken Sie auf **\[L]**\
   ▷ Das Modul wird nach oben verschoben
3. Klicken Sie auf **\[M]**\
   ▷ Das Modul wird nach unten verschoben

## Module löschen

Sie können ein Modul aus dem benutzerdefinierten Widget löschen.

1. In der **Vorschau \[E]**, klicken Sie auf ein Modul.\
   ▷ Das Modul ist schwarz umrandet
2. Klicken Sie auf **\[N]**\
   ▷ Das Modul wird gelöscht

## Testdaten festlegen

Sie können simulieren, wie Ihr neues benutzerdefiniertes Widget aussehen wird, wenn es mit Daten gefüllt ist.

Verwenden Sie dazu die **Testdaten festlegen** Funktion **\[G]**

1. Stellen Sie sicher, dass Sie sich im Menüpunkt „Dashboards“ befinden
2. Klicken Sie in der Kontextleiste auf „Widgets“\
   ▷ Die Widget-Auswahl öffnet sich
3. Klicken Sie auf das benutzerdefinierte Widget, für das Sie Testdaten festlegen möchten
4. Klicken Sie auf **Testdaten festlegen \[G]**\
   ▷ Das Fenster „Testdaten“ erscheint (Abb. 5)
5. Nehmen Sie die gewünschten Einstellungen vor
6. Klicken Sie auf **Fortfahren \[S]**\
   ▷ Sie sehen die simulierten Daten in der **Vorschau \[E]**

{% hint style="info" %}
Die simulierten Daten beeinflussen nur die Vorschau des benutzerdefinierten Widgets.

Die simulierten Daten dienen nur dazu, einen besseren Überblick darüber zu geben, wie ein fertiges benutzerdefiniertes Widget aussehen wird.

Die simulierten Daten haben keinen Einfluss auf das benutzerdefinierte Widget, nachdem es erstellt und gespeichert wurde.
{% endhint %}

<figure><img src="https://3489494878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9GvUpaatBiReR43XFSMg%2Fuploads%2FCssn7OxO9bj0mxsyEAg8%2F377B309E-5B70-49A8-8F71-D40BB8A50104.png?alt=media&#x26;token=dae2a066-11d7-460f-8944-f3109de060ab" alt=""><figcaption><p>Abb. 5 – Fenster „Testdaten“</p></figcaption></figure>

<table data-full-width="true"><thead><tr><th width="58.133321126302064"></th><th width="116"></th><th></th></tr></thead><tbody><tr><td><strong>[O]</strong></td><td>Asset</td><td>Simuliert die Anzeige des Titels des Primär-Assets in der <strong>Titelleiste [T]</strong> (Abb. 6)</td></tr><tr><td><strong>[P]</strong></td><td>Alarm</td><td><p>Simuliert den Alarmpegel im <strong>Widget-Symbol [U]</strong> oder der <strong>Titelleiste [T]</strong> (Abb. 6)<br><br>Verfügbare Werte:</p><ul><li>0: Kein Alarm</li><li>1: Hoher Alarmpegel / Titelleiste [T] wird rot</li><li>2: Mittlerer Alarmpegel / Gelbes Symbol im Widget-Symbol [U]</li><li>3: Niedriger Alarmpegel / Grünes Symbol im Widget-Symbol [U]</li></ul></td></tr><tr><td><strong>[Q]</strong></td><td>Zeitraum</td><td>Nur bei bestimmten Modulen wirksam, z. B. Trends.<br><br>Ändert die Skalierung von Trends, der gleiche Effekt tritt ein, wenn <strong>[V]</strong> gedrückt wird.</td></tr><tr><td><strong>[R]</strong></td><td>Anzahl der Assets</td><td>Nur bei bestimmten Modulen wirksam, z. B. Donuts.<br><br>Simuliert, wie sich das Modul verändert, wenn ihm weitere Assets zugeordnet werden</td></tr><tr><td><strong>[S]</strong></td><td>Fortfahren</td><td>Eingaben übernehmen und das Fenster „Testdaten“ schließen</td></tr></tbody></table>

<figure><img src="https://3489494878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9GvUpaatBiReR43XFSMg%2Fuploads%2FErWQWGWZsguFkcZsSIB0%2FC6D0EF1E-4479-4472-A939-0FDE8C55E138.png?alt=media&#x26;token=d876f348-b30a-487e-978e-c13da8e02068" alt=""><figcaption><p>Abb. 6</p></figcaption></figure>


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.buildings.ability.abb/collection/german/plattform/live-cockpit/widgets/custom-widgets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.