[AEM Forms]{class="badge positive" title="Gilt für AEM Forms)."}

Einbetten eines adaptiven Forms-Designs in ein AEM Sites-Design

Sie können ein adaptives Forms-Design (z. B. das AEM Forms Canvas-Design) in Ihr AEM Sites-Design einbetten. Auf diese Weise steuert ein einzelnes Design sowohl Ihre Website-Seiten als auch alle adaptiven Forms, die auf diesen Seiten eingebettet sind, mit einem Build und einer Bereitstellung über die AEM-Frontend-Pipeline.

Dieser Artikel richtet sich an Entwicklerinnen und Entwickler, die das standardmäßige (oder benutzerdefinierte) AEM Sites-Design verwalten oder anpassen und adaptive Formularstile einbeziehen möchten, ohne eine separate Forms-Design-Bereitstellung verwalten zu müssen.

Voraussetzungen prerequisites

Bevor Sie beginnen, stellen Sie Folgendes sicher:

Schritt 1: Erstellen des Ordners für adaptive Formularkomponenten step-1-create-folder

Erstellen Sie im Site-Design-Repository den Ordner, in dem sich das Forms-Design befinden soll:

theme/src/components/adaptiveform/

Alle Forms-Design-Assets befinden sich in diesem Ordner, sodass sie von den vorhandenen Site-Komponenten getrennt bleiben.

Schritt 2: Forms-Design-Komponenten und -Bilder kopieren step-2-copy-components-and-images

Verwenden Ihres Forms Designs (z. B. aem-forms-theme-canvas) und Ihrer Site Designpfade:

Schritt 3: Kopieren von Variablen und Mixins step-3-copy-variables-and-mixins

Das Forms-Design verwendet freigegebene Variablen und Mixins unter src/site/. Kopieren Sie nur diese beiden Dateien in das Stammverzeichnis von adaptiveform/ (nicht in einen site Unterordner):

Kopieren nicht den Rest des src/site/ des Forms-Designs. Für die eingebetteten Formularstile sind nur diese beiden Dateien erforderlich.

Schritt 4: Korrigieren von Bildpfaden in SCSS step-4-fix-image-paths

Im Forms-Design verweisen Komponenten-SCSS-Dateien häufig auf Bilder mit Pfaden wie ./resources/ oder url(resources/. Nach dem Kopieren in das Site-Design müssen diese Pfade auf theme/src/components/adaptiveform/resources/images/ verweisen.

Das Standard-Site-Vorlagendesign verwendet Parcel, das url() Pfade aus theme/src/ auflöst. Wenn sich also Bilder in theme/src/components/adaptiveform/resources/images/ befinden, verwenden Sie den components/adaptiveform/resources/images/ Pfad (relativ zu theme/src/).

Suchen und Ersetzen in jedem .scss unter theme/src/components/adaptiveform/:

Beispiel - vor (Forms-Design):

.cmp-adaptiveform-button__questionmark {
  background: url(./resources/images/question.svg) center center / cover no-repeat, #969696;
}

Nachher (Site-Design, Bilder in adaptiveform/resources/images/):

.cmp-adaptiveform-button__questionmark {
  background: url(components/adaptiveform/resources/images/question.svg) center center / cover no-repeat, #969696;
}

Wiederholen Sie diesen Vorgang für jede SCSS-Datei unter adaptiveform/, die auf Bilder verweist (Schaltfläche, Akkordeon, Assistent, Container, Freihandsignatur usw.). Es wird empfohlen, in Ihrer IDE ein projektweites Suchen/Ersetzen über theme/src/components/adaptiveform/ durchzuführen.

Schritt 5: Erstellen des Einstiegspunkt-SCSS für adaptive Formulare step-5-create-adaptiveform-scss

Erstellen Sie theme/src/components/adaptiveform/_adaptiveform.scss im Site-Design. Diese Datei muss:

Verwenden Sie Folgendes als vollständigen Einstiegspunkt (stimmt mit der Standardintegration für alle auf Kernkomponenten basierenden Formularkomponenten überein):

//== Adaptive Form components (forms theme integration)
// Variables and mixins for adaptive form components
@import 'variables';
@import 'mixin';

//== Core adaptive form components
@import './button/_button.scss';
@import './checkboxgroup/_checkboxgroup.scss';
@import './container/_container.scss';
@import './datepicker/_datepicker.scss';
@import './dropdown/_dropdown.scss';
@import './fileinput/_fileinput.scss';
@import './footer/_footer.scss';
@import './image/_image.scss';
@import './numberinput/_numberinput.scss';
@import './panelcontainer/_panelcontainer.scss';
@import './radiobutton/_radiobutton.scss';
@import './text/_text.scss';
@import './textinput/_textinput.scss';
@import './accordion/_accordion.scss';
@import './tabsontop/_tabsontop.scss';
@import './pageheader/_pageheader.scss';
@import './wizard/_wizard.scss';
@import './title/_title.scss';
@import './telephoneinput/_telephoneinput.scss';
@import './emailinput/_emailinput.scss';
@import './recaptcha/_recaptcha.scss';
@import './verticaltabs/_verticaltabs.scss';
@import './checkbox/_checkbox.scss';
@import './termsandconditions/_termsandconditions.scss';
@import './switch/_switch.scss';
@import './hcaptcha/_hcaptcha.scss';
@import './turnstile/_turnstile.scss';
@import './review/_review.scss';
@import './scribble/_scribble.scss';
@import './datetime/_datetime.scss';

Wenn in Ihrem Forms-Design einige Komponenten weggelassen werden (z. B. kein Scribble oder CAPTCHA), entfernen oder kommentieren Sie die entsprechenden @import aus, um Build-Fehler zu vermeiden. Die obige Liste entspricht der Canvas-Design-Struktur.

Schritt 6: Adaptives Formulardesign in das Site-Design importieren step-6-import-in-theme-scss

Fügen Sie theme/src/theme.scss einen einzelnen Import am Ende der Datei hinzu (nach anderen Komponentenimporten):

//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';

Beispiel - Ende der theme.scss:

// ... existing site component imports ...
@import './components/embed/_embed.scss';
@import './components/pdfviewer/_pdfviewer.scss';
@import './components/socialmediasharing/_social_media_sharing.scss';

//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';

Dies ist die einzige Änderung, die in der vorhandenen Site-Design-Struktur erforderlich ist. Der gesamte formularspezifische Code bleibt unter src/components/adaptiveform/.

Schritt 7: Erstellen und Bereitstellen step-7-build-and-deploy

Fehlerbehebung troubleshooting

Siehe auch see-also