Übersicht über benutzerdefinierte Widgets

Erstellen Sie Ihre eigenen Widgets in Tulip mit HTML, CSS und JavaScript

Benutzerdefinierte Widgets Übersicht

Erstellen Sie Ihre eigenen Funktionen in Tulip mit HTML, CSS und JavaScript. Widgets aus der Bibliothek sind hier verfügbar: https://tulip.co/library/?query=Widgets

Einführung

Die Elemente, die Sie per Drag-and-Drop in Ihre Anwendung ziehen, werden "Widgets" genannt. Das können Schaltflächen, Bilder, Eingabefelder und alles andere sein, was in der Symbolleiste verfügbar ist.

Benutzerdefinierte Widgets ermöglichen es Ihnen, Ihren eigenen Code zu schreiben und Ihre eigenen Widgets zu erstellen, die Sie dann per Drag-and-Drop in Ihre Anwendung ziehen und damit interagieren können. Mit dieser Fähigkeit können Tulip-Benutzer die Grenzen dessen, was in Tulip möglich ist, erweitern.

In diesem Artikel geben wir Ihnen einen kurzen Überblick darüber, wie benutzerdefinierte Widgets funktionieren.

Benutzerdefinierte Widgets - Grundlagen

Der Bildschirm für die Verwaltung von benutzerdefinierten Widgets befindet sich auf der Seite mit den Einstellungen Ihres Kontos. Hier können Sie Widgets erstellen und löschen. Der Editor für benutzerdefinierte Widgets ermöglicht es Ihnen, Ihren Widget-Code zu schreiben, Requisiten und Ereignisse zu erstellen und eine Vorschau Ihres Widgets anzuzeigen. Nachfolgend finden Sie ein Diagramm, das beschreibt, was Requisiten und Ereignisse sind:

Requisiten: Props sind Daten, die von benutzerdefinierten Widgets und Tulip-Anwendungen gemeinsam genutzt werden. Props werden im Anwendungseditor angezeigt und ermöglichen es dem Anwendungseditor auszuwählen, welche Variablen, Tabellendatensätze oder andere Informationen mit dem Prop verknüpft werden sollen.

Ereignisse: Ereignisse sind Signale, die Ihr Widget an Ihre Anwendung senden kann. Ereignisse ermöglichen es Ihrer Anwendung, mit einem Auslöser zu reagieren und können Informationen mit sich führen.

Auf benutzerdefinierte Widgets kann über die Auswahlliste Benutzerdefiniert im App-Editor zugegriffen werden.

Erstellen eines Widgets

:::(Warning) (Achtung) Nur Benutzer mit Zugriff auf die Kontoeinstellungen (Kontobesitzer) können auf die Benutzeroberfläche für die Bearbeitung benutzerdefinierter Widgets zugreifen:

Der Bildschirm des Widget-Editors ist in vier Abschnitte unterteilt. Der Code, den Sie im unteren linken Bereich eingeben, wird im Vorschaubereich angezeigt, sobald Sie in den Vorschaubereich klicken. Prop-Werte können zu Testzwecken direkt im Vorschaubereich geändert werden.

Spezielle Funktionen für die Interaktion mit Requisiten und Ereignissen.

Abrufen des Werts von Requisiten

:::(Warning) (Warnung) Es ist nicht garantiert, dass die von einem Widget verwendete Requisite geladen wird, bevor das Widget geladen wird. Daher sollten alle Requisiten, die mit Tabellendatensatzfeldern, Aggregationen oder anderen dynamischen Werten verbunden sind, eine Logik enthalten, um Fälle zu unterstützen, in denen sie zum Zeitpunkt des Ladens des Widgets null sind. Siehe diesen Abschnitt für Details über das Auslösen von Logik wenn sich eine Requisite ändert.
:::

//Ermitteln des Wertes einer Requisite getValue('Meine Requisite');``//Speichern der Requisite in einer Variablen let myVariable = getValue('Meine Requisite');

Etwas tun, wenn sich eine Requisite ändert

//Detwas tun, wenn sich ein Prop-Wert ändert getValue('Meine Prop', (internalVariable) => { doSomething(internalVariable); });

Den Wert einer Requisite setzen

//Wert einer Text-Prop auf 'hallo!' setzen setValue('Meine Text-Prop', 'hallo!');


//Wert eines Elements in einem Objekt setzen setValue('Meine Objekt-Prop', { 'Schlüssel im Objekt': 'neuer Wert' }); ```


### **Ein Ereignis auslösen**


````**Ein Ereignis aus** lösen fireEvent('event', *payload*); 


//Ereignis ohne Nutzlast auslösen fireEvent('Mein Ereignis');


//Ereignis mit Nutzlast auslösen fireEvent('Mein Ereignis', meineVariable); ```


## Beispielvideo zur Erstellung eines Widgets


![Video](https://www.youtube.com/embed/H08-W2M2Ypo?rel=0){height="576" width="1024"}




---


## **Importieren/Exportieren von Apps**


**Exportieren**


1. Wählen Sie in der Übersicht der benutzerdefinierten Widgets die 3 Punkte neben dem Widget, das Sie exportieren möchten.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477703991.png){height="" width=""}


1. Wählen Sie "Exportieren".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704053.png){height="" width="800"}


**Importieren**


1. Wählen Sie auf dem Übersichtsbildschirm für benutzerdefinierte Widgets die 3 Punkte oben.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704175.png){height="" width="800"}


1. Wählen Sie "Importieren".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704228.png){height="" width="350"}


1. Suchen Sie die .json-Datei des benutzerdefinierten Widgets.


## **Externe Bibliotheken aktivieren**


Externe Bibliotheken erweitern die Möglichkeiten von benutzerdefinierten Widgets. Externe Bibliotheken übernehmen einen Großteil der *schmutzigen* Arbeit, die beim Schreiben von HTML direkt in JavaScript anfällt. Externe Bibliotheken müssen für jedes Widget aktiviert werden, wenn Sie sie verwenden möchten.


1. Klicken Sie in Ihrem Widget auf das 3-Punkte-Menü in der Multifunktionsleiste.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684182.png){height="" width=""}


1. Wählen Sie "Externe Bibliothek aktivieren".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684247.png){height="" width="250"}


1. Wählen Sie die Erweiterung, die Sie aktivieren möchten.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684294.png){height="" width="450"}


Im Folgenden finden Sie eine grundlegende Beschreibung der Funktionen der einzelnen Erweiterungen, die sich in vielen Bereichen auszeichnen. 


* **jQuery** - Ermöglicht eine effizientere Auswahl von HTML-Elementen sowie deren Manipulation.
* **D3** - Der Goldstandard für die Visualisierung von Daten, eine steile Lernkurve, aber jede Menge Flexibilität.
* **Google Visualization -** Ein großartiges Tool, um, wie der Name schon sagt, Daten zu visualisieren.
* **javaascript-Ip-solver -** Ip solver ist eine externe Bibliothek, die komplexe Berechnungen zur Lösung von Gleichungen durchführen kann.
* **Lodash -** Lodash bietet eine Tonne von Werkzeugen, die Arbeit mit Javascript Datentypen einfacher zu machen.
* **ChartJS -** Über die einfachste grafische Bibliothek möglich mit Tonnen von Online-Ressourcen.
* **Moment -** Moment bietet Tonnen von Werkzeugen für die Arbeit mit Daten und Zeiten.