Erstellen oder Anpassen eines Designs für ein adaptives Formular

Gilt für: ✅ Kernkomponenten des adaptiven Formulars ❎ Adaptive Form Foundation-Komponenten.

In AEM Forms 6.5 ist ein Design eine AEM Client-Bibliothek, mit der Sie die Stile (Erscheinungsbild) für ein adaptives Formular definieren. Zu einem Design gehören Stildetails für die Komponenten und Bedienfelder. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, spiegeln die entsprechenden Komponenten den angegebenen Stil wider. Ein Design wird unabhängig voneinander ohne Verweis auf ein adaptives Formular verwaltet und kann über mehrere adaptive Forms hinweg wiederverwendet werden.

Verfügbare Designs

AEM 6.5-Umgebung bietet die folgenden aufgelisteten Designs für Kernkomponenten-basierte adaptive Forms:

• Design „Canvas“
• Design „WKND“
• EASEL-Design

Grundlegendes zur Struktur der Themen

Ein Design ist ein Paket, das die CSS-Datei, JavaScript-Dateien und Ressourcen (wie Symbole) umfasst, die den Stil Ihres adaptiven Forms definieren. Ein Design für adaptives Formular folgt einer bestimmten Organisation, die aus den folgenden Komponenten besteht:

• src/theme.scss: Dieser Ordner enthält die CSS-Datei, die einen breiten Einfluss auf das gesamte Design hat. Es dient als zentralisierter Ort zur Definition und Verwaltung des Stils und Verhaltens Ihres Designs. Durch Bearbeitung dieser Datei können Sie Änderungen vornehmen, die im gesamten Design allgemein angewendet werden und das Erscheinungsbild und die Funktionalität Ihrer adaptiven Forms- und AEM Sites-Seiten beeinflussen.

• src/site: Dieser Ordner enthält CSS-Dateien, die auf die Seite einer gesamten AEM Site angewendet werden. Diese Dateien bestehen aus Code und Stilen, die sich auf die Funktionalität und das Layout der Seite Ihrer AEM auswirken. Alle hier vorgenommenen Änderungen werden auf allen Seiten Ihrer Site übernommen.

• src/components: Die CSS-Dateien in diesem Ordner sind für einzelne AEM Kernkomponenten entwickelt. Jeder dedizierte Ordner für eine Komponente enthält .scss -Datei, die diese bestimmte Komponente in einem adaptiven Formular formatiert. Beispielsweise wird die /src/components/button/_button.scss -Datei enthält Stilinformationen für die Komponente "Adaptive Forms-Schaltfläche".

  

• src/resources: Dieser Ordner enthält statische Dateien wie Symbole, Logos und Schriftarten. Diese Ressourcen werden verwendet, um die visuellen Elemente und das Gesamtdesign Ihres Designs zu verbessern.

Erstellen von Designs

AEM Forms 6.5 bietet die folgenden aufgelisteten Designs für Kernkomponenten-basierte adaptive Forms.

• Design „Canvas“
• Design „WKND“
• EASEL-Design

Sie können Anpassen dieser Designs, um ein Design zu erstellen.

Anpassen eines Designs

Das Anpassen eines Designs bezieht sich auf den Prozess der Änderung und Personalisierung des Erscheinungsbilds eines Designs. Wenn Sie ein Design anpassen, ändern Sie dessen Design-Elemente, Layout, Farben, Typografie und manchmal den zugrunde liegenden Code. Auf diese Weise können Sie ein einzigartiges und maßgeschneidertes Erscheinungsbild für Ihre Website oder Anwendung erstellen und dabei die grundlegende Struktur und Funktionalität des Designs beibehalten.

Voraussetzungen für die Anpassung eines Designs

• Aktivieren der adaptiven Forms-Kernkomponenten für Ihre Umgebung.

• Installieren Sie die neueste Version von Apache Maven. Apache Maven ist ein Werkzeug zur Automatisierung von Builds, das häufig für Java™-Projekte verwendet wird. Durch die Installation der neuesten Version stellen Sie sicher, dass Sie über die erforderlichen Abhängigkeiten für die Designanpassung verfügen.

• Erfahren Sie, wie Sie eine Client-Bibliothek in Adobe Experience Manager. AEM bietet Client-Bibliotheken, mit denen Sie Ihren clientseitigen Code im Repository speichern, in Kategorien organisieren und definieren können, wann und wie jede Codekategorie dem Client bereitgestellt werden soll.

• Installieren Sie einen Nur-Text-Editor. Beispielsweise Microsoft® Visual Studio-Code. Die Verwendung eines Texteditors wie Microsoft® Visual Studio Code bietet eine benutzerfreundliche Umgebung zum Bearbeiten und Ändern von Designdateien.

• Stellen Sie sicher, dass die AEM Forms-Umgebung aktiv ist.

Überlegungen zum Anpassen eines Designs

• Stellen Sie sicher, dass Sie das Archetyp-Projekt, das zur Aktivierung der adaptiven Forms-Kernkomponenten verwendet wird in Ihrer Umgebung, um Ihre Designs anzupassen.

• Beim Veröffentlichen eines adaptiven Formulars werden die Client-Bibliotheken nicht automatisch in der Veröffentlichungsinstanz veröffentlicht. Stellen Sie sicher, dass Sie die in einem adaptiven Formular referenzierte Client-Bibliothek manuell in Ihren Veröffentlichungsumgebungen veröffentlichen.

• Adobe empfiehlt, die Klassennamen von Client-Bibliotheken nicht zu ändern.

Anpassen eines Designs

Das Erstellen oder Anpassen eines Designs ist ein mehrstufiger Prozess. Führen Sie die Schritte in der angegebenen Reihenfolge aus, um das Design zu erstellen/anzupassen:

1. Klonen eines Designs
2. Anpassen der Darstellung des Designs
3. Design für lokale Bereitstellung bereitstellen
4. Bereitstellen des Designs in einer lokalen Umgebung
5. Bereitstellen des Designs in der Produktionsumgebung

Die im Dokument bereitgestellten Beispiele basieren auf dem Arbeitsfläche -Design, Sie können jedoch jedes Design klonen und es mit denselben Anweisungen anpassen. Diese Anweisungen gelten für jedes Thema, sodass Sie Designs entsprechend Ihren spezifischen Anforderungen ändern können.

1. Klonen Sie das Git-Repository des Designs

Um ein Design für die auf Kernkomponenten basierende adaptive Forms zu klonen, wählen Sie eines der folgenden Designs:

• Design „Canvas“
• Design „WKND“
• EASEL-Design

Führen Sie die folgenden Anweisungen aus, um ein Design zu klonen:

1. Öffnen Sie die Eingabeaufforderung oder das Terminal-Fenster in Ihrer lokalen Entwicklungsumgebung.

2. Führen Sie die git clone -Befehl zum Klonen eines Designs.

      git clone [Path of Git Repository of the theme]
   

   Ersetzen Sie die [Pfad des Git-Repositorys des Designs] mit der tatsächlichen URL des entsprechenden Git-Repositorys des Designs

   Um beispielsweise das Canvas-Design zu klonen, führen Sie den folgenden Befehl aus:

      git clone https://github.com/adobe/aem-forms-theme-canvas
   

3. Wählen Sie Trust the authors of all files in the parent folder und klicken Sie auf Yes, I trust the authors.

Nachdem Sie den Befehl erfolgreich ausgeführt haben, steht auf Ihrem Computer eine lokale Kopie des Designs im aem-forms-theme-canvas Ordner.

2. Passen Sie das Design an

Sie haben die Flexibilität, einzelne Komponenten anzupassen oder Änderungen auf Designebene mithilfe der globalen Variablen eines Designs vorzunehmen. Die Änderung globaler Variablen hat einen kaskadierenden Effekt auf alle einzelnen Komponenten. Sie können beispielsweise globale Variablen verwenden, um die Rahmenfarbe aller Komponenten in einem adaptiven Formular zu ändern, oder eine dynamische Füllfarbe auf Aktionsaufruf-Schaltflächen (CTA) anwenden. Sie haben folgende Möglichkeiten:

• Festlegen von Stilen auf Designebene

• Festlegen von Stilen auf Komponentenebene

Festlegen von Stilen auf Designebene

Die variable.scss -Datei enthält die globalen Variablen des Designs. Durch Aktualisierung dieser Variablen können Sie stilistisch relevante Änderungen auf der Designebene vornehmen. Gehen Sie wie folgt vor, um Stile auf Designebene anzuwenden:

1. Öffnen Sie die <your-theme-sources>/src/site/_variables.scss Datei zur Bearbeitung.

2. Ändern Sie den Wert einer beliebigen Eigenschaft. Beispielsweise ist die Standardfehlerfarbe Rot. Um die Fehlerfarbe von Rot in Blau zu ändern, ändern Sie den Farb-Hex-Code der $error-Variable. Zum Beispiel: $error: #196ee5.

   

3. Speichern und schließen Sie die Datei.

Auf ähnliche Weise können Sie die variable.scss -Datei, um Schriftfamilie und -typ, Design- und Schriftfarben, Schriftgröße, Designabstand, Fehlersymbol, Designrahmenstile und mehr Variablen festzulegen, die sich auf mehrere adaptive Formularkomponenten auswirken.

Festlegen von Stilen auf Komponentenebene

Sie können auch die Schriftart, Farbe, Größe und andere CSS-Eigenschaften bestimmter Kernkomponenten des adaptiven Formulars anpassen, z. B. Schaltflächen, Kontrollkästchen, Container, Fußzeilen und mehr. Durch Bearbeiten der CSS-Datei, die mit der jeweiligen Komponente verknüpft ist, können Sie deren Stil an das Branding Ihres Unternehmens anpassen. Gehen Sie wie folgt vor, um den Stil einer Komponente anzupassen:

1. Öffnen Sie die Datei <your-theme-sources>/src/components/<component>/<component.scss> zur Bearbeitung. Um beispielsweise die Schriftfarbe der Schaltflächenkomponente zu ändern, öffnen Sie die <your-theme-sources>/src/components/button/button.scss, Datei .

2. Ändern Sie den Wert von beliebig gemäß Ihren Anforderungen. Um beispielsweise die Farbe der Schaltflächenkomponente beim Bewegen der Maus auf Grün zu ändern, ändern Sie den Wert der color: $white -Eigenschaft in der cmp-adaptiveform-button__widget:hover -Klasse zu Hexadezimalcode 12b453 oder einer anderen grünen Schattierung. Der endgültige Code sieht wie folgt aus:

    .cmp-adaptiveform-button__widget:hover {
    background: $dark-gray;
    color: #12b453;
    }
   

3. Speichern und schließen Sie die Datei.

3. Bereiten Sie das Design für die Bereitstellung vor.

Um ein Design in einer AEM-Instanz bereitzustellen, muss es in eine Client-Bibliothek konvertiert werden. Führen Sie die folgenden Schritte aus, um das Design in eine Client-Bibliothek zu konvertieren:

1. Öffnen Sie die Eingabeaufforderung oder das Terminal-Fenster.

2. Navigieren Sie zum Ordner <your-theme-sources>. Beispiel: C:\aem-forms-theme-canvas

3. Führen Sie den folgenden Befehl aus:

      npm run create-clientlib --category=adaptiveform.theme.[yourtheme]
   

   Ersetzen [yourtheme] mit dem Namen Ihres benutzerdefinierten Designs. Wenn beispielsweise der Name des benutzerdefinierten Designs customcanvastheme, führen Sie den folgenden Befehl aus

       npm run create-clientlib --category=adaptiveform.theme.customcanvastheme
   

   Bei erfolgreicher Ausführung des Befehls wird ein Client-Bibliotheksordner unter themerepo\theme-clientlibs\[yourtheme].

   

   

4. Bereitstellen des Designs in einer lokalen Umgebung

Gehen Sie wie folgt vor, um das Design in Ihrer lokalen Entwicklungs- oder Testumgebung bereitzustellen:

1. Kopieren Sie die im vorherigen Abschnitt erstellte Client-Bibliothek in Ihr Archetypprojekt unter folgendem Pfad:

   /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

2. Öffnen Sie die Eingabeaufforderung oder das Terminal.

3. Navigieren Sie zum Stammverzeichnis Ihres AEM Archetyp-Projekts, dem Projekt, das zur Aktivierung der Kernkomponenten des adaptiven Formulars verwendet wird.

4. Führen Sie den folgenden Befehl aus, um das benutzerdefinierte Design in Ihrer Umgebung bereitzustellen:

   mvn clean install

   

5. Bereitstellen eines Designs in Ihrer Produktionsumgebung

Nachdem Sie das Design in Ihrer lokalen Entwicklungsumgebung erfolgreich getestet haben, können Sie mit der Bereitstellung des Designs in Ihren Produktionsumgebungen fortfahren, einschließlich der Autoren- und der Veröffentlichungsinstanz. Führen Sie die folgenden Schritte aus, um das Design in Ihren Produktionsumgebungen bereitzustellen:

1. Melden Sie sich bei Ihrer AEM an.
2. Öffnen Sie Package Manager. Die Standard-URL ist https://localhost:4502/crx/packmgr/index.jsp.
3. Klicks Paket hochladen und klicken Durchsuchen.
4. Navigieren Sie zu und wählen Sie [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Klicks Öffnen.
5. Klicken Sie auf Installieren. Wiederholen Sie diesen Schritt für alle Produktionsumgebungen.

Nachdem das Paket installiert wurde, ist das Design zur Auswahl verfügbar.

Anwenden eines Designs auf ein adaptives Formular

Schritte zum Anwenden eines Designs auf ein adaptives Formular:

1. Melden Sie sich bei Ihrer lokalen AEM-Autoreninstanz an.

2. Geben Sie Ihre Anmeldedaten auf der Experience Manager-Anmeldeseite ein. Auswählen Adobe Experience Manager > Forms > Forms und Dokumente.

3. Klicks Erstellen > Adaptives Forms.

4. Wählen Sie eine Vorlage für adaptive Forms-Kernkomponenten aus und klicken Sie auf Nächste. Die Eigenschaften hinzufügen erscheint

5. Geben Sie die Name für Ihr adaptives Formular.

   HINWEIS

   • Standardmäßig wird die Variable adaptiveform.theme.canvas3 Design ausgewählt ist.
   • Sie können ein anderes Design als das Design-Client-Bibliothek Dropdown-Menü.

6. Klicken Sie auf Erstellen.

Designs für adaptive Formulare werden als Teil einer Vorlage für adaptive Formulare verwendet, um beim Erstellen eines adaptiven Formulars Stile zu definieren.

Löschen eines Designs

So entfernen Sie nicht verwendete oder unerwünschte Designs:

1. Melden Sie sich bei Ihrer Authoring-Instanz an.
2. Öffnen Sie ein http://[Publish Server URL]:[PORT]/crx/de/index.jsp.
3. Navigieren Sie zu apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
4. Löschen Sie den Designordner und speichern Sie die Änderungen.

Häufig gestellte Fragen

F: Welche Anpassung hat bei der Anpassung in einem Designordner sowohl auf globaler Ebene als auch auf Komponentenebene Priorität?

Ans: Wenn ein Stil sowohl auf Design- als auch auf Komponentenebene definiert ist, hat der auf Komponentenebene definierte Stil Vorrang.

F: Welche Schritte sollten unternommen werden, wenn das benutzerdefinierte Design nicht im Design-Client-Bibliothek?

Ans: Wenn Ihr benutzerdefiniertes Design nicht im Design-Client-Bibliothek Gehen Sie wie folgt vor:

1. Navigieren Sie zu dem Speicherort, an dem Sie Ihre benutzerdefinierte Design-Client-Bibliothek hinzugefügt haben. Der empfohlene Pfad lautet /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

2. Öffnen Sie die .content.xml und die folgenden Metadaten einschließen:

       formstheme:true
       allowproxy:true
   

3. Speichern Sie die Datei und stellen Sie das Design erneut bereit.

Siehe auch

• Erstellen eines auf Kernkomponenten basierenden adaptiven Formulars
• Verwenden Sie den Regeleditor, um dem Formular dynamisches Verhalten hinzuzufügen
• Erstellen oder Anpassen von Designs für auf Kernkomponenten basierende adaptive Forms
• Erstellen einer Vorlage für auf Kernkomponenten basierende adaptive Forms
• Erstellen oder Hinzufügen eines adaptiven Formulars zu einer AEM Sites-Seite oder einem Experience Fragment
• Beispielthemenvorlagen und Formulardatenmodelle