DokumentationAEM 6.5Benutzerhandbuch

Gestalten eines adaptiven Formulars do-not-publish-style-your-adaptive-form

Last update: Sun Mar 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erfahren Sie, wie Sie ein benutzerdefiniertes Design erstellen, individuelle Komponenten gestalten und Web Fonts in einem Design verwenden.

hero-image

Dieses Tutorial ist ein Teil der Serie Erstellen Ihres ersten adaptives Formulars. Adobe empfiehlt, der Reihe chronologisch zu folgen, um den gesamten Anwendungsfall des Tutorials zu verstehen, auszuführen und praktisch zu erleben.

Über das Tutorial about-the-tutorial

Mithilfe von Designs können Sie ein adaptives Formular mit einem unverwechselbaren Erscheinungsbild und Stil versehen. Sie haben die Möglichkeit, im adaptiven Formulareditor vorkonfigurierte Designs anzuwenden oder eigene benutzerdefinierte Designs zu erstellen. AEM Forms bietet einen Design-Editor zum Erstellen benutzerdefinierter Designs. Über ein einziges Design kann ein und dasselbe adaptive Formular verschiedene Erscheinungsbilder erhalten, je nachdem, ob es auf einem Mobilgerät, Tablet oder Desktop geöffnet wird. CSS- oder LESS-Vorkenntnisse sind für die Nutzung des Design-Editors zwar nicht erforderlich, aber wünschenswert.

Am Ende des Tutorials sollten Sie zu Folgendem in der Lage sein:

  • Anwenden eines vorkonfigurierten Designs auf ein adaptives Formular
  • Erstellen eines Designs für ein adaptives Formular mit dem Design-Editor
  • Gestalten einzelner Komponenten
  • Bonusabschnitt: Verwenden von Web Fonts in einem benutzerdefinierten Design

Ihr Formular sollte nach Abschluss des Tutorials etwa wie folgt aussehen:

Formular mit einem benutzerdefinierten Thema

Bevor Sie beginnen before-you-start

Laden Sie die unten bereitgestellten Header-Stile und Logobilder auf Ihren lokalen Computer herunter. Die Kopfzeile des adaptiven Formulars shipping-address-add-update-form verwendet die kopfzeilenartigen und Logo-Bilder. Das kopfzeilenartige Bild erscheint auf der rechten Seite der Kopfzeile.

Datei abrufen

Datei abrufen

Schritt 1: Anwenden eines Designs auf Ihr adaptives Formular step-apply-a-theme-to-your-adaptive-form

Der Editor für adaptive Formulare bietet mehrere vorkonfigurierte Designs. Wenn Sie keinen benutzerdefinierten Stil für Ihr adaptives Formular verwenden möchten, können Sie Ihre adaptiven Formulare auch mit einem der vorkonfigurierten Designs veröffentlichen. Designs sind unabhängig von adaptiven Formularen. Sie können dasselbe Design auf mehrere adaptive Formulare anwenden.

So wenden Sie ein Design auf Ihr adaptives Formular an:

  1. Öffnen Sie das adaptive Formular zum Bearbeiten.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Öffnen Sie die Eigenschaften des Containers für adaptive Formulare. Navigieren Sie im Eigenschaften-Browser zu Allgemein > Adaptives Formulardesign. Das Feld Adaptives Formulardesign listet alle vordefinierten und benutzerdefinierten Designs auf. Standardmäßig wird das Canvas-Design angewendet.

  3. Wählen Sie ein Design aus dem Feld Adaptives Formulardesign aus, z. B. für Umfragen. Wählen Sie aem_6_3_forms_save aus, damit Sie das ausgewählte Design anwenden können.

    Adaptives Formular mit dem Standarddesign

    Abbildung: Adaptives Formular mit dem Standard-Design

    Adaptives Formular mit dem Umfragedesign

    Abbildung: Adaptives Formular mit dem Umfragedesign

Schritt 2: Aktualisieren Ihres adaptiven Formulars step-update-your-adaptive-form

Das oben angezeigte Design erfordert Änderungen am Platzhaltertext und Logo des vorhandenen adaptiven Formulars.

So aktualisieren Sie Ihr adaptives Formular:

  1. Ändern Sie das vorhandene Logo und den Text in der Kopfzeile. So entfernen Sie das Logo:

    1. Öffnen Sie das Formular im Formulareditor.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Wählen Sie das Logo-Bild in der Komponente Kopfzeile und anschließend cmppr Eigenschaften aus. Wählen Sie in der Eigenschaft Bild das X aus, um das vorhandene Logo-Bild zu entfernen.

    3. Wählen Sie Hochladen, „logo.png“ und dann  aem_6_3_forms_save aus, um die Änderungen zu speichern. Das Bild wurde im Abschnitt Bevor Sie beginnen heruntergeladen.

    4. Wählen Sie den Kopfzeilentext, We.Retail und anschließend  aem_6_3_edit Bearbeiten aus. Ändern des Kopfzeilentextes in we retail. Anwenden der Fettformatierung nur auf wein we retail.

      we-retail-logo-text

  2. Entfernen Sie Titel und fügen Sie Platzhaltertext hinzu:

    1. Wählen Sie das Feld „Kunden-ID“ und anschließend cmppr „Eigenschaften“ aus.

    2. Kopieren Sie den Inhalt des Felds Titel in das Feld Platzhaltertext.

    3. Löschen Sie den Inhalt des Felds Titel und wählen Sie aem_6_3_forms_save aus.

    4. Wiederholen Sie die vorherigen drei Schritte für alle Textfelder, das numerische Feld und das E-Mail-Feld im Formular.

      updated-adaptive-form

Schritt 3: Erstellen eines benutzerdefinierten Designs für Ihr adaptives Formular step-create-a-custom-theme-for-your-adaptive-form

Sie können den Design-Editor verwenden, um benutzerdefinierte Designs zu erstellen. Der Design-Editor ist ein leistungsstarker WYSIWYG-Editor. Er bietet eine visuelle Methode, um CSS auf verschiedene Komponenten eines adaptiven Formulars anzuwenden. Der Editor stellt genauere Steuerelemente zum Gestalten von Komponenten und Panels eines adaptiven Formulars bereit.

Ein Design ist eine separate Entität, so wie adaptive Formulare. Es enthält Stile (CSS) für die Komponenten und Panels eines adaptiven Formulars. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, wird der angegebene Stil auf die entsprechenden Komponenten eines adaptiven Formulars angewendet.

Im Rahmen dieses Tutorials gestalten Sie Kopf- und Fußzeilen, Text- und numerische Komponenten, Anhangskomponenten sowie Schaltflächen. Erstellen wir zunächst ein Design.

Erstellen von Designs create-a-theme

  1. Melden Sie sich bei der AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager > Formulare > Designs. Die Standard-URL lautet http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Wählen Sie  Erstellen  und dann Design aus. Die Seite Design erstellen mit den Feldern zum Erstellen eines Designs wird angezeigt. Die Felder Titel und Name sind obligatorisch.

    • Titel: Geben Sie einen Titel für das Design an. Zum Beispiel: Globales Design. Der Titel hilft Ihnen, das Design in der Liste der Designs zu identifizieren.
    • Name: Geben Sie den Namen des Designs an. Beispiel: Globales-Design. Im Repository wird ein Knoten mit dem angegebenen Namen erstellt. Wenn Sie mit der Eingabe des Titels beginnen, wird automatisch ein Wert für das Feld „Name“ vorgeschlagen. Sie können den vorgeschlagenen Wert gegebenenfalls ändern. Im Feld „Name“ dürfen nur alphanumerische Zeichen, Bindestriche und Unterstriche eingegeben werden. Alle ungültigen Eingaben werden durch Bindestriche ersetzt.

  3. Wählen Sie Erstellen aus. Ein Design wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Wählen Sie Öffnen aus, um das neu erstellte Design in einer neuen Registerkarte zu öffnen. Das Design wird im Design-Editor geöffnet. Zum Festlegen des Designs verwendet der Design-Editor ein sofort einsatzbereites adaptives Formular, das mit AEM Forms mitgeliefert wird.

    Informationen zur Verwendung der Benutzeroberfläche des Design-Editors finden Sie unter Informationen zum Design-Editor.

  4. Wählen Sie  Design-Optionen theme-options > Konfigurieren aus. Wählen Sie im Feld Vorschauformular das adaptive Formular shipping-address-add-update-form, aem_6_3_forms_save und dann Speichern aus. Jetzt ist der Design-Editor konfiguriert, sodass Sie Ihr eigenes adaptives Formular anstelle des adaptiven Standardformulars benutzen können. Wählen Sie  Abbrechen aus, um zum Design-Editor zurückzukehren.

    custom-theme

    Abbildung: Design-Editor mit dem adaptiven Formular „shipping-address-add-update-form“

    create-a-theme

    Abbildung: Adaptives Formular mit dem Standardformular

Gestalten einer Kopf- und Fußzeile style-header-and-footer

Kopf- und Fußzeile bieten ein konsistentes und unverwechselbares Erscheinungsbild für ein adaptives Formular. Im Allgemeinen enthält die Kopfzeile das Logo und den Namen der Organisation, während die Fußzeile Copyright-Informationen enthält. Diese Angaben bleiben in unterschiedlichen Formularen einer Organisation identisch. So gestalten Sie die Kopf- und Fußzeile des adaptiven Formulars „shipping-address-add-update-form“:

  1. Navigieren Sie zur Option Kopfzeile > Text im Bedienfeld „Selektoren“. Das Bedienfeld „Selektoren“ befindet sich auf der linken Seite des Design-Editors. Wenn das Bedienfeld nicht sichtbar ist, wählen Sie  toggle-side-panel – „Seitliches Bedienfeld ein/aus“ aus.

  2. Legen Sie die folgenden Eigenschaften im Akkordeon  Text fest und wählen Sie aem_6_3_forms_save aus.

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Eigenschaft Wert
    Schriftfamilie Arial®
    Schriftfarbe FFFFFF
    Schriftgrad 54 px

  3. Wählen Sie das Widget Kopfzeile und dann Kopfzeile aus. Die Optionen zum Formatieren des Kopfzeilen-Widgets werden auf der linken Seite angezeigt. Erweitern Sie das Akkordeon  Abmessungen und Position, legen Sie für die Höhe die Option 120px fest und wählen Sie aem_6_3_forms_save aus.

  4. Erweitern Sie das Akkordeon Hintergrund des Kopfzeilen-Widgets und legen Sie für die Hintergrundfarbe die Option F6921E. fest.

    Bewegen Sie den Mauszeiger über Bild und Verlauf > + Hinzufügen und wählen Sie  Bild aus. Legen Sie die folgenden Eigenschaften fest und wählen Sie aem_6_3_forms_save aus.

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Eigenschaft Wert
    image Laden Sie die Datei „header-style.png“ hoch. Das Bild wurde im Abschnitt Bevor Sie beginnen heruntergeladen.
    Position Rechts unten
    Kachelung Keine Wiederholung

  5. Wählen Sie im Design-Editor das Logo in der Kopfzeile und Kopfzeilen-Logo aus. Erweitern Sie das Akkordeon „Abmessungen und Position“, legen Sie die folgenden Eigenschaften fest und wählen Sie aem_6_3_forms_save aus.

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Rand Wert
    Rand
    • Oben: 1,5 rem
    • Unten: -35 px
    • Links: 1rem

    Tipp: Wählen Sie das Link-Symbol , um einen anderen Wert für jedes Feld anzugeben.

    Höhe 4.75 rem

  6. Wählen Sie das Fußzeilen-Widget und dann Fußzeile aus. Erweitern Sie das Akkordeon für den Hintergrund, legen Sie für die Hintergrundfarbe F6921E fest und wählen Sie aem_6_3_forms_save .

Gestalten der Datenerfassungskomponente und Anwenden eines Hintergrunds auf das adaptive Formular style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

Sie können mehrere Komponenten in einem adaptiven Formular verwenden, um Daten zu erfassen,  zum Beispiel ein Textfeld und ein numerisches Feld. Sie können für alle Datenerfassungskomponenten einen identischen Stil bereitstellen oder jeder Komponente einen eigenen Stil zuweisen.  In diesem Lernprogramm wird ein identischer Stil auf numerische Felder (Kunden-ID, Postleitzahl) und Textfelder (Kunden-ID, Name, Lieferadresse, Status, E-Mail) angewendet. So gestalten Sie die Datenerfassungskomponenten:

  1. Wählen Sie das Feld Kunden-ID und dann die Option Feld-Widget. Legen Sie die folgenden Eigenschaften fest und wählen Sie aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    Akkordeon Eigenschaft Wert
    Rahmen Rahmenfarbe A7A9AC
    Rahmen Rahmenradius
    • Oben: 7 px
    • Rechts: 7 px
    • Unten: 7 px
    • Links: 7 px
    Text Schriftfamilie Arial®
    Text Schriftfarbe 939598
    Text Schriftgrad 18 px
    Dimensionen und Position Breite 60%
    Dimensionen und Position Rand
    • Links: 10 rem

  2. Wählen Sie zunächst den leeren Bereich über dem Feld Kunden-ID und dann Container für responsives Panel. Legen Sie den Hintergrund > Hintergrundfarbe auf F1F2F2 fest. Wählen Sie aem_6_3_forms_save aus.

    Responsiver Panel-Container

Gestalten Sie die Schaltflächen style-the-buttons

Sie können ein benutzerdefiniertes Design verwenden, um allen Schaltflächen des adaptiven Formulars einen identischen Stil zuzuweisen, bzw. einen Inline-Stil, um einen Stil einer bestimmten Schaltfläche zuzuweisen. So gestalten Sie die Schaltflächen:

  1. Wählen Sie die Schaltfläche Senden und dann Option aus. Legen Sie die folgenden Eigenschaften fest und wählen Sie  aem_6_3_forms_save aus.

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    Akkordeon Eigenschaft Wert
    Hintergrund Hintergrundfarbe F6921E
    Rahmen Rahmenfarbe F6921E
    Rahmen Rahmenradius
    • Oben: 7 px
    • Rechts: 7 px
    • Unten: 7 px
    • Links: 7 px
    Text Schriftfamilie Arial®
    Text Schriftfarbe FFFFFF
    Text Schriftgrad 18 px

  2. Wenden Sie das benutzerdefinierte Design „Globales Design“ auf Ihr adaptives Formular an. Wenn der Stil das adaptive Formular nicht widerspiegelt, bereinigen Sie den Browser-Cache und versuchen Sie es erneut.

    style-data-collection-components

Schritt 4: Gestalten einzelner Komponenten step-style-individual-components

Einige Stile gelten nur für eine bestimmte Komponente. Diese Komponenten werden im Editor für adaptive Formulare formatiert.

  1. Öffnen Sie Ihr adaptives Formular zum Bearbeiten. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Wählen Sie in der oberen Leiste die Option Stil.

    style-option

  3. Wählen Sie die Schaltfläche Anhängen und dann das Symbol aem_6_3_edit aus. Stellen Sie die folgenden Eigenschaften im Akkordeon Abmessungen und Position ein:

    table 0-row-2 1-row-2 2-row-2
    Eigenschaft Wert
    Fließkommazahl Linksbündig
    Breite 10%

  4. Wählen Sie die Option Von Behörden anerkannter Adressnachweis und dann das Symbol aem_6_3_edit aus. Legen Sie die folgenden Eigenschaften fest:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    Akkordeon Eigenschaft Wert
    Abmessungen und Position Gleitkomma Linksbündig
    Abmessungen und Position Breite 73%
    Abmessungen und Position Padding
    • Links: 10 px
    Abmessungen und Position Höhe 40 px
    Abmessungen und Position Rand
    • Rechts: 2 rem
    • Links: 10 rem
    Hintergrund Hintergrundfarbe FFFFFF
    Rahmen Rahmenbreite 1 px
    Rahmen Rahmenstil Durchgehend
    Rahmen Rahmenfarbe A7A9AC
    Rahmen Rahmenradius 7 px
    Text Schriftfamilie Arial®
    Text Schriftfarbe BCBEC0
    Text Schriftgrad 18 px
    Text Zeilenhöhe 2

  5. Wählen Sie die Schaltfläche Senden und dann das Symbol aem_6_3_edit  aus. Legen Sie die folgenden Eigenschaften fest:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Akkordeon Eigenschaft Wert
    Dimensionen und Position Fließkommazahl Rechtsbündig
    Dimensionen und Position Rand
    • Oben: 5 rem
    • Rechts: 14 rem
    • Unten: 20 px
    • Links: 20 px
    Hintergrund Hintergrundfarbe F6921E
    Rahmen Rahmenfarbe F6921E

    styled-adaptive-form-1

Schritt 5: Bonusabschnitt: Verwenden von Web Fonts in einem benutzerdefinierten Design step-bonus-section-using-web-fonts-in-a-custom-theme

Sie können verschiedene Schriftarten verwenden, um ein adaptives Formular zu entwerfen. Möglicherweise sind die Schriftarten, die zum Entwerfen des adaptiven Formulars verwendet werden, nicht auf allen Geräten vorhanden, auf denen das adaptive Formular angezeigt wird. Sie können einen Webfont-Dienst verwenden, um die benötigten Schriftarten auf dem Zielgerät bereitzustellen.

Adobe Fonts ist solch ein Webfont-Dienst. Sie können den Dienst mit adaptiven Formularen konfigurieren und verwenden. So verwenden Sie Adobe Fonts in einem adaptiven Formular:

  1. Durchsuchen Sie die Bibliothek mit Adobe-Schriftarten und wählen Sie die Schriftart, um Ihr Formular zu gestalten.
NOTE
Sie können Tags oder Filter hinzufügen, um die Liste der Schriftarten zu verfeinern.

  1. Klicken Sie auf die Schaltfläche </>, um die Familie zu einem Webprojekt hinzuzufügen, falls Sie eine Schriftart finden.

    select-font-from-font-library

    Der Bildschirm "Schriftarten zu einem Webprojekt hinzufügen"wird angezeigt.

    note note
    NOTE
    Sie können Ihrem Webprojekt nur Schriftarten hinzufügen, wenn die Schaltfläche </> verfügbar ist.

  2. Benennen Sie Ihr Webprojekt.

  3. Aktivieren Sie die Kontrollkästchen, um die Schriftgewichtung und -stile auszuwählen, die Sie einbeziehen möchten.

    Schriftartbibliothek hinzufügen

  4. Auswählen Klicks , um das Projekt zu erstellen.

  5. Kopieren Sie den Einbettungscode und die URL aus dem Bildschirm.
    Einbettungscode und URL

  6. Klicks Fertig , um das Webprojektfenster zu schließen.

  7. Melden Sie sich bei Ihrer AEM-Instanz an und navigieren Sie zur URL http://server:port/crx/de/index.jsp#

  8. Erstellen Sie eine Ordnerstruktur in CRXDE, beispielsweise /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Navigieren Sie zur neu erstellten clientlibs und fügen Sie den allowProxy und categories Eigenschaften.

  10. Navigieren Sie zu /apps/[fontslibrary]/[customlibrary(clientlibrary)] und erstellen Sie einen css-Ordner.

  11. Gehen Sie zum erstellten CSS-Ordner und erstellen Sie eine Datei. Erstellen Sie beispielsweise eine Datei als fonts.css und fügen Sie den Einbettungscode zusammen mit der URL ein.
    Ordnerstruktur

  12. Speichern Sie die Änderungen.

NOTE
Um die hinzugefügten benutzerdefinierten Schriftarten in einem adaptiven Formular zu verwenden, stellen Sie sicher, dass der Client-Bibliotheksname in der Client-Bibliothekskategorie entspricht dem in der Kategorieoption des Ordners clientlib angegebenen Namen.

Die eingeschlossenen Schriftarten sind jetzt für das adaptive Formular über die folgende benutzerdefinierte Schriftarten-Client-Bibliothek verfügbar.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2