Öffnen Sie das App Projekt Mailadressen per Doppelklick.

Eine neu angelegtes App Projekt verfügt bereits über diverse Standard-Elemente. Diese werden Ihnen nun im Projekt-Editor angezeigt.

Öffnen Sie das Referenzmodell - entweder per Doppelklick oder über das Kontextmenü Optionen > Öffnen per Rechtsklick auf das Element.

Die Basis jeder App ist ein Prozess. Das Referenzmodell der App enthält daher bereits einen einfachen Prozess in drei Schritten: Prozess startet - Schritt 1 (mit Formular Schritt 1) - Prozess endet.

Im Referenzmodell wird nun das Formular erstellt, in dem die Daten zu Vorname, Nachname und Mailadresse eingegeben werden können.

Öffnen Sie dazu das Formular Schritt 1.

 

Das Formular enthält bereits einen vordefinierten Bereich, der folgende Elemente enthält:

Am rechten Rand der Arbeitsfläche finden Sie die Leiste Neue Elemente, über die Sie zusätzliche Formularfelder per Drag & Drop auf die Arbeitsfläche ziehen können.

Die Elemente sind in vier Kategorien eingeteilt:

  • Allgemein
  • Komplex
  • App-spezifisch
  • Strukturierend

Klicken Sie auf eine Kategorie, um die zugehörigen Elemente anzuzeigen.

Weitere Feldeigenschaften für das jeweils aktive Element (rot umrandet) können Sie über die Sidebar Editieren festlegen.

Hier können Sie zum Beispiel den Namen des Elementes ändern, definieren, ob es ein Pflichtfeld sein soll und vieles mehr.

Benennen Sie das vorhandene Eingabefeld Text Element um in Vorname.

Erstellen Sie weitere Eingabefelder für Nachname und Mailadresse.

Kennzeichnen Sie das Eingabefeld  Mailadresse als Pflichtfeld.

Soll das Eingabefeld Nachname so angezeigt werden wie das Feld Vorname, wählen Sie in der Sidebar Editieren die Option Name im Feld anzeigen aus.

Verwenden Sie das vorhandene Blockelement für Ihre eigene Überschrift. Der Name des Blockelements ist für den App-Anwender nicht sichtbar, nur sein Inhalt.

Um Inhalt im Blockelement einzugeben, aktivieren Sie den Editiermodus des Feldes über den Button . Tragen Sie den HTML-Code direkt im Feld ein:

<h1>Mailadresse erfassen</h1>

Bestätigen Sie die Eingabe mit OK. Anschließend deaktivieren Sie den Editiermodus mit einem Klick auf .


Um die Größe des Blockelementes anzupassen, klicken Sie auf und ziehen Sie das Feld entsprechend auf.

Führen Sie das Modell mit dem Play-Button aus. Beim Abspielen wird nur das aktuelle Modell getestet.

In einem Pop-up-Fenster wird Ihnen die Formular-Ansicht angezeigt.

Per Klick auf die entsprechenden Icons können Sie zwischen der Anzeige auf einem Desktop, einem Tablet oder einem Smartphone wechseln und so alle Ansichten testen.

Anschließend schließen Sie das Pop-up-Fenster.

Im Formular-Editor können Sie nun weitere Anpassungen vornehmen.

Ist ihr Formular fertig, navigieren Sie im Editor zurück zum App Projekt.

Verwandte Themen:
Related Documentation:


  • No labels