Informationen zu Designs in AEM Forms

Mit Adobe Experience Manager Forms können Sie Designs erstellen und diese dann auf Formulare anwenden. Ein Design umfasst Formatierungsdetails für Komponenten und Bereiche und Sie können ein Design in verschiedenen Formularen wiederverwenden. Sie können die Stile für eine Komponente festlegen oder CSS-Eigenschaften für die verschiedenen Komponenten in Ihrer Anwendung ändern. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz und Größe. Sie können Anpassungen in einem Design speichern und diese als Voreinstellung auf Komponenten des Formulars übertragen. Wenn Sie das Design zu einem Formular hinzufügen, bestimmt der festgelegte Stil die entsprechenden Komponenten des Formulars.

Das Design wird entsprechend der Verwaltung anderer Assets im adaptiven Formular verwaltet. Design ist ein Asset, das unabhängig verwaltet werden kann (ohne einen Verweis auf ein adaptives Formular). Designs besitzen einen kompletten Lebenszyklus, der anderen adaptiven Formularelementen ähnelt.

Verwenden Sie Forms Manager für Folgendes:

  • Erstellen eines Designs
  • Bearbeiten/Kopieren eines vorhandenen Designs (Metadaten bearbeiten/Designdefinition)
  • Importieren/Exportieren eines vorhandenen Designs
  • Verwalten von Abhängigkeiten für das Design

Im Lieferumfang von AEM Forms sind Formularvorlagen enthalten, die mit Designs verknüpft sind. Diese Designs sind für Kunden sofort einsetzbar. Die folgenden Designs stehen für Kunden zur Verfügung: Umfrage, Registrierung einfach, Registrierung erweitert und Arbeitsfläche. Diese entsprechen den Formularvorlagen. Sie können diese verwenden, um Komponenten in Ihren Formularen mit Stilen zu versehen und die Darstellung des Formulars anzupassen. Die standardmäßig verfügbaren Designs können nicht bearbeitet werden. 

Hinweis:

Forms Manager handhabt die Metaeigenschaften für die Designdefinition und startet den Design-Editor, damit Sie die Formatierung ändern können.

Erstellen, Herunterladen und Hochladen eines Designs

Mit AEM Forms können Sie Designs erstellen, herunterladen und hochladen. Ein Design wird wie andere Assets erstellt, z. B. Formulare, Dokumente und Briefe. Das Design wird als separate Entität mit Metaeigenschaften wie Formulare gespeichert. Das Speichern von Designs als separate Entität ermöglicht die Wiederverwendung. Sie können ein Design erstellen, herunterladen und auf einer anderen Instanz hochladen, um es erneut zu verwenden. 

Erstellen eines Designs

Führen Sie die folgenden Schritte aus, um ein Design zu erstellen:

  1. Unter Experience Manager klicken Sie auf Formulare und dann auf Designs.
  2. Auf der Seite „Designs“ klicken Sie auf Erstellen > Design.
    Ein Assistent zum Erstellen eines Designs wird gestartet. 
  3. Geben Sie auf der Registerkarte „Einfach“ im Abschnitt „Eigenschaften hinzufügen“ des Assistenten „Design erstellen“ Titel und Name des Designs ein. Die Felder „Titel“ und „Name“ sind für die Designerstellung erforderlich.
  4. Auf der Registerkarte „Erweitert“ sind zwei Felder enthalten: 
    • Clientlib-Speicherort: Bietet einen Pfad-Browser zur Auswahl eines Speicherorts im Repository, wo die clientlibs für die neuen Designs gespeichert werden.
    • Clientlib-Kategorie: Bietet ein Textfeld zur Eingabe des gewünschten clientlib-Kategorienamen für das Design. 
  5. Klicken Sie auf Erstellen und dann auf Öffnen, um ein Design im Design-Editor zu öffnen, oder klicken Sie auf Fertig, um zur Seite mit den Designs zurückzukehren. 

Herunterladen eines Designs

Sie können Designs in AEM Forms exportieren und in anderen Projekten oder Instanzen verwenden. Mit AEM können Sie ein Design als ZIP-Datei herunterladen, die Sie in die Instanz hochladen können. 

So laden Sie ein Design herunter:

  1. In Experience Manager navigieren Sie zu Formulare > Designs.
  2. Auf der Seite „Designs“ verwenden Sie die Option Auswählen, um ein Design auszuwählen.
  3. Klicken Sie auf Herunterladen.
    Das Design wird als Zip-Paket heruntergeladen, das Sie freigeben können. 

Hochladen eines Designs

Sie können erstellte Designs mit Formatierungsvorgaben für Ihr Projekt verwenden. Sie können von Anderen erstellte Design-Pakete importieren, indem Sie diese in Ihr Projekt hochladen. 

So laden Sie ein Design hoch:

  1. In Experience Manager navigieren Sie zu Formulare > Designs.
  2. Auf der Seite „Designs“ klicken Sie auf Hochladen.
  3. In der Eingabeaufforderung zum Hochladen suchen Sie ein Designpaket auf Ihrem Computer, wählen es aus und klicken auf Hochladen.
    Das hochgeladene Design ist auf der Seite „Designs“ verfügbar. 

Metadaten eines Designs

Liste der Metaeigenschaften eines Designs (auf der Eigenschaftenseite eines Designs).

 

ID

 

Name Kann bearbeitet werden Beschreibung der Eigenschaft
1. Titel Ja Anzeigename des Designs.
2. Beschreibung Ja Beschreibung des Designs.
3. Typ Nein
  • Asset-Typ.
  • Wert ist immer „Design“.
4. Erstellt Nein Datum der Designerstellung
5. Verfassername Ja Verfasser des Designs. Berechnet zum Zeitpunkt der Designerstellung.
6. Datum der letzten Änderung Nein Datum, an dem das Design zuletzt geändert wurde.
7. Status Nein Status des Designs (Geändert/Veröffentlicht).
8. Veröffentlichungszeit Ja Zeitpunkt der automatischen Veröffentlichung des Designs.
9. Zeit für Rückgängigmachen der Veröffentlichung Ja Zeitpunkt, zu dem die Veröffentlichung des Designs automatisch rückgängig gemacht wird.
10. Tags Ja Eine Beschriftung am Design zur Kennzeichnung, um die Suche zu erleichern.
11. Verweise Links
  • Enthält den Abschnitt „Verweis von“. Listet Formulare auf, die das Design verwenden.
  • Da das Design nicht auf andere Assets verweist, gibt es den Abschnitt „Verweist“ nicht.
12. Clientlib-Speicherort Ja
  • Der benutzerdefinierte Pfad für das Repository innerhalb von „/etc“, wo die clientlibs für dieses Design gespeichert werden.
  • Standardwert - „/etc/clientlibs/fd/themes“ + relativer Pfad des Designassets.
  • Wenn der Speicherort nicht vorhanden ist, wird die Ordnerhierarchie automatisch generiert.
  • Wenn dieser Wert geändert wird, wird die clientlib-Knotenstruktur an den eingegebenen neuen Speicherort verschoben.
    Hinweis: Wenn Sie den Clientlib-Speicherort ändern, müssen Sie im CRXDE-Repository crx:replicate, rep:write, jcr:read an forms-users und crx:replicate, jcr:read anfd-service am neuen Speicherort zuweisen.
13. Clientlib-Kategoriename Ja
  • Der benutzerdefinierte clientlib-Kategoriename für dieses Design.
  • Ein Fehler wird angezeigt, wenn der Name bereits für ein vorhandenes Design verwendet wird.
  • Standardwert – berechnet mithilfe der Designspeicherorts.
  • Wenn dieser Wert geändert wird, wird der Name der Kategorie auf dem entsprechenden clientlib-Knoten aktualisiert. Das Aktualisieren des Clientlib-Kategorienamen in den JSP-Dateien ist nicht erforderlich, da der clientlib-Kategoriename als Referenz verwendet wird.

Informationen zum Design-Editor

Im Lieferumfang von AEM Forms ist der Design-Editor enthalten. Dabei handelt es sich um eine benutzerfreundliche Benutzeroberfläche für Geschäftskunden und Web-Designer/Entwickler mit Funktionen zur einfachen Festlegung der Formatierung für verschiedene adaptive Formularelemente.Wenn Sie ein Design erstellen, wird es als separate Entität wie Formulare, Dokumente, Briefe, Dokumentfragmente und Datenwörterbücher gespeichert.

Wenn Sie zu Experience Manager > Formulare und Dokumente > Designs navigieren, werden alle Designs, die Sie verwenden können, im Autorenmodus angezeigt. Wenn Sie ein Design auswählen und öffnen, wird es im Design-Editor geöffnet.

Mit dem Design-Editor können Sie Stile der in einem Design mit einem Stil versehenen Komponenten anpassen. Sie können festlegen, wie ein Formular auf einem Gerät angezeigt wird. 

Der Design-Editor ist in zwei Bereiche unterteilt: 

  • Arbeitsfläche – Wird auf der rechten Seite angezeigt. Hier wird ein Muster für ein adaptives Formular angezeigt, in dem alle Formatierungsänderungen sofort dargestellt werden. Sie können Objekte auch direkt auf der Arbeitsfläche auswählen, um verknüpfte Stile anzuzeigen und diese Stile zu bearbeiten. Das oben angezeigte Lineal für die Geräteauflösung bestimmt das Erscheinungsbild der Arbeitsfläche. Durch Auswahl eines Auflösungshaltepunktes auf dem Lineal wird die Vorschau des Beispielformulars für die jeweilige Lösung angezeigt. Die Arbeitsfläche wird nachfolgend detailliert beschrieben.
  • Seitenleiste – Wird auf der linken Seite angezeigt. Sie umfasst die folgenden Elemente:
    • Selektor: Zeigt die für die Formatierung ausgewählte Komponente an und die Eigenschaften, die Sie gestalten können. Ein Design ist die Information zur Formatierung eines Formulars an einer Stelle. Der Selektor stellt alle Komponenten eines bestimmten Typs dar. Wenn Sie eine Textfeld-Komponente in einem Design für die Formatierung auswählen, übernehmen alle Textfelder im Formular diesen Stil.
      Mit Selektoren können Sie eine Container-Komponente oder eine bestimmte Komponente gestalten. Angenommen das Formular enthält ein Feld, in das Benutzer ihre Adresse eingeben können. Sie können das Adressfeld selbst gestalten. Das Adressfeld ist ein Objekt, das ein Textfeldobjekt verwendet. In diesem Fall ist „Feld“ eine Container-Komponente, und „Textfeld“ ist eine bestimmte Komponente. Sie können die Komponente über die Seitenleiste suchen und auswählen oder auf der Arbeitsfläche.

      Eine Komponente wirkt sich auf alle Objekte aus, die unter deren Kategorie fallen. Ein bestimmter Objekttyp wirkt sich auf die Objekte einer bestimmten Kategorie aus. Angenommen das Formular enthält ein Feld, in das Benutzer ihr Alter eingeben können. Die Feldkomponente umfasst die Komponente „Numerisches Feld“. Wenn Sie die Feldkomponente im Design gestalten, übernehmen alle Feldobjekte die Formatierung, die Sie im Design festlegen. Wenn Sie die Komponente „Numerisches Feld“ im Design gestalten, wird ihr Stil nur für die Objekte für numerische Felder im Formular übernommen.

      Die Formatierung für Container-Komponente und bestimmte Komponenten bleiben unabhängig voneinander. Angenommen, Sie legen als Hintergrundfarbe für die Feldkomponente Blau fest. Alle Feldobjekte im Formular übernehmen die blaue Hintergrundfarbe, aber das bestimmte Objekt (Numerisches Feld oder Textfeld) innerhalb des Feldes bleibt unverändert. Alternativ können Sie als Hintergrundfarbe für die Komponenten „Numerisches Feld“ und „Textfeld“ Grün festlegen. Alle Objekte der Kategorie „Numerisches Feld“ und „Textfeld“ im Formular übernehmen die Hintergrundfarbe, aber die Feldobjekte, in denen sie enthalten sind, bleiben unverändert. Oder Sie legen Sie als Hintergrundfarbe für das Feld Blau, für das Textfeld Grün und für das numerische Feld Rot fest. Alle Feldobjekte übernehmen Blau, alle Textfelder übernehmen Grün und numerische Felder übernehmen Rot als Hintergrundfarbe.
    • Status: Hier können Sie die Formatierung eines Objekts in einem bestimmten Status anpassen. Beispielsweise können Sie festlegen, wie ein Objekt mit dem Status „Standard“, „Fokus“, „Deaktiviert“, „Mausberührung“ oder „Fehler“ aussieht.
    • Eigenschaftenkategorien: Formatierungseigenschaften sind in verschiedene Kategorien unterteilt. Beispiel: Abmessung und Position, Text, Hintergrund, Rahmen und Effekte.Unter jeder Kategorie geben Sie Informationen zur Formatierung an. Unter „Hintergrund“ können Sie z. B. „Hintergrundfarbe“ sowie „Bild und Verlauf“ angeben. 
    • Erweitert: Hier können Sie benutzerdefinierte CSS zu einem Objekt hinzufügen, wodurch die durch visuelle Steuerelemente definierten Eigenschaften überschrieben werden, wenn es zu einer Überlagerung kommt. 
    • CSS anzeigen: Ermöglicht das Anzeigen von CSS für die ausgewählte Komponente

    Zusätzlich befindet sich unten in der Seitenleiste ein Pfeil. Wenn Sie auf den Pfeil klicken, erhalten Sie zwei zusätzliche Optionen: Erfolg simulieren und Fehler simulieren. Diese Optionen werden zusammen mit den oben beschriebenen Optionen nachfolgend detailliert erläutert.

CSS-Generierungssequenz

Wenn Sie „CSS anzeigen“ wählen, sammelt der Design-Editor alle Styling-Informationen und erstellt ein CSS. Die Informationen werden in der folgenden Reihenfolge gesammelt:

  1. In der Standard-Client-Bibliothek des Designs definierte Stile
  2. Benutzerdefinierte Stile, die mithilfe der Eigenschaften in der Seitenleiste angegeben wurden
  3. Mithilfe der Option zur CSS-Überschreibung angegebene CSS-Stile 

Beispiel: Als Hintergrundfarbe eines Textfelds ist in der Standard-Client-Bibliothek Blau angegeben. Sie ändern dies mithilfe der Eigenschaften in der Seitenleiste in Rosa. Beim Generieren des CSS wird Rosa als Hintergrundfarbe des Textfelds verwendet. Nachdem Sie die Hintergrundfarbe mithilfe der Eigenschaften geändert haben, ändert ein anderer Autor die Hintergrundfarbe des Textfelds mithilfe der CSS-Überschreibungsoption in Weiß. Beim Generieren des CSS wird Weiß als Hintergrundfarbe festgelegt.   

Debugging von Stilen

Wenn Sie im Design-Editor Stile für Komponenten angeben, wird wie oben beschrieben ein CSS generiert. Wenn Sie eine Containerkomponente formatieren, werden die darin enthaltenen Komponenten ebenfalls formatiert. Bei Auswahl einer bestimmten Komponente, die in einer Containerkomponente enthalten ist, wird deren Stil übernommen. Beispiel: Angenommen, Sie wählen ein Widget „Feld“ aus, um es zu formatieren. Das Widget „Feld“ ist eine Containerkomponente mit einem Textfeld und einer Beschriftung. Wenn Sie das Widget „Feld“ formatieren, werden auch die Beschriftung und das Textfeld formatiert. Anschließend wählen Sie das Textfeld für die Formatierung aus. Für die Formatierung des Textfelds werden Informationen aus der Formatierung des Widgets „Feld“ sowie Eigenschaften des Textfelds selbst verwendet. Im Design-Editor stehen Optionen zur Verfügung, über die Sie das CSS anzeigen und Fehler in den Stilen beheben können, die Sie mithilfe der Eigenschaften der Seitenleiste angeben. 

Zum Anzeigen des generierten CSS stehen die folgenden Optionen zur Verfügung:

  • Option CSS anzeigen in der Seitenleiste: Wenn Sie eine Komponente im Design auswählen, wird die Option „CSS anzeigen“ in der Seitenleiste angezeigt. Sie ermöglicht die Anzeige des generierten CSS einschließlich CSS für ::before und ::after Pseudoelementen.
  • Option Design-CSS anzeigen in der Symbolleiste der Arbeitsfläche: Klicken Sie in der Symbolleiste der Arbeitsfläche auf Design-CSS anzeigen. Dadurch wird das gesamte Design-CSS angezeigt, das mithilfe der von Ihnen im Design-Editor definierten Eigenschaften generiert wurde. 
A. Seitenleiste B. Arbeitsfläche 

Formatieren von Formularkomponenten

Sie können ein Design in mehreren Formularen verwenden, wodurch die Formatierung der Formularkomponenten importiert wird, die Sie im Design angegeben haben.Sie können mehrere Komponenten in einem Formular formatieren, z. B. Titel, Beschreibungen, Bereiche, Felder, Symbole und Textfelder. Verwenden Sie Widgets zur Konfiguration von Eigenschaften der Formularkomponenten in einem Design. Vorkenntnisse im Umgang mit CSS oder LESS sind nicht erforderlich, obwohl Sie im Abschnitt „CSS-Überschreibung“ CSS-Code schreiben oder benutzerdefinierte Selektoren bereitstellen können. Der Abschnitt „CSS-Überschreibung“ wird angezeigt, wenn Sie eine Komponente in der Seitenleiste auswählen.

Angenommen, Sie arbeiten an drei Formularen. Sie möchten, dass das Feld, das nur numerische Werte akzeptiert, in allen drei Formularen einen grünen Hintergrund erhält. Sie können ein Design erstellen und in allen Formularen hinzufügen. Das Design überträgt die Formatierung auf alle Textfelder, die nur numerische Werte akzeptieren. Wenn Sie möchten, dass alle Felder eine Hintergrundfarbe besitzen, können Sie die Farbe für den Feldhintergrund angeben und speichern. Sämtliche Formulare, die Ihr Design verwenden, erhalten die von Ihnen festgelegte Feldhintergrundfarbe, ohne dass für jedes Formular oder jede Komponente speziell CSS geschrieben werden muss.

Formatierbare Komponenten in der Seitenleiste
Optionen in der Seitenleiste, über die Sie verschiedene Komponenten Ihres Formulars auswählen und gestalten können.

Wenn Sie auf die Schaltfläche „Bearbeiten“ für eine Komponente in der Seitenleiste klicken, wird die Komponente auf der Arbeitsfläche ausgewählt und Sie können die Komponente mithilfe der Optionen in der Seitenleiste formatieren.

Bestimmte Komponenten, wie Textfelder, numerische Felder, Optionsfelder und Kontrollkästchen, werden unter übergeordneten Komponenten, wie „Feld“ kategorisiert. Angenommen, Sie möchten die Formatierung der Optionsfelder in Ihrem Formular anpassen. Um Optionsfelder für die Formatierung auszuwählen, wählen Sie Feld > Widget > Optionsfeld.

Klicken Sie in der Seitenleiste auf Alle erweitern, um kategorisierte Komponenten, die nicht im Voraus sichtbar sind, anzuzeigen, auszuwählen und zu formatieren.

Formatieren von Bereichslayouts

Designs in AEM Forms unterstützen die Formatierung von Elementen im Layout von Bereichen in Ihren Formularen. Es wird die Formatierung von Elementen in gebrauchsfertigen und in benutzerdefinierten Layouts unterstützt.

Zu den gebrauchsfertigen Bereichen gehören:

  • Registerkarten links
  • Registerkarten oben
  • Akkordion
  • Responsiv
  • Assistent
  • Layout für Mobilgeräte
    • Bereichsnamen in der Kopfzeile
    • Ohne Bereichsnamen in der Kopfzeile

Die Selektoren variieren je nach Layout.
Die Formatierung benutzerdefinierter Layouts im Design-Editor umfasst Folgendes:

  • Definieren der Komponenten für ein Layout, das formatiert werden kann, und der CSS-Selektoren für die eindeutige Identifizierung dieser Komponenten
  • Definieren der CSS-Eigenschaften, die auf diese Komponenten angewendet werden können
  • Definieren der Formatierung für diese Komponenten interaktiv über die Benutzeroberfläche

Unterschiedliche Stile für unterschiedliche Bildschirmgrößen

Layouts für Desktop und Mobilgeräte können leicht abweichende oder vollständig unterschiedliche Stile aufweisen. Bei Mobilgeräten haben Tablets und Mobiltelefone ähnliche Layouts, mit Ausnahme der Komponentengrößen.

Verwenden Sie Design-Editor-Haltepunkte, um eine unterschiedliche Formatierung für unterschiedliche Bildschirmgrößen zu definieren. Sie können ein Basisgerät oder eine Auflösung wählen, mit dem oder der Sie mit dem Erstellen des Designs beginnen, und die Stilvariationen für andere Auflösungen werden automatisch generiert. Sie können die Formatierung für alle Auflösungen explizit ändern. Entsprechend Ihren Erfordernissen können Sie das Basisdesign für Mobilgerät, Tablet oder Desktop auswählen. Es sind verschiedene Ansätze der CSS-Generierung definiert, basierend auf der Auswahl des Standardhaltepunkts, der während der Designerstellung ausgewählt ist.

Zu den Ansätzen gehören:

  1. Desktop zuerst (Standard): Bei diesem Ansatz wird die gesamte Formatierung von einer höheren Auflösung auf einen Haltepunkt mit niedrigerer Auflösung übertragen, sofern es keine Überschreibung im unteren Haltepunkt gibt.
  2. Mobilgerät zuerst: Bei diesem Ansatz wird die gesamte Formatierung von einer niedrigeren Auflösung zu einem Haltepunkt mit höherer Auflösung übertragen, sofern es keine Überschreibung im höheren Haltepunkt gibt.
  3. Tablet als Basisauflösung: Dieser Ansatz ist eine Kombination der ersten beiden Ansätze. Für Haltepunkte unterhalb des ausgewählten Haltepunkts wird von oben nach unten übertragen und für Haltepunkte über dem ausgewählten Haltepunkt von unten nach oben.

Hinweis:

Das Design wird zuerst mithilfe eines Formulars erstellt und dann auf verschiedene Formulare angewandt. Die Haltepunkte in dem Formular, das bei der Designerstellung verwendet wird, können sich von dem Formular unterscheiden, auf das das Design angewandt wird. Die CSS-Medienabfragen basieren auf dem Formular, das bei der Designerstellung verwendet wird, und nicht auf dem Formular, auf das das Design angewandt wird.

Kontextänderungen der Formatierungseigenschaften in der Seitenleiste bei der Auswahl der Objekte

Wenn Sie eine Komponente auf der Arbeitsfläche auswählen, werden deren Formatierungseigenschaften in der Seitenleiste angezeigt. Wählen Sie den Objekttyp und ihren Status aus und geben Sie dann dessen Stil vor. 

Live-Vorschau, Speichern und Verwerfen von Änderungen

Änderungen, die an der Formatierung vorgenommen werden, sind sofort in dem Formular auf der Arbeitsfläche sichtbar. Mit der Live-Vorschau können Sie die Auswirkungen der Formatierung interaktiv definieren und anzeigen. Wenn Sie die Formatierung einer Komponente ändern, wird die Schaltfläche Fertig in der Seitenleiste aktiviert. Um die Änderungen beizubehalten, verwenden Sie die Schaltfläche Fertig.

Design mit einem anderen Formular

Wenn Sie ein Design erstellen, wird es mit einem Formular erstellt, das im Lieferumfang des Design-Editors enthalten ist. Sie geben die Formatierung für die Komponenten in diesem Formular vor. Anstelle des Formulars, das mit dem Design-Editor versendet wird, können Sie ein Formular Ihrer Wahl auswählen, um die Formatierung vorzugeben, und die Ergebnisse in der Vorschau anzeigen. 

So ersetzen Sie das aktuelle Formular auf der Arbeitsfläche des Design-Editors:

  1. Klicken Sie im Bereich "Design-Editor" auf Themenoptionen > Konfigurieren
  2. Klicken Sie im Dialogfeld „Konfiguration bearbeiten“ auf Durchsuchen .
  3. Wählen Sie im Dialogfeld „Pfad auswählen“ das Formular aus und klicken Sie auf Bestätigen .

Wiederholen/Rückgängig

Sie können die unerwünschten, versehentlich entstehenden Änderungen rückgängig machen oder wiederherstellen.Verwenden Sie die Schaltflächen „Wiederholen/Rückgängig“ auf der Arbeitsfläche. 

Schaltflächen „Rückgängig/Wiederholen“ im Design-Editor
Schaltflächen „Rückgängig/Wiederholen“ auf der Arbeitsfläche

Die Schaltflächen „Wiederholen/Rückgängig“ werden angezeigt, wenn Sie eine Komponente im Design-Editor formatieren. 

Verwenden des Design-Editors

Mit dem Design-Editor können Sie ein Design bearbeiten, das Sie erstellt oder hochgeladen haben. Navigieren Sie zu Formulare und Dokumente > Designs und wählen Sie ein Design aus und öffnen Sie es. Das Design wird im Design-Editor geöffnet. 

Der Design-Editor besteht, wie bereits erwähnt, aus zwei Bereichen: Seitenleiste und Arbeitsfläche.

Komponenteneigenschaften im Design-Editor
Anpassen der Formatierung für den Erfolgsstatus der Komponente Widget „Textfeld“ im Design-Editor. Die Komponente wird auf der Arbeitsfläche ausgewählt und der Status in der Seitenleiste. Die in der Seitenleiste verfügbaren Formatierungsoptionen werden verwendet, um das Aussehen einer Komponente anzupassen.

Verwenden der Arbeitsfläche

Das Design wird entweder mit dem gebrauchsfertigen Formular oder mit einem Formular Ihrer Wahl erstellt. Die Arbeitsfläche zeigt die Vorschau des Formulars, das zum Erstellen des Designs verwendet wird, mit den im Design festgelegten Anpassungen an. Das Lineal über dem Formular wird für das Festlegen des Layouts entsprechend der Displaygröße Ihres Geräts verwendet.

In der Arbeitsflächen-Symbolleiste sehen Sie Folgendes:

  • Seitliches Bedienfeld ein/aus: Hiermit können Sie die Seitenleiste ein- oder ausblenden.
  • Themenoptionen: Bietet drei Optionen.
    • Konfigurieren: Hier können Sie die Formularvorschau und die Basis-Clientlib wählen.
    • Design-CSS anzeigen: Ermöglicht die Anszeige des vom Design-Editor generierten CSS für das ausgewählte Design.
    • Hilfe: Zeigt eine Einführung in den Design-Editor mit Abbildungen an. 
  • Emulator: Ermöglicht es die Darstellung des Designs für unterschiedliche Displaygrößen zu simulieren und festzulegen. Eine Displaygrößen wird im Emulator als Haltepunkt behandelt. Sie können einen Haltepunkt auswählen und einen Stil für ihn angeben. Zwei solche Haltepunkte sind beispielsweise Desktop und Tablet. Sie können unterschiedliche Formate für jeden Haltepunkt angeben.  

Wenn Sie eine Komponente auf der Arbeitsfläche auswählen, wird die Komponenten-Symbolleiste darüber angezeigt. Mit der Komponenten-Symbolleiste können Sie Komponenten auswählen oder zu Komponenten auf Containerebene wechseln. Beispiel: Sie wählen ein numerisches Feld in einem Bereich aus. Ihnen werden die folgenden Optionen in der Komponenten-Symbolleiste angezeigt:

  • Widget „Numerisches Feld“: Hiermit können Sie die Komponente auswählen, um die Darstellung in der Seitenleiste anzupassen.
  • Widget „Feld“: Hiermit können Sie die allgemeine Komponente für die Formatierung auswählen. In diesem Beispiel werden alle Texteingabekomponenten (Textfeld/numerisches Feld/numerische Schritte/Datumseingabe) für die Formatierung ausgewählt.
  • : Hiermit können Sie zur übergeordneten Container-Komponente zur Formatierung wechseln. Wenn Sie „Numerisches Feld“ auswählen und auf dieses Symbol tippen, wird die Feldkomponente ausgewählt. Wenn Sie „Feldkomponente“ auswählen und auf dieses Symbol tippen, wird der Bereich ausgewählt. Wenn Sie immer wieder zur Auswahl auf dieses Symbol tippen, wählen Sie das Formularlayout für die Formatierung aus. 

Hinweis:

Die in der Komponenten-Symbolleiste verfügbaren Optionen variieren je nach ausgewählter Komponente. 

Komponenten-Symbolleiste
Komponenten-Symbolleiste auf dem numerischen Feld auf der Arbeitsfläche

Verwenden der Seitenleiste

Die Seitenleiste im Design-Editor bietet Optionen zur Anpassung von Formatierungen für Komponenten in einem Design und zur Verwendung von Selektoren. Mit Selektoren können Sie eine Gruppe von Komponenten oder einzelne Komponenten auswählen, und Sie können nach Selektoren in der Seitenleiste suchen. Sie können Selektoren für benutzerdefinierte Komponenten schreiben. 

Wenn Sie eine Komponente aus der Arbeitsfläche oder Selektoren in der Seitenleiste auswählen, werden in der Seitenleiste alle Optionen angezeigt, mit denen Sie die Formatierung anpassen können.
Im Folgenden sehen Sie die Optionen, die in der Seitenleiste angezeigt werden, wenn Sie eine Komponente auswählen: 

Seitenleistenoptionen Verwendung

Name

Zeigt den Namen der Komponente an, die auf der Arbeitsfläche ausgewählt wurde oder gesucht und mithilfe der Seitenleiste ausgewählt wurde.

Status

Hier können Sie einen Status für die ausgewählte Komponente wählen und die Formatierung im ausgewählten Status anpassen. 

Sie können beispielsweise angeben, wie eine Komponente im Status „Standard“, „Fokus“, „Deaktiviert“, „Mausberührung“, „Fehler“ oder „Erfolg“ aussieht. 

Die Optionen für die Anpassung der Statusstile variieren je nach Komponente.

Abmessungen und Position

Hier können Sie die Formatierung für Ausrichtung, Größe, Positionierung und Platzierung von Komponenten im Design festlegen. 

Ihre Optionen sind Anzeigeeinstellung, Auffüllung, Rand, Breite, Höhe und Z-Indexposition.  

Text

Sie können die Textstile in der Komponente des Designs anpassen.

Sie möchten beispielsweise die Darstellung des in Textfeldern eingegebenen Texts ändern.

Ihre Optionen sind Schriftfamilie, Stärke, Farbe, Größe, Zeilenhöhe, Textausrichtung, Zeichenabstand, Texteinzug, Unterstreichungen, Kursivdarstellung, Groß-/Kleinschreibung, vertikale Ausrichtung, Grundlinie und Richtung. 

Hintergrund 

Hiermit können Sie den Hintergrund der Komponente mit einem Bild oder einer Farbe füllen. 

Rand

Hiermit können Sie festlegen, wie der Rahmen der Komponente angezeigt wird. Sie können beispielsweise festlegen, dass das Textfeld einen dunkelroten, starken Rand mit einer gepunkteten Linie hat. 

Ihre Optionen sind Breite, Stil, Radius und Farbe des Rahmens.

Effekte

Hiermit können Sie Spezialeffekte zu den Komponenten hinzufügen, z. B. Deckkraft, Übergangsmodus und Schatten. 

Erweitert

Hier können Sie benutzerdefinierten CSS-Code als Inline-Element zu einer Komponente hinzufügen und benutzerdefinierte Selektoren schreiben. 

Wenn Sie benutzerdefinierten CSS-Code hinzufügen, überschreibt dieser die Anpassungen, die Sie mithilfe der Optionen in der Seitenleiste hinzugefügt haben. 

Erfolg simulieren Hier können Sie sehen, wie eine Komponente aussieht, wenn Sie die Formatierung für den Erfolgsstatus festlegen. Beispiel: In einem Formular legen Kunden Kennworte fest. Benutzer können Kennworte gemäß Richtlinien festlegen, die Sie erstellen. Wenn ein Benutzer ein Kennwort eingibt, das allen Richtlinien entspricht, wird das Textfeld grün. Wenn das Textfeld grün wird, zeigt es damit den Erfolgsstatus an. Sie können die Formatierung für eine Komponente im Erfolgsstatus festlegen und das Erscheinungsbild mit der Option „Erfolg simulieren“ simulieren.
Fehler simulieren Hier können Sie sehen, wie eine Komponente aussieht, wenn Sie die Formatierung für den Fehlerstatus festlegen. Beispiel: In einem Formular legen Kunden Kennworte fest. Benutzer können Kennworte gemäß Richtlinien festlegen, die Sie erstellen. Wenn ein Benutzer ein Kennwort eingibt, das den Richtlinien nicht entspricht, wird das Textfeld rot. Wenn das Textfeld rot wird, zeigt es den Fehlerstatus an. Sie können die Formatierung für eine Komponente im Fehlerstatus festlegen und das Erscheinungsbild mit der Option „Fehler simulieren“ simulieren.

Formatieren einer Komponente

Beispiel: In Ihrem Formular gibt es zwei Arten von Textfeldern: in das eine lassen sich nur numerische und in das andere nur alphanumerische Werte eingeben. Sie können die Formatierung für das Textfeld anpassen, in das nur numerische Werte eingegeben werden können (ein numerisches Feld).

Führen Sie die folgenden Schritte aus, um die Formatierung für eine bestimmte Komponente anzupassen (hier ein numerisches Feld):

  1. Wählen Sie im Design-Editor das numerische Feld auf der Arbeitsfläche aus.
  2. Wenn Sie das numerische Feld auswählen, wird die Komponenten-Symbolleiste mit drei Optionen angezeigt: 
    • Widget „Numerisches Feld“
    • Widget „Feld“
  3. Wählen Sie Widget „Numerisches Feld“.
  4. Der Titel der Seitenleiste ändert sich in Widget „Numerisches Feld“ und enthält die Optionen zum Anpassen der Darstellung.
    Verwenden Sie die Option Abmessung und Position in der Seitenleiste, um die Größe der Komponente anzupassen. Stellen Sie sicher, dass der Status Standard lautet. 

Wählen Sie anstelle von Widget „Numerisches Feld“ Widget „Feld“ in der Komponenten-Symbolleiste und führen Sie die oben genannten Schritte durch. Wenn Sie Abmessungen für die Option Widget „Feld“ auswählen, haben alle Textfelder mit Ausnahme des numerischen Feldes in Ihrem Formular dieselbe Größe. 

Formatieren von Feldern für einen bestimmten Status

Mit der Komponenten-Symbolleiste können Sie auch die Formatierung für verschiedene Status von Komponenten festlegen. Wenn eine Komponente beispielsweise deaktiviert ist, besitzt sie den Status „deaktiviert“. Die fünf Status einer Komponente, die Sie im Design-Editor gestalten können, sind: „Standard“, „Fokus“, „Deaktiviert“, „Fehler“ und „Mausberührung“. Sie können eine Komponente auf der Arbeitsfläche auswählen und die Option „Status“ in der Seitenleiste verwenden, um ihr Erscheinungsbild individuell anzupassen. 

Führen Sie die folgenden Schritte aus, um die Formatierung für eine Komponente mit einem bestimmten Status anzupassen:

  1. Wählen Sie eine Komponente auf der Arbeitsfläche aus und wählen Sie die entsprechende Option in der Komponenten-Symbolleiste.
    In der Seitenleiste werden die Optionen zum Anpassen der Formatierung für die Komponente angezeigt. 
  2. Wählen Sie einen Status in der Seitenleiste aus. Beispiel: „Obligatorisch“ oder „Fehler“. 
  3. Verwenden Sie Optionen wie Rahmen, Hintergrund in der Seitenleiste zum Anpassen der Darstellung der Komponente.

Wenn Sie die Formatierung einer Komponente anpassen, nachdem Sie den Status festgelegt haben, wird die Anpassung für die Komponente nur für den festgelegten Status angezeigt. Angenommen, Sie passen die Formatierung für die Komponente an, wenn der Status „Mausberührung“ festgelegt ist. Die Anpassung wird für die Komponente angezeigt, wenn Sie den Mauszeiger im generierten Formular, auf das Sie das Design anwenden, über die Komponente halten.

Formatieren von Layouts für kleinere Displays

Verwenden Sie das Lineal auf der Arbeitsfläche, um Haltepunkte für Geräte mit kleineren Displays auszuwählen. Klicken Sie auf „Emulator“  auf der Arbeitsfläche, um Lineal und Haltepunkte anzuzeigen. Mithilfe der Haltepunkte können Sie ein Formular für Displaygrößen mehrerer Geräte, wie Smartphones und Tablets, in einer Vorschau anzeigen. Der Design-Editor unterstützt verschiedene Displaygrößen. 

So formatieren Sie Komponenten für verschiedene Haltepunkte:

  1. Wählen Sie auf der Arbeitsfläche einen Haltepunkt über dem Lineal aus.
    Ein Haltepunkt steht für ein Mobilgerät und dessen Displaygröße.
  2. Verwenden Sie die Seitenleiste zum Anpassen der Formatierung von Formularkomponenten im Design für die ausgewählte Displaygröße.
  3. Stellen Sie sicher, dass die Anpassung gespeichert wird.

Sie können Formularkomponenten für verschiedene Geräte formatieren. Formularkomponenten für Desktops und Mobilgeräte können sehr unterschiedliche Stile aufweisen. 

Anwenden eines Designs auf ein Formular

So wenden Sie ein Design auf ein adaptives Formular an: 

  1. Öffnen Sie das Formular im Bearbeitungsmodus.
    Um ein Formular im Bearbeitungsmodus zu öffnen, wählen Sie ein Formular aus und klicken Sie auf Öffnen.
  2. Wählen Sie im Bearbeitungsmodus eine Komponente aus und klicken Sie anschließend zuerst auf > Container für ein adaptives Formular und dann auf.
    Sie können die Eigenschaften Ihres Formulars in der Seitenleiste bearbeiten.
  3. Klicken Sie in der Seitenleiste auf Formatierung.
  4. Wählen Sie ein Design aus dem Dropdown-Menü Adaptives Formulardesign aus und klicken Sie auf Fertig .

Abrufen eines bestimmten Erscheinungsbilds für ein adaptives Formular mithilfe von Designs

In AEM Forms stehen außer dem standardmäßig vordefinierten Arbeitsflächendesign weitere Designs zur Verfügung: Registrierung einfach, Registrierung erweitert und Umfrage. Wenn Sie andere Designs sowie weitere Änderungen zur Gestaltung Ihres Formulars verwenden möchten, kopieren Sie das gewünschte Design aus der Designbibliothek. Fügen Sie die kopierten Designs an einer Stelle außerhalb des Ordners für die Designbibliothek ein und bearbeiten Sie das kopierte Design wie benötigt.

Gehen Sie wie folgt vor, um ein Design zu kopieren:

  1. Navigieren Sie im Autorenmodus zu „Adobe Experience Manager“> „Formulare“> „Designs“
  2. Öffnen Sie den Ordner für die Designbibliothek. 
  3. Setzen Sie im Ordner für die Designbibliothek den Mauszeiger auf das entsprechende vordefinierte Design und tippen Sie auf .
  4. Fügen Sie das kopierte Design außerhalb des Ordners für die Designbibliothek ein. 
  5. Passen Sie das kopierte Design an.

Nachdem Sie das Thema angepasst haben, wenden Sie es auf Ihr Formular an. 

Auswirkungen auf andere Anwendungsfälle adaptiver Formulare

  • Formular veröffentlichen/Veröffentlichung aufheben: Beim Veröffentlichen eines Formulars wird das angewendete Design ebenfalls veröffentlicht (wenn es nicht bereits veröffentlicht ist)
  • Formular importieren/exportieren: Beim Importieren oder Exportieren eines Formulars wird das zugehörige Design ebenfalls automatisch importiert oder exportiert.
  • Verweise eines Formulars: Der Abschnitt „Verweist“ in den Formularverweisen enthält einen zusätzlichen Eintrag für das Design.
  • Zeit der letzten Änderung eines Formulars: Wird aktualisiert, wenn das zugehörige Design geändert wird.
  • A/B-Tests: Sie können ein anderes Design auf zwei Versionen des Formulars in A/B-Tests anwenden. Die Informationen der beiden Designs werden einzeln in den beiden Guide-Containern gespeichert. 

Fehlerbehebung und Empfehlungen

  • Herunterladen eines Ordners mit Designs:
    Beim Herunterladen des Ordners, in dem Sie Designs erstellt haben, wird ein leerer Ordner heruntergeladen. Um solche Designs herunterzuladen, wählen Sie sie aus und laden Sie sie herunter.
  • Vermeiden von Assets aus anderen Designs:
    Bei der Bearbeitung von Designs können Sie Asset (etwa Bilder) aus anderen Designs durchsuchen und hinzufügen. Angenommen, Sie bearbeiten den Hintergrund einer Seite. Wenn Sie beispielsweise Seite > Hintergrund > Hinzufügen > Bild wählen, wird ein Dialogfeld angezeigt, über das Sie Bilder aus anderen Designs durchsuchen und hinzufügen können. 
    Dabei können Probleme im aktuellen Design auftreten, wenn ein Asset aus einem anderen Design hinzugefügt, dieses jedoch verschoben oder gelöscht wird. Wir empfehlen daher, keine Assets aus anderen Designs zu durchsuchen und hinzuzufügen. 

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie