# 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 ist, dass Sie in Benutzerdefinierten Widgets

## Grundprinzip

Ein benutzerdefiniertes Widget besteht aus mehreren Modulen. Sie können so viele dieser Module wie Sie möchten 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
* 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 eines benutzerdefinierten Widgets mit 3 Modulen</p></figcaption></figure>

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

### Schritt 1 – Ein benutzerdefiniertes Widget erstellen

Folgen Sie diesen Schritten, 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“&#x20;

   ▷ 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 erscheint später in der Titelleiste des Widgets
6. Klicken Sie auf „Bestätigen“&#x20;

   ▷ 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 setzen</td><td>Klicken Sie hier, um Testdaten festzulegen.<br>Ausführlicher erklärt unter -> Testdaten setzen</td></tr><tr><td><strong>[H]</strong></td><td>Alarmdaten</td><td>Wenn dieses Kästchen aktiviert ist, werden die Alarme des Assets, das unter „Primäres Asset“ definiert wurde, im Widget angezeigt.<br><br>Das „Primäre Asset“ wird festgelegt, wenn Sie die Konfiguration des benutzerdefinierten Widgets abgeschlossen haben und es dem 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.&#x20;

   ▷ 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&#x20;

   ▷ Das **Vorschau \[E]** des Widgets wird mit dem neuen Modul aktualisiert.&#x20;

   ▷ Das **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 ausführliche 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 Speichern-Schaltfläche \[D] klicken! (siehe Abb. 1)!

Stellen Sie sicher, dass Sie auf die Schaltfläche **\[J]** für das jeweilige Modul klicken. Andernfalls gehen die für das Modul vorgenommenen Einstellungen verloren.
{% endhint %}

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

1. Klicken Sie auf **\[F]**&#x20;

   ▷ 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.&#x20;

   ▷ Das Modul ist schwarz umrandet
2. Klicken Sie auf **\[L]**&#x20;

   ▷ Das Modul wird nach oben verschoben
3. Klicken Sie auf **\[M]**&#x20;

   ▷ 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.&#x20;

   ▷ Das Modul ist schwarz umrandet
2. Klicken Sie auf **\[N]**&#x20;

   ▷ Das Modul wird gelöscht

## Testdaten setzen

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

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

1. Stellen Sie sicher, dass Sie sich im Menüpunkt „Dashboards“ befinden
2. Klicken Sie in der Kontextleiste auf „Widgets“&#x20;

   ▷ 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 setzen \[G]**&#x20;

   ▷ Das Fenster „Testdaten“ erscheint (Abb. 5)
5. Nehmen Sie die gewünschten Einstellungen vor
6. Klicken Sie auf **Fortfahren \[S]**&#x20;

   ▷ 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 die Alarmstufe 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: Hohe Alarmstufe / Titelleiste [T] wird rot</li><li>2: Mittlere Alarmstufe / Gelbes Symbol im Widget-Symbol [U]</li><li>3: Niedrige Alarmstufe / Grünes Symbol im Widget-Symbol [U]</li></ul></td></tr><tr><td><strong>[Q]</strong></td><td>Zeitspanne</td><td>Wirkt nur für bestimmte Module, z. B. Trends.<br><br>Ändert die Skalierung von Trends; der gleiche Effekt wird erzielt, wenn <strong>[V]</strong> gedrückt wird.</td></tr><tr><td><strong>[R]</strong></td><td>Anzahl der Assets</td><td>Wirkt nur für bestimmte Module, z. B. Donuts.<br><br>Simuliert, wie sich das Modul verändert, wenn ihm mehr 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>