# 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):

* Analoger Trend
* Wärmekarte
* 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 eines benutzerdefinierten Widgets mit 3 Modulen</p></figcaption></figure>

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

### Schritt 1 – Ein benutzerdefiniertes Widget erstellen

Befolgen Sie diese Schritte, 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 Benutzerdefiniertes Widget
4. Geben Sie einen Namen ein
5. Wählen Sie ein Symbol aus. Dieses Symbol wird später in der Titelleiste des Widgets angezeigt
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 Widget-Übersicht zurückkehren, <strong>ohne</strong> zu speichern.</td></tr><tr><td><strong>[B]</strong></td><td>Name</td><td>Hier können Sie den Namen nachträglich anpassen.</td></tr><tr><td><strong>[C]</strong></td><td>Symbol</td><td>Hier können Sie das Symbol 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 Assets angezeigt, das unter „Primäres Asset“ definiert wurde, im Widget.<br><br>Das „Primäre Asset“ wird angegeben, 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
4. Konfigurieren Sie das Modul in den **Moduloptionen \[I]**
5. Klicken Sie auf das **Speichern** Schaltfläche **\[J]** um die Einstellungen des Moduls zu speichern, oder klicken Sie auf **\[K]** um abzubrechen.

{% hint style="info" %}
Eine detaillierte Erklärung der Konfigurationsoptionen für jedes Modul finden Sie im Kapitel [-> Module](https://docs.buildings.ability.abb/collection/german/plattform/live-cockpit/widgets/custom-widgets/modules)
{% 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** auf die obere Schaltfläche Speichern \[D] klicken (siehe Abb. 1)!

Stellen Sie sicher, dass Sie auf die Schaltfläche **\[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 nach Belieben anordnen.

1. In der **Vorschau \[E]**, klicken Sie auf ein Modul.

   ▷ Das Modul wird 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 wird 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 wurde.

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 wirken sich nur auf die Vorschau des benutzerdefinierten Widgets aus.

Die simulierten Daten dienen nur einem besseren Überblick darüber, 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ären Assets in der <strong>Titelleiste [T]</strong> (Abb. 6)</td></tr><tr><td><strong>[P]</strong></td><td>Alarm</td><td><p>Simuliert den Alarmlevel in der <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 Alarmlevel / Titelleiste [T] wird rot</li><li>2: Mittlerer Alarmlevel / Gelbes Symbol im Widget-Symbol [U]</li><li>3: Niedriger Alarmlevel / Grünes Symbol im Widget-Symbol [U]</li></ul></td></tr><tr><td><strong>[Q]</strong></td><td>Zeitraum</td><td>Nur für bestimmte Module wirksam, z. B. Trends.<br><br>Ändert die Skalierung von Trends; der gleiche Effekt wird verursacht, wenn <strong>[V]</strong> gedrückt wird.</td></tr><tr><td><strong>[R]</strong></td><td>Anzahl der Assets</td><td>Nur für bestimmte Module wirksam, z. B. Donuts.<br><br>Simuliert, wie sich das Modul verändert, wenn weitere Assets damit verknüpft 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.