# Benutzerdefinierte Widgets

Mit *Benutzerdefinierten Widgets* können Sie eigene, genau auf Ihre Bedürfnisse zurechtgeschnittene Widgets erstellen. Der Vorteil gegenüber vorkonfigurierten Widgets ist, dass Ihnen in den Benutzerdefinierten Widgets  

## Grundprinzip

Ein Benutzerdefiniertes Widget besteht aus mehreren Modulen. Sie können beliebig viele dieser Module zu einem Widget zusammensetzen. Die einzelnen Module können Sie noch detailliert anassen.

In Abb. 1 sehen Sie ein Beispiel für ein Benutzerdefiniertes Widget bestehend aus folgenden Modulen (von oben nach unten):

* Analoger Trend
* Heatmap
* Donut

<figure><img src="https://content.gitbook.com/content/Nyvwhz1kEMXcHf4HLuZ8/blobs/E61anSE0ZsuZcOAj4EBQ/EB7B22ED-1352-44F5-9EB6-C53486537AA1.png" 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 Benutzerdefinertes Widget erstellen

### Schritt 1 – Benutzerdefiniertes Widget anlegen

Befolgen Sie die Schritte, um ein "leeres" Benutzerdefiniertes Widget anzulegen.

1. Vergewissern Sie sich, dass Sie sich im Menüpunkt "Dashboards" befinden
2. Klicken Sie in der Kontextleiste auf "Widgets"\
   ▷ Die Widgetauswahl öffnet sich
3. Klicken Sie auf Custom Widget
4. Geben Sie eine Namen ein
5. Wählen Sie ein Icon. Dieses Icon wird später in der Titelleiste des Widgets erscheinen
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://content.gitbook.com/content/Nyvwhz1kEMXcHf4HLuZ8/blobs/uGY0GgnllqSdiAEwBcvo/E78E66A2-A811-4513-BC3D-AB642F164C39.png" alt=""><figcaption><p>Abb. 2:</p></figcaption></figure></div>

<table><thead><tr><th width="122.33333333333331"></th><th width="182"></th><th></th></tr></thead><tbody><tr><td><strong>[A]</strong></td><td>Zurück/Abbrechen</td><td>Zurückkehren zur Widget-Übersicht, <strong>ohne</strong> zu speichern.</td></tr><tr><td><strong>[B]</strong></td><td>Name</td><td>Sie können hier den Namen nachträglich anpassen</td></tr><tr><td><strong>[C]</strong></td><td>Icon</td><td>Sie können hier das Icon 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, 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 einstellen</td><td>Klicken Sie hier, um Testdaten einzustellen. <br>Wird näher erläutert unter <a href="#testdaten-einstellen">-> Testdaten einstellen</a></td></tr><tr><td><strong>[H]</strong></td><td>Alarmdaten</td><td>Wenn dieses Häkchen aktiviert ist, werden im Widget die Alarme des Assets angezeigt, das unter "Primäres Asset" definiert wurde. <br><br>Das "Primäre Asset" wird angegeben, wenn Sie das Custom Widget fertig konfiguriert 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://content.gitbook.com/content/Nyvwhz1kEMXcHf4HLuZ8/blobs/resVAPIJM68kuOZmlTzS/753B9218-81BD-45FC-9726-F1E771448519.png" alt=""><figcaption><p>Bild 3: Die Modulauswahl</p></figcaption></figure></div>

1. Klicken Sie auf **\[F]**, um dem neuen Widget das erste Modul 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 Custom 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 in den **Moduloptionen \[I]**&#x20;
5. Klicken Sie auf die Schaltfläche **Speichern** **\[J]**, um die Einstellungen des Moduls zu speichern oder klicken Sie auf **\[K]**, um abzubrechen.

{% hint style="info" %}
Eine genaue Erklärung der Konfigurationsmöglichkeiten jedes Moduls finden Sie im Kapitel [-> Module](https://docs.buildings.ability.abb/collection/german-14.2-freezed/dokumentation/widgets/benutzerdefinierte-widgets/module)
{% endhint %}

<div data-full-width="true"><figure><img src="https://content.gitbook.com/content/Nyvwhz1kEMXcHf4HLuZ8/blobs/vKhhnvG13froc5aCzG7e/1F4F8BFC-8755-46B8-AB27-92B0C9DC98F7.png" alt=""><figcaption><p>Abb. 4 – Modul mit Moduloptionen</p></figcaption></figure></div>

{% hint style="warning" %}
Klicken Sie **NICHT** auf die obere Schaltfläche Speichern \[D] (siehe Bild 1)! \
\
Gehen Sie sicher, dass Sie auf die Schaltfläche **\[J]** beim jeweiligen Modul klicken. Andernfalls gehen die vorgenommenen Einstellungen des Moduls verloren.
{% endhint %}

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

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

## Module neu anordnen

Sie können Module innerhalb des Benutzerdefinierten Widgets beliebig anordnen.

1. Klicken Sie in der **Vorschau \[E]** auf ein Modul. \
   ▷ Das Modul wird schwarz umrandet
2. Klicken Sie auf **\[L]**\
   ▷ Das Modul wird nach oben bewegt
3. Klicken Sie auf **\[M]**\
   ▷ Das Modul wird nach unten bewegt

## Module löschen

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

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

## Testdaten einstellen

Sie können simulieren, wie Ihr neues Custom Widget aussehen wird, wenn es mit Daten gefüllt wurde.&#x20;

Nutzen Sie dafür die Funktion **Testdaten einstellen** **\[G]**

1. Vergewissern Sie sich, dass Sie sich im Menüpunkt "Dashboards" befinden
2. Klicken Sie in der Kontextleiste auf "Widgets"\
   ▷ Die Widgetauswahl öffnet sich
3. Klicken Sie auf das Benutzerdefinierte Widget, für das Sie Testdaten einstellen wollen
4. Klicken Sie auf **Testdaten einstellen** **\[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 für die Vorschau des Benutzerdefinierten Widgets.&#x20;

Die simulierten Daten dienen nur der besseren Übersicht, 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://content.gitbook.com/content/Nyvwhz1kEMXcHf4HLuZ8/blobs/8edFFYq4Uemgh4taU9B4/377B309E-5B70-49A8-8F71-D40BB8A50104.png" alt=""><figcaption><p>Abb. 5 – Fenster "Testdaten"</p></figcaption></figure>

<table><thead><tr><th width="97.33333333333331"></th><th width="188"></th><th></th></tr></thead><tbody><tr><td><strong>[O]</strong></td><td>Asset </td><td>Simuliert die Darstellung des Titels des Primären Assets in der <strong>Titelzeile [T]</strong> (Abb. 6)</td></tr><tr><td><strong>[P]</strong></td><td>Alarm</td><td><p>Simuliert die Alarmstufe im <strong>Widget-Icon [U]</strong> bzw. der <strong>Titelzeile [T]</strong> (Abb. 6)<br><br>Verfügbare Werte: </p><ul><li>0: Kein Alarm </li><li>1: Hohe Alarmstufe / Titelzeile [T] färbt sich rot</li><li>2: Mittlere Alarmstufe / Gelbes Symbol im Widget-Icon [U]</li><li>3: Niedrige Alarmstufe / Grünes Symbol im Widget-Icon [U]</li></ul></td></tr><tr><td><strong>[Q]</strong></td><td>Zeitspanne</td><td>Nur wirksam für gewisse Module, z.B. Trends.<br><br>Verändert die Skalierung von Trends, der selbe Effekt wird hervorgerufen, wenn <strong>[V]</strong> betätigt wird. </td></tr><tr><td><strong>[R]</strong></td><td>Anzahl Assets</td><td>Nur wirksam für gewisse Module, z.B. Donuts.<br><br>Simuliert wie das Modul sich verändert, wenn mehr 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://content.gitbook.com/content/Nyvwhz1kEMXcHf4HLuZ8/blobs/mzYb7OP6ZFo1zCAMMZYE/C6D0EF1E-4479-4472-A939-0FDE8C55E138.png" alt=""><figcaption><p>Abb. 6</p></figcaption></figure>