Generieren einer HTML5-Vorschau eines XDP-Formulars

Beim Erstellen eines Formulars in AEM Forms Designer können Sie nicht nur die PDF-Wiedergabe eines Formulars, sondern auch eine HTML5-Wiedergabe davon in der Vorschau anzeigen. Sie können die Registerkarte HTML-Vorschau verwenden, um ein Formular anzuzeigen, wie es im Browser angezeigt werden wird.

Aktivieren Sie die HTML-Vorschau für XDP-Formulare in Designer

Um Designer für die Erstellung einer HTML-Vorschau für XDP-Formulare zu aktivieren, müssen Sie folgende Konfigurationen durchführen:

Konfigurieren des Apache Sling-Authentifizierungsdienstes
Abgesicherten Modus deaktivieren
Details zum AEM Forms-Server bereitstellen

Apache Sling Authentifizierungsdienst konfigurieren

Navigieren Sie zu https://'[server]:[port]'/system/console/configMgr in AEM Forms, wenn es unter OSGi ausgeführt wird oder
https://'[server]:[port]'/lc/system/console/configMgr in AEM Forms, wenn es unter JEE ausgeführt wird.
Wählen Sie die Konfiguration Apache Sling-Authentifizierungsdienst, um ihn im Modus „Bearbeiten“ zu öffnen.
Je nachdem, ob Sie AEM Forms unter OSGi oder JEE ausführen, müssen Sie Folgendes im Feld Authentifizierungsanforderungen hinzufügen:
- von AEM Forms für JEE
  - -/de/content/xfaforms
  - -/etc/clientlibs
- AEM Forms on OSGi
  - -/de/content/xfaforms
  - -/etc/clientlibs/fd/xfaforms
HINWEIS

Kopieren Sie nicht den angegebenen Wert in das Feld „Authentifizierungsanforderungen“, das es die Sonderzeichen im Wert beschädigen kann. Geben Sie die stattdessen den spezifizierten Wert in das Feld ein.
Geben Sie einen Benutzernamen und ein Kennwort für Anonymer Benutzername und Anonymes Benutzerkennwort ein. Die angegebenen Anmeldeinformationen werden verwendet, um anonyme Authentifizierung zu nutzen und Zugriff auf anonyme Benutzer zuzulassen.
Klicken Sie auf Speichern, um die Konfiguration zu speichern.

Deaktivieren des abgesicherten Modus

Der abgesicherte Modus ist standardmäßig aktiviert. Behalten Sie dies in Produktionsumgebungen bei. Sie können ihn in Entwicklungsumgebungen deaktivieren, um eine HTML5-Vorschau in Designer anzuzeigen. Gehen Sie wie folgt vor, um ihn zu deaktivieren:

Melden Sie sich bei der AEM-Web-Konsole als Administrator an.
- URL für AEM Forms unter OSGi: https://'[server]:[port]'/system/console/configMgr
- URL für AEM Forms unter JEE: https://'[server]:[port]'/lc/system/console/configMgr
Öffnen Sie Mobile Forms-Konfigurationen für die Bearbeitung.
Wählen Sie die Option Abgesicherter Modus und klicken Sie auf Speichern.

Angeben von Details zum AEM Forms-Server

Navigieren Sie in Designer zu Werkzeuge > Optionen.
Wählen Sie im Fenster „Optionen“ die Seite Serveroptionen, stellen Sie die folgenden Details bereit und klicken Sie auf OK.
- Server URL: AEM Forms-Server URL.
- HTTP-Portnummer: AEM-Server-Port. Der Standardwert ist 4502.
- HTML-Vorschaukontext: Pfad des Profils, der für die Wiedergabe der XFA-Formulare verwendet wird. Die folgenden Standardprofile werden verwendet, um das Formular in Designer in der Vorschau anzuzeigen. Sie können außerdem den Pfad zu einem benutzerdefinierten Profil angeben.
  - /content/xfaforms/profiles/default.html (AEM Forms on OSGi)
  - /lc/content/xfaforms/profiles/default.html (AEM Forms on JEE)
- Forms Manager Context: Kontextpfad, an dem die Forms Manager-Benutzeroberfläche bereitgestellt wird. Die Standardwerte lauten:
  - /aem/forms (AEM Forms on OSGi)
  - /lc/forms (AEM Forms on JEE)
HINWEIS

Stellen Sie sicher, dass der AEM Forms-Server läuft. Die HTML-Vorschau stellt eine Verbindung zum CRX-Server her, um eine Vorschau zu erzeugen.

AEM Forms Designer-Optionen
Um ein Formular in HTML in der Vorschau anzuzeigen, klicken Sie auf die Registerkarte HTML-Vorschau.
HINWEIS
- Wenn die Registerkarte für die HTML-Vorschau geschlossen ist, drücken Sie F4, um sie zu öffnen. Sie können die HTML-Vorschau auch über das Menü „Ansicht“ wählen, um die betreffende Registerkarte zu öffnen.
  - Die HTML-Vorschau unterstützt keine PDF-Dokumente. Die HTML-Vorschau ist nur für XDP-Dokumente vorgesehen.
VORSICHT

Um das tatsächliche Benutzererlebnis zu testen, sollten Sie Ihre Formulare auch in externen Browsern (Google Chrome, Microsoft Edge, Mozilla Firefox usw.) ausprobieren. Jeder Browser verwendet eine andere Engine zum Rendern von HTML, sodass es einige Unterschiede in der Vorschau eines Formulars in Designer und einem externen Browser geben kann.

So zeigen Sie die Vorschau eines Formulars mit Musterdaten an

Sie können Ihr Formular in Designer mit Hilfe von Muster-XML-Daten testen und in der Vorschau anzeigen. Es wird empfohlen, das Formular häufig mit Musterdaten zu testen, um sicherzustellen, dass es richtig wiedergegeben wird.

Falls Ihnen keine Musterdaten vorliegen, können Sie sie von Designer erstellen lassen oder auch selbst erstellen. (Siehe So generieren Sie automatisch Musterdaten für die Vorschau eines Formulars und So erstellen Sie Musterdaten für die Vorschau eines Formulars.)

Durch Testen Ihres Formulars mit Hilfe von Musterdaten können Sie sicherstellen, dass die Daten und Felder zugeordnet werden und dass sich wiederholende Teilformulare erwartungsgemäß wiederholt werden. Sie können ein ausgeglichenes Formularlayout erstellen, das den jeweiligen Objekten genügend Platz zur Anzeige der zusammengeführten Daten bietet.

Wählen Sie Datei > Formulareigenschaften.
Klicken Sie auf die Registerkarte Vorschau und geben Sie im Feld „Datendatei“ den vollständigen Pfad zu einer Testdatendatei ein. Sie können auch auf die Schaltfläche „Durchsuchen“ klicken, um zur gewünschten Datei zu gelangen.
Klicken Sie auf OK. Wenn Sie das nächste Mal eine Vorschau des Formulars auf der Registerkarte HTML-Vorschau anzeigen, werden die Datenwerte der XML-Musterdatei in den entsprechenden Objekten dargestellt.

Formulare in einem Repository in der Vorschau anzeigen

In AEM Forms können Sie die Formulare und Dokumente in einem Repository in der Vorschau anzeigen. Mithilfe der Vorschau können Sie genau sehen, wie die Formulare aussehen und wie sie von Endbenutzern verwendet werden.