Im Input Fields View hat jedes Input-Feld Einstellungen. Mit Title, Description und Variable name legst du fest, wie Nutzer das Input-Feld im Design-Generator verstehen und wie du seinen Wert in Expressions verwendest. Wie du ein Input-Feld anlegst, steht in Input-Feld erstellen: Text oder Bild änderbar machen.
Die Einstellungen öffnest du mit dem Zahnrad rechts im Input-Feld. Oben stehen Variable name, Title und Description (tooltip with more information), darunter die Einstellungen des Feldtyps. Mit Done schließt du sie.
Title
Der Title sagt Nutzern, wofür das Input-Feld da ist, zum Beispiel „Headline“ oder „Logo“. Sie sehen ihn im Design-Generator über dem Input-Feld.
- Du änderst den Title in den Einstellungen unter Title. Schneller geht es oben im Input-Feld: Klicke auf den Title und tippe einen neuen ein.
- Legst du ein Input-Feld für ein Element an, bekommt es je nach Feldtyp einen vorgegebenen Title: Edit Text, Select Text, Pick Color, Select Color, Upload Image, Select Image, Upload Logo, Select Value oder Toggle. Eine neue Input-Feld-Gruppe heißt New Group field.
- Instruction-Input-Felder, Collections und Input-Felder, die du mit Add field hinzufügst, starten ohne Title. Ist der Title leer, zeigt der Design-Generator über dem Input-Feld nichts an.
- Die Vorschau rechts im Input Fields View zeigt nur das Design, nicht das Formular. Teste den Title deshalb im Design-Generator.
Description
Die Description ist ein Hilfetext zum Input-Feld. Der Title benennt das Input-Feld, die Description gibt einen Tipp dazu, etwa „Nutze dein Querformat-Logo“. Du trägst sie in den Einstellungen unter Description (tooltip with more information) ein.
- Nutzer sehen im Design-Generator neben dem Title ein Fragezeichen. Fahren sie mit der Maus darüber, erscheint die Description als Tooltip.
- Das Fragezeichen erscheint nur, wenn das Input-Feld einen Title und eine Description hat. Bei einer Input-Feld-Gruppe erscheint es auch ohne Title. Lässt du die Description leer, erscheint kein Fragezeichen.
- In einem Instruction-Input-Feld erscheint die Description nicht als Tooltip, sondern als kleinere Textzeile unter der Anweisung.
- Im Input Fields View zeigt ein Fragezeichen rechts im Input-Feld, dass es eine Description hat.
Variable name
Jedes Input-Feld außer einer Input-Feld-Gruppe und einem Instruction-Input-Feld speichert seinen Wert in einer Variable. Über den Variablennamen nutzt du diesen Wert in Expressions. Heißt die Variable zum Beispiel headline, schreibst du in einer Expression einfach headline. Wie das genau geht, steht in Variablen.
Der Variablenname steht ganz oben in den Einstellungen unter Variable name. Den vorgegebenen Namen bildet Bluepic aus dem Feldtyp oder dem Element, zum Beispiel text2_text oder rectangle2_color. Meistens passt er. Benenne ihn um, wenn du dir einen Namen für Expressions leichter merken oder deine Variablen ordentlich halten willst.
So änderst du den Variablennamen:
- Klicke rechts neben dem Variablennamen auf den Stift.
- Gib den neuen Namen ein.
- Klicke auf das Häkchen, um ihn zu speichern, oder auf ×, um abzubrechen. Expressions und verbundene Input-Felder übernehmen den neuen Namen automatisch.
Für den Namen gelten diese Regeln:
- Er darf im Template nur einmal vorkommen. Er darf auch nicht so heißen wie eine Element-ID, eine Funktion oder
canvas. - Erlaubt sind Buchstaben, Ziffern,
_und$. Keine Leerzeichen und keine Ziffer am Anfang. - Wörter, die JavaScript selbst verwendet, etwa
class, sind nicht erlaubt. - In einer Collection muss der Name nur innerhalb dieser Collection einmalig sein.
Ist der Name ungültig oder schon vergeben, färbt er sich rot, und das Häkchen lässt sich nicht anklicken.
Mit dem Kopier-Button neben dem Stift kopierst du den Namen in die Zwischenablage. Die Meldung „Variable name copied to clipboard“ erscheint.