--- title: "Widgets" slug: "widgets" status: "update" updated: 2026-10-23T14:11:14Z published: 2026-10-23T14:11:14Z canonical: "support.tulip.co/widgets" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Widgets NOTE Not all widgets are available on all instances and subscription plans. Reach out to [support@tulip.co](mailto:suport@tulip.co) to enquire about enabling additional widgets. Widgets sind die Bausteine von Anwendungen. Widgets werden verwendet, um Informationen für Benutzer anzuzeigen, Daten von Benutzern zu sammeln und Triggerlogik auszuführen. Dutzende von Widgets können innerhalb einer App kombiniert werden, um App-Schritte zu konfigurieren und eine App-Oberfläche zu erstellen, die Ihren Prozess optimiert. ## Arten von Widgets ![Adding Input Widgets to Normal Steps_172566037](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Adding%20Input%20Widgets%20to%20Normal%20Steps_172566037.png) ### Schaltflächen-Widgets Eine Schaltfläche, die Text anzeigt und eine Aktion auslösen kann. Das Schaltflächen-Widget ist ein leeres Widget, das vollständig vom Benutzer konfiguriert werden kann. Die Widgets "Weiter", "Vorblättern", "Menü" und "Fertig stellen" enthalten Standardauslöser, um die App-Erstellung zu optimieren. **Schaltfläche** - Eine vollständig konfigurierbare Schaltfläche, die eine beliebige **Logik** auslösen kannVorherige - Wechselt zum letzten Schritt, bei dem der Benutzer war. **Menü** - Öffnet das Menü, in dem die Benutzer die App wechseln, die Sprache der App ändern und sich abmelden **könnenNächster** - Geht zum nächsten Schritt der App**weiterVervollständigen** - Führt eine App-Vervollständigung aus, die den Wert von App-Variablen speichert, und kehrt zum Startbildschirm der App zurück. Lesen Sie [hier](/r230/docs/how-to-use-buttons-in-apps) mehr über Schaltflächen-Widgets. ### Eingabe-Widgets Sammeln Sie Daten von Ihren Benutzern mit Eingabe-Widgets. Jedes Eingabe-Widget unterstützt verschiedene Arten von Variablen. Lesen Sie [hier](/r230/docs/input-widgets) mehr über Eingabe-Widgets. ### Text-Widgets Zeigen Sie statischen oder dynamischen Text an, einschließlich der Werte von Variablen, einfachen statischen Text und ganze Datensatzplatzhalter. ### Eingebettete Widgets Betten Sie mit eingebetteten Widgets Videos, CAD, Dokumente und vieles mehr in Ihre Anwendung ein. Lesen Sie [hier](/r230/docs/embedded-widgets) mehr über eingebettete Widgets. ### Kamera-Widgets Zeigen Sie Ihren Tulip Vision Kamera-Feed an oder scannen Sie Barcodes mit der Gerätekamera mit Kamera-Widgets. Lesen Sie mehr über Tulip Vision [hier](/r230/docs/vision). ### Benutzerdefinierte Widgets Wenn die Standard-Widgets nicht perfekt zu Ihren Bedürfnissen passen, können benutzerdefinierte Widgets erstellt werden, um so gut wie jeden Anwendungsfall zu erfüllen. Kombinieren Sie HMTL, JavaScript und CSS, um die Plattform umfangreich zu erweitern. Lesen Sie [hier](/r230/docs/custom-widgets-overview-1) mehr über benutzerdefinierte Widgets. ### **Symbole** Ziehen Sie Vektorbilder in Ihre Anwendung und ändern Sie die Größe, um Ihre Tulip-App mit Ihrer Marke in Einklang zu bringen. ## Widgets konfigurieren Sie können Widgets so konfigurieren, dass sie der gewünschten Form und Funktion am besten entsprechen. Verschiedene Widgets unterstützen unterschiedliche Konfigurationsoptionen. Diese Einstellungen können sich auf viele verschiedene Attribute von Widgets auswirken:- [Widget-Datenquellen](/r230/docs/widgets#widget-datasources) - z.B.: Welcher Text wird auf einer Schaltfläche angezeigt, welche Spalten einer Tabelle werden angezeigt? - z.B.: Wo soll der Wert einer Eingabe gespeichert werden, welche Tabelle soll angezeigt werden?- [Styling](/r230/docs/widgets#styling) - z.B.: Welche Farbe soll eine Schaltfläche haben, soll ein Textwidget **fett** oder *kursiv* dargestellt werden?- [Auslöser](/r230/docs/widgets#triggers) - z.B.: Was passiert, wenn ein Benutzer auf [Enter] klickt, was passiert, wenn ein Benutzer eine Zeile auswählt? **Um ein Widget zu bearbeiten, müssen Sie es auswählen.** 1. Wählen Sie ein Widget, das Sie konfigurieren möchten.2. Die **Registerkarte Widget** öffnet sich im Kontextfenster.![side pane](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Recording%202022-08-27%20at%2010.01.58%20AM.gif) ## Widget-Datenquellen Der für Widgets angezeigte Inhalt unterscheidet sich für verschiedene Widgets, aber der Prozess für die Zuordnung unterscheidet sich nicht. Die Einstellung **Datenquelle** definiert die Quelle des Widget-Inhalts. Wenn Sie Widgets zum ersten Mal hinzufügen, sind ihre Datenquellen nicht zugeordnet. ![Datasource mapping.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Datasource%20mapping.png) **Datenquellentyp** ist der allgemeine Typ der Quelle, der das Widget zugeordnet ist. Beispiele sind Variablen, Tabellendatensatzfelder, Maschinenattribute und andere. **Datenquelle** ist das spezifische Attribut innerhalb dieses Typs, dem das Widget zugeordnet ist. NOTE A warning icon appears in the corner of an input to indicate that no datasource is selected. ### Daten-Zuordnung **Bei Eingabe-Widgets** stellt die Datenquelle den Ort dar, an dem die Benutzereingabe gespeichert wird. Für alle anderen Widgets stellt die Datenquelle die Quelle der Daten dar, die das Widget anzeigt. Viele Widgets sind an Daten gebunden. Der Inhalt von Widgets kann durch dynamische Daten wie Tabellensätze oder Variablen gesteuert werden. [Eingabe-Widgets](/r230/docs/input-widgets) können auch dazu verwendet werden, Daten in [Variablen](/r230/docs/variables) oder Felder von Tabellendatensätzen einzutragen. Eingabe-Widgets sind mit ihrer Datenquelle lesend/schreibend verbunden, d.h. Änderungen in der Eingabe ändern den Wert der Datenquelle. Die meisten Widgets sind schreibgeschützt, d. h. sie können von dynamischen Daten gesteuert werden, haben aber keinen direkten Einfluss auf den Wert ihrer Datenquelle. ### Datengesteuerte Widgets Einige Widgets können aus dynamischen Daten gespeist werden. In den meisten dynamischen Widgets gibt die Einstellung *Datasource* an, welche Daten den Zustand des Widgets steuern.![image.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image%284%29.png) **FarbeAlle**Farbeigenschaften können entweder statisch oder dynamisch auf der Grundlage einer Variablen festgelegt werden. **VariableDer**Inhalt des Widgets Variable kann an den Wert einer beliebigen App-Variablen, einschließlich Farben, gebunden werden. Dieses Widget ändert sich dynamisch, wenn sich die Quellvariable ändert. **TabellendatensatzDas**Tabellendatensatz-Widget zeigt den aktuellen Wert eines ganzen Datensatzes oder eines einzelnen Feldes eines Tabellendatensatzes an. **Interaktive TabelleDas**interaktive Tabellen-Widget zeigt den aktuellen Status einer Tabelle an. ## Gestalten Sie können die folgenden Eigenschaften von Widgets bearbeiten, nachdem sie in Tulip hochgeladen wurden, und zwar im Kontextfenster auf der rechten Seite des Bildschirms. Die Optionen für das Styling variieren je nach Widget, aber die meisten Widgets haben die unten aufgeführten Optionen: - Schriftgröße - Schriftfarbe - Schriftart - Textausrichtung der Schaltfläche - Farbe der Schaltfläche - Größe - Drehung - Schlagschatten - Radius der Umrandung - Blinken ### Widget-Trigger Verschiedene Widgets haben ein bestimmtes Verhalten, das die Auslöserlogik bestimmt. ![image.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image%285%29.png) **Eingabe-WidgetsFür**alle Eingabe-Widgets gilt, dass ihre Trigger ausgeführt werden, wenn die Eingabe geändert wird.:::(Info) (NOTE) In the case of Number and Text input widgets, Triggers will fire on users clicking [Enter] ::: **Interaktive TabelleWenn**ein Benutzer eine Zeile auswählt, wird der entsprechende Trigger ausgelöst. Außerdem wird diese Zeile in den Platzhalter für den Tabellendatensatz geladen, der in der Widget-Einstellung *"Verknüpfter Datensatz"* festgelegt wurde. [Weitere Informationen über das interaktive Tabellen-Widget finden Sie hier](/r230/docs/what-is-an-interactive-table-widget). Warning For rows in the interactive table widget to be selectable, its *Linked Record* field must be tied to a table record placeholder. ## Weitere Lektüre - [Eingabe-Widgets](/r230/docs/input-widgets) - [Eingebettete Widgets](/r230/docs/embedded-widgets) - [Schaltflächen-Widgets](/r230/docs/how-to-use-buttons-in-apps)