Formular ui-form

Demo Ausprobieren

Fügt der Benutzeroberfläche ein Formular hinzu, das hilft, mehrere Werte vom Benutzer bei Klick auf den Absenden-Button als Objekt in msg.payload zu sammeln.

Eigenschaften

Prop	Dynamic	Description
Gruppe		Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird.
Größe		Steuert die Breite des Buttons in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe.
Beschriftung	✓	Eine Beschriftung, die vor den Formularzeilen angezeigt wird.
Optionen	✓	Eine Liste der im Formular dargestellten Zeilen. Jede Zeile hat die folgenden Eigenschaften: Beschriftung: Eine Beschriftung, die in der Formularzeile angezeigt wird. Name: Der Name des Formularelements, der als Schlüssel im msg.payload-Objekt verwendet wird. Typ: Der anzuzeigende Eingabetyp. Optionen - text | multiline | password | email | number | checkbox | switch | date | time Erforderlich: Ob das Formularelement ausgefüllt werden muss, bevor das Formular abgeschickt werden kann.
Buttons		Der Text, der auf jedem der Formularbuttons angezeigt wird. Wenn der "Abbrechen"-Text leer bleibt, wird kein Abbrechen-Button angezeigt.
Zwei Spalten		Rendert das Formular als zweispaltiges Layout.
Zurücksetzen bei Absenden		Wenn aktiviert, wird das Formular nach dem Absenden in einen leeren Zustand zurückgesetzt.
Thema		Definiert, wie das Thema berechnet wird, das im `msg`-Objekt enthalten ist, wenn das Formular abgeschickt wird.
Dropdown-Optionen	✓	Diese Liste kann Optionen für mehrere Dropdown-/Auswahlfelder in einem einzigen Formular definieren.

Dynamische Eigenschaften

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures	Example Values
Beschriftung	msg.ui_update.label	String
Optionen	msg.ui_update.options	Array<Object>
Dropdown-Optionen	msg.ui_update.dropdownOptions	Array<{ dropdown: <string>, key: <string>, label: <string> }>
Klasse	msg.class	String

Formular-Daten ausfüllen

Wenn Sie Standardwerte festlegen oder Werte in Ihrem Formular vorab ausfüllen möchten, können Sie dies tun, indem Sie einen msg.payload-Wert übergeben. Dieser Wert sollte ein Objekt sein, wobei jeder Schlüssel den key eines Formularelements darstellt und der Wert den Standardwert für dieses Element darstellt.

Zum Beispiel, wenn Sie ein Formular mit einem "Text"-Feld vorab ausfüllen möchten, mit einem Namen, "first_name", können Sie die folgende msg übergeben:

msg.payload = {
    "first_name": "John"
}

Formularelemente definieren (Optionen)

Wenn Sie die Konfiguration für Ihr ui-form überschreiben und Details Ihrer Elemente bereitstellen möchten, nachdem Ihr Node-RED-Flow bereitgestellt wurde, können Sie dies tun, indem Sie einen msg.ui_update.options-Wert übergeben. Dieser Wert sollte ein Array von Objekten sein, wobei jedes Objekt ein Formularelement darstellt. Jedes Objekt sollte die folgenden Eigenschaften haben:

Element: Text

{
    "type": "text",
    "label": "Name",
    "key": "name",
    "required": true
}

Element: Mehrzeilig

{
    "type": "multiline",
    "label": "Name",
    "key": "name",
    "required": true,
    "rows": 4
}

Element: Passwort

{
    "type": "password",
    "label": "Passwort",
    "key": "password",
    "required": true
}

Element: E-Mail

{
    "type": "email",
    "label": "E-Mail-Adresse",
    "key": "email",
    "required": true
}

Element: Nummer

{
    "type": "number",
    "label": "Alter",
    "key": "age",
    "required": true
}

Element: Kontrollkästchen

{
    "type": "checkbox",
    "label": "Newsletter abonnieren",
    "key": "newsletter"
}

Element: Schalter

{
    "type": "switch",
    "label": "Benachrichtigungen aktivieren",
    "key": "notifications"
}

Element: Datum

{
    "type": "date",
    "label": "Geburtsdatum",
    "key": "dob",
    "required": true
}

Element: Zeit

{
    "type": "time",
    "label": "Geburtszeit",
    "key": "tob",
    "required": true
}

Element: Dropdown

{
    "type": "dropdown",
    "label": "Dropdown",
    "key": "selection"
}

Dropdown-Optionen definieren

Wenn Sie die Konfiguration für Ihr ui-form überschreiben und Details Ihrer Dropdown-Optionen bereitstellen möchten, nachdem Ihr Node-RED-Flow bereitgestellt wurde, können Sie dies tun, indem Sie einen msg.ui_update.dropdownOptions-Wert übergeben. Dieser Wert sollte ein Array von Objekten sein, wobei jedes Objekt ein Dropdown-Element darstellt. Jedes Objekt sollte die folgenden Eigenschaften haben:

[{
    "dropdown": "Dropdown-Name",
    "value": "1",
    "label": "Option 1"
}]

Beispiel

Beispiel eines gerenderten Formulars in einem Dashboard.