Collection erstellen: Nutzer Einträge hinzufügen lassen

Im Input Fields View erstellst du mit einer Collection eine Liste, in die Nutzer im Design-Generator selbst Einträge hinzufügen, sie entfernen und umsortieren. Jeder Eintrag hat dieselben Input-Felder, zum Beispiel bei einer Teamliste Name, Rolle und Foto. Collections sind eine Funktion für Fortgeschrittene: Damit das Design mit der Liste wächst, richtest du selbst eine Wiederholung (Iteration) mit Expressions ein.

Das geht in vier Schritten:

1. Erstelle die Collection im Input Fields View.
2. Konfiguriere die Collection im Input Fields View.
3. Wiederhole ein Element für jeden Eintrag im Template-Editor.
4. Teste die Collection im Design-Generator.

Collection erstellen

Im Input Fields View siehst du alle Input-Felder deines Templates und konfigurierst sie.

1. Klicke oben rechts in der Toolbar auf Input Fields. Der Input Fields View öffnet sich.
   
2. Klicke oben in der Leiste auf Collection. Eine leere Collection erscheint ganz unten in der Liste. In ihrem Kopf steht Collection (collection), in Klammern ihr Variablenname.
   Collection ist ausgegraut?

   Der Button funktioniert nur, wenn kein Input-Feld angehakt ist. Klicke auf jedes Kästchen mit Haken, um es zu leeren. Vorhandene Input-Felder ziehst du danach in die Collection.

   
   

Collection konfigurieren

1. Gib der Collection eine Überschrift: Klicke im Kopf der Collection auf Collection (collection) und tippe eine Überschrift ein, zum Beispiel „Team“. Nutzer sehen sie im Design-Generator über der Liste.
2. Füge die Input-Felder hinzu, die jeder Eintrag haben soll:
   • Für ein neues Input-Feld: Klicke unten in der Collection auf Add field und wähle einen Feldtyp, zum Beispiel Text. In seinem Kopf steht in Klammern sein Variablenname, etwa Text (text).
   • Für ein vorhandenes Input-Feld: Ziehe es an den drei Strichen links in seinem Kopf in die Collection. Sein Wert gilt danach für jeden Eintrag einzeln. Elemente, die du damit verbunden hattest, folgen ihm nicht mehr. Kommt sein Variablenname in der Collection schon vor, bekommt es einen neuen.
   
   Was du in diese Input-Felder einträgst, bekommt jeder neue Eintrag als Standardwert.
3. Klicke auf das Zahnrad rechts im Kopf der Collection. Die Einstellungen der Collection öffnen sich. Unter Variable name steht ihr Variablenname, zum Beispiel collection. Du brauchst ihn gleich im Design.
4. Gib bei Min number of input groups und Max number of input groups ein, wie viele Einträge Nutzer mindestens und höchstens haben dürfen. Standardmäßig sind es 0 und 128.
5. Klicke auf Done. Die Einstellungen schließen sich.
6. Klicke oben rechts auf ×, um den Input Fields View zu schließen. Du bist wieder im Template-Editor.

Element für jeden Eintrag wiederholen

Eine Collection wiederholt im Design nichts von allein. Im Template-Editor legst du fest, welches Element sich für jeden Eintrag wiederholt und welchen Wert des Eintrags es zeigt.

1. Klicke auf dem Canvas oder im Layers-Panel auf das Element, das sich für jeden Eintrag wiederholen soll. Das Properties-Panel zeigt seine Eigenschaften.
2. Klicke im Properties-Panel auf Iteration. Der Abschnitt klappt auf.
3. Klicke auf das Kästchen Enabled. Darunter erscheinen Length und Iteration Variable.
4. Gib bei Length den Variablennamen der Collection und .length ein, zum Beispiel collection.length. Das Element wiederholt sich jetzt so oft, wie die Collection Einträge hat.
   
5. Schau bei Iteration Variable nach dem Namen für den aktuellen Eintrag. Standardmäßig ist das i.
6. Gib im Properties-Panel in eine Eigenschaft des Elements eine Expression ein, die einen Wert des Eintrags liest, zum Beispiel collection[i].text. In einer Texteigenschaft wie Content schreibst du sie als ${collection[i].text}. Jede Wiederholung (Iteration) zeigt jetzt den Wert ihres eigenen Eintrags. Längere Expressions baust du bequemer im Expression-Editor, siehe Expression-Editor verwenden.
   

So setzt sich die Expression zusammen:

• collection ist der Variablenname der Collection.
• i ist die Iteration Variable. Sie steht für den Eintrag, zu dem die Wiederholung (Iteration) gehört.
• text ist der Variablenname des Input-Felds in der Collection. Du findest ihn in dessen Einstellungen unter Variable name.

Collection im Design-Generator testen

Der Design-Generator ist die Seite, auf der Nutzer dein Template ausfüllen und ihr Design exportieren können. Hier kannst du die Collection gefahrlos testen: Was du dort eingibst, ändert dein Template nicht dauerhaft.

1. Wenn du mit deinen Input-Feldern fertig bist, klicke oben rechts auf Share und dann auf Publish Template Link. Hast du das Template schon veröffentlicht, heißt der Menüpunkt Open Template Campaign. Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.
2. Klicke auf Copy URL und öffne den Link in einem neuen Browser-Tab. Der Design-Generator öffnet sich. Am Computer stehen links die Input-Felder, rechts das Design.
3. Klicke in der Collection auf Add entry. Ein neuer Eintrag mit den Input-Feldern der Collection klappt auf.
   Add entry oder das × eines Eintrags ist ausgegraut?

   Die Collection hat die höchste oder die niedrigste erlaubte Anzahl an Einträgen erreicht. Ändere die Grenzen in den Einstellungen der Collection bei Max number of input groups und Min number of input groups.

4. Gib in die Input-Felder des Eintrags etwas ein. Prüfe, ob die Wiederholung (Iteration) im Design den Wert zeigt.
5. Schau dir das Design mit keinem Eintrag, mit einem Eintrag und mit der höchsten erlaubten Anzahl an. Einträge entfernst du mit × in ihrem Kopf, ihre Reihenfolge änderst du an den drei Strichen. Prüfe, ob das Design in allen Fällen passt.