Hinzufügen von adaptiven Forms-Stilen zu einem AEM Sites-Design

Problembeschreibung

In einem adaptiven Formular, das innerhalb einer AEM Sites-Seite mit der Formular-Container-Komponente erstellt wurde, fehlte der adaptive Formularstil.

Die Site selbst wurde mit einem AEM Archetype-Projekt erstellt wurde korrekt gerendert.

Dies geschah, weil das Site-Design die Designstile von Adaptive Forms nicht.

In AEM as a Cloud Service (AEMaaCS) sind adaptive Forms-Stile nicht automatisch im Site-Design enthalten. Damit die Formulare das richtige Design erben, mussten wir:

In diesem Dokument:

Zum Beispiel:

site_theme_root  = C:\cloudmanager\aem-banking-application-theme
forms_theme_root = C:\aem-forms-cs-themes\aem-forms-theme-canvas

Architekturüberblick

Ausgangszustand:

AEM Archetype Site
    +
Adaptive Form Container
    =
Unstyled Adaptive Form

Endzustand nach der Integration:

AEM Site Theme
    +
Adaptive Forms Theme
    =
Unified Styled Experience

Voraussetzungen

Sie sollten bereits über Folgendes verfügen:

Schritt 1: Aktivieren der Frontend-Pipeline

In AEM Sites:

Sites → Select Site Root(such as bankingapplication) → Site Rail → Enable Front End Pipeline

Dies ermöglicht eine moderne Design-Bereitstellung für die Site.

Nach der Aktivierung fügt AEM ein:

in alle Seiten der Site ein.

Schritt 2: Herunterladen der Site-Design-Quellen

In der Site-Leiste:

Download Theme Sources

Dadurch wird das mit dem Projekt „bankingApplication“ verknüpfte Design heruntergeladen

bankingapplication-theme-sources.zip

Schritt 3: Extrahieren des Site-Design-Projekts

Extrahieren Sie die ZIP-Datei in einen lokalen Ordner Ihrer Wahl.

Zum Beispiel:

C:\cloudmanager\aem-banking-application-theme

Nach Extraktion:

aem-banking-application-theme/
  package.json
  README.md
  src/

Der anfängliche src enthält:

src/
  theme.scss
  theme.ts

Schritt 4: Herunterladen des Canvas-Designs für adaptive Forms

Zum Einbetten von adaptivem Forms-Styling in AEM Sites haben wir das Canvas-Design, ​

Laden Sie das Canvas-Design für adaptive Forms von GitHub herunter:

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

Klonen Sie das Repository oder extrahieren Sie den Inhalt der Repository-ZIP-Datei in einen lokalen Ordner Ihrer Wahl, z. B. C:\aem-forms-cs-themes

Das Canvas-Design bietet:

Bevor Sie beginnen

Öffnen Sie sowohl das Site-Design-Projekt (site_theme_root) als auch das Adaptive Forms-Design-Projekt (forms_theme_root) in Visual Studio Code oder einem anderen Codeeditor Ihrer Wahl.

Die Verwendung eines Code-Editors erleichtert Folgendes:

Schritt 5: Adaptive Forms-Design-Struktur erstellen

Erstellen Sie innerhalb des Ordners site_theme_root\ src die folgende Ordnerstruktur:

components/adaptiveform

Endgültige Struktur:

site_theme_root/src/
  theme.scss
  theme.ts

  components/
    adaptiveform/

Schritt 6: Adaptive Forms-Design-Dateien kopieren

Kopieren Sie aus „forms_theme_root“:

Komponentenordner

Kopieren Sie alle Ordner aus:

'forms_theme_root/src/components/

in:

site_theme_root\src\components\adaptiveform

Zum Beispiel:

button/
dropdown/
panel/
textinput/
wizard/

Schritt 7: Freigegebene SCSS-Dateien kopieren

Kopieren Sie diese Dateien:

forms_theme_root/src/site/_variables.scss
forms_theme_root/src/site/_mixin.scss

in:

site_theme_root/src/components/adaptiveform

Ergebnis:

site_theme_root/src/components/adaptiveform/_variables.scss
site_theme_root/src/components/adaptiveform/_mixins.scss

Schritt 8: Kopieren von Bildern

Erstellen Sie einen Ressourcenordner und einen Bildordner im Projektordner für das Site-Design

site_theme_root/src/components/adaptiveform/resources/images

Kopieren Sie alle Canvas-Design-Bilder aus:

forms_theme_root/src/resources/images/

Schritt 9 - _adaptiveform.scss erstellen

Erstellen Sie eine _adaptiveform.scss Datei im Ordner für adaptive Formulare im Site-Design-Projekt

site_theme_root/src/components/adaptiveform/_adaptiveform.scss

Beispielinhalt:

@import './_variables';
@import './_mixins';

@import './accordion/accordion';
@import './button/button';
@import './checkbox/checkbox';
@import './checkboxgroup/checkboxgroup';
@import './datepicker/datepicker';
@import './dropdown/dropdown';
@import './emailinput/emailinput';
@import './fileinput/fileinput';
@import './form/form';
@import './multilineinput/multilineinput';
@import './numberinput/numberinput';
@import './panel/panel';
@import './radio/radio';
@import './radiogroup/radiogroup';
@import './resetbutton/resetbutton';
@import './submitbutton/submitbutton';
@import './tabs/tabs';
@import './telephoneinput/telephoneinput';
@import './text/text';
@import './textinput/textinput';
@import './wizard/wizard';

Jede @import sollte einem übereinstimmenden Komponentenordner im Verzeichnis des adaptiven Formulars entsprechen.

Schritt 10: Adaptives Forms-Design in Site-Design importieren

Öffnen Sie:

site_theme_root/src/theme.scss

Hinzufügen:

@import './components/adaptiveform/_adaptiveform.scss';

Dies ist der kritische Schritt, bei dem adaptive Forms-Stile mit dem Site-Design zusammengeführt werden.

Ohne diesen Import bleiben die Formulare unformatiert, obwohl der Build erfolgreich ist.

Schritt 11: Korrigieren der Bildpfade

Einige kopierte SCSS-Dateien in das Site-Design-Projekt verweisen möglicherweise auf Bilder wie:

url('./resources/images/menu.png')

Diese Pfade werden normalerweise nach dem Einbetten des Forms-Designs in das Site-Design unterbrochen.

Aktualisieren Sie sie auf den richtigen relativen Pfad.

Zum Beispiel:

Schritt 12 - Abhängigkeiten installieren

Terminal öffnen:

cd site_theme_root

Ausführen:

npm install

Schritt 13 - Design lokal erstellen

Ausführen:

npm run build

Erfolgreicher Build generiert:

dist/
  theme.css
  theme.js

Schritt 14 - Git-Repository initialisieren

Nachdem das Design erfolgreich erstellt wurde, initialisieren Sie das Git-Repository über die Befehlszeile. Stellen Sie sicher, dass Sie sich in der site_theme_root befinden

git init
git add .
git commit -m "Adaptive Forms theme integration"

Schritt 15: Cloud Manager-Git-Repository verbinden

Repository-URL abrufen aus:

Cloud Manager → Repositories

Zum Beispiel:

https://git.cloudmanager.adobe.com/techmarketingdemos/<cloud-manager-repository-url>

Remote-Repository verbinden:

git remote add origin https://git.cloudmanager.adobe.com/<cloud-manager-repository-url>

Verzweigung umbenennen:

git branch -M main

Push:

git push -u origin main

Verwenden Sie:

Bei Aufforderung.

Schritt 16: Überprüfen der Frontend-Pipeline-Konfiguration

In den Cloud Manager-Pipeline-Einstellungen:

Der Code-Speicherort muss Folgendes enthalten:

package.json
src/

Schritt 17: Ausführen der Frontend-Pipeline

In Cloud Manager:

Pipelines → Front End Pipeline → Run

Cloud Manager wird:

npm install
npm run build
deploy dist/

Schritt 18 - Bereitstellung überprüfen

Öffnen Sie die AEM Sites-Seite, die das adaptive Formular enthält.

Überprüfen Sie:

Browser-DevTools verwenden:

Network → theme.css

Überprüfen Sie adaptive Forms-Klassen wie:

cmp-adaptiveform-button
cmp-adaptiveform-textinput

Endergebnis

Das Canvas-Design für adaptive Forms ist jetzt in das Site-Design eingebettet und wird über die Frontend-Pipeline bereitgestellt.

Die AEM Sites-Seiten und die adaptive Forms nutzen jetzt gemeinsam:

Erstellen eines konsistenten Erlebnisses auf der gesamten Site.

Endgültige Architektur

AEM Archetype Site
        +
Adaptive Forms Canvas Theme
        +
Front-End Pipeline
        =
Unified Styled AEM Experience