Übersicht über benutzerdefinierte Widgets
- 23 Jan 2025
- 4 Minuten zu lesen
- Mitwirkende
- Drucken
Übersicht über benutzerdefinierte Widgets
- Aktualisiert am 23 Jan 2025
- 4 Minuten zu lesen
- Mitwirkende
- Drucken
Artikel-Zusammenfassung
Fanden Sie diese Zusammenfassung hilfreich?
Vielen Dank für Ihr Feedback
Erstellen Sie Ihre eigenen Widgets in Tulip mit HTML, CSS und JavaScript
Restriction
This feature is only available for Professional plans and above.
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.
Mit benutzerdefinierten Widgets können Sie Ihren eigenen Code schreiben und Ihre eigenen Widgets 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.
Schauen Sie sich das folgende Übersichtsvideo an, um einen schnellen Einblick in diese Funktion zu erhalten:
Sehen Sie sich die benutzerdefinierten Widgets in der Tulip-Bibliothek an!
Grundlagen der benutzerdefinierten Widgets
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 den Anwendungseditoren, 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.
Benutzerdefinierte Widgets sind im App-Editor über die Auswahlliste Benutzerdefiniert zugänglich.
Ein Widget erstellen
Warning
Only users with access to account settings (Account Owners) can access the custom widget editing UI.
Der Bildschirm des Widgets-Editors ist in vier Abschnitte unterteilt. Der Code, den Sie im unteren linken Bereich schreiben, wird im Vorschaubereich angezeigt, sobald Sie in den Vorschaubereich klicken. Prop-Werte können zu Testzwecken direkt im Vorschaubereich geändert werden.
Für die Interaktion mit Requisiten und Ereignissen gibt es spezielle Funktionen.
Abrufen des Wertes von Requisiten
Warning
It is not guaranteed that the prop being used by a widget will load before that widget loads, so all props associated with Table record fields, Aggregations, or any other dynamic value should include logic to support cases where they are null at the point the widget is loaded. See this section for details on triggering logic when a prop changes.
//Ermitteln des Wertes einer Requisite getValue('Meine Requisite');``//Speichern der Requisite in einer Variablelet myVariable = getValue('Meine Requisite');
Etwas tun, wenn sich eine Requisite ändert
//Detwas tun, wenn sich ein Prop-Wert ändertgetValue('Meine Prop', (internalVariable) => { doSomething(internalVariable);});
Den Wert einer Requisite setzen
//Setzen des Wertes einer Text-Prop auf 'hallo!'setValue('Meine Text-Prop', 'hallo!');
//Wert eines Elements in einem Objekt setzensetValue('Meine Objekt-Prop', { 'Schlüssel im Objekt': 'neuer Wert' });```
### **Ein Ereignis auslösen**
**````Ereignis** auslösen fireEvent('event', *payload*);
//Ereignis ohne Nutzlast auslösenfireEvent('Mein Ereignis');
//Ereignis mit Nutzlast auslösenfireEvent('Mein Ereignis', meineVariable);````
Das folgende Diagramm veranschaulicht den Informationsfluss durch ein benutzerdefiniertes Widget in einer Anwendung. Die Daten der Eingangsvariablen werden in der Requisite gespeichert. Die Wertänderung signalisiert ein Ereignis, bei dem ein Trigger dann Daten in der Ausgangsvariablen speichert.
{height="" width=""}
## Beispiel für ein Video zur Erstellung eines Widgets
{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.
{height="" width=""}
1. Wählen Sie "Exportieren".
{height="" width="800"}
**Importieren**
1. Wählen Sie auf dem Übersichtsbildschirm für benutzerdefinierte Widgets die 3 Punkte am oberen Rand.
{height="" width="800"}
1. Wählen Sie "Importieren".
{height="" width="350"}
1. Suchen Sie die .json-Datei des benutzerdefinierten Widgets.
## **Aktivieren externer Bibliotheken**
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.
{height="" width=""}
1. Wählen Sie "Externe Bibliothek aktivieren".
{height="" width="250"}
1. Wählen Sie die Erweiterung, die Sie aktivieren möchten.
{height="" width="450"}
Hier ist eine grundlegende Beschreibung, was jede von ihnen tut, viele von ihnen zeichnen sich in vielen Bereichen, so fühlen sich frei zu erkunden.
* **jQuery** - ermöglicht eine effizientere Auswahl von HTML-Elementen sowie die Elementmanipulation.
* **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.
War dieser Artikel hilfreich?
