[AEM Forms]{class="badge positive" title="Gäller AEM Forms)."}

Bädda in ett adaptivt Forms-tema i ett AEM Sites-tema

Du kan bädda in ett adaptivt Forms-tema (till exempel AEM Forms Canvas-temat) i ditt AEM Sites-tema. På så sätt kör ett enda tema både dina webbplatssidor och alla adaptiva Forms-filer som är inbäddade på dessa sidor, med ett bygge och en distribution via AEM Front-End Pipeline.

Den här artikeln är avsedd för utvecklare som vill ha anpassade AEM Sites-standardteman (eller anpassade) utan att behöva hantera en separat Forms-temadistribution.

Förutsättningar prerequisites

Kontrollera att du har:

Steg 1: Skapa mappen med adaptiva formulärkomponenter step-1-create-folder

Skapa den mapp där Forms-temat ska finnas i din databas för webbplatsteman:

theme/src/components/adaptiveform/

Alla Forms-temaresurser placeras under den här mappen så att de hålls åtskilda från befintliga webbplatskomponenter.

Steg 2: Kopiera Forms temakomponenter och bilder step-2-copy-components-and-images

Använda sökvägarna för ditt Forms-tema (till exempel aem-forms-theme-canvas) och ditt webbplatstema:

Steg 3: Kopiera variabler och blandningar step-3-copy-variables-and-mixins

Forms-temat använder delade variabler och blandningar under src/site/. Kopiera endast dessa två filer till root i adaptiveform/ (inte inuti en site -undermapp):

Kopiera inte resten av Forms-temats src/site/-mapp. Endast dessa två filer krävs för de inbäddade formulärformaten.

Steg 4: Korrigera bildbanor i SCSS step-4-fix-image-paths

I Forms-temat refererar SCSS-komponentfiler ofta till bilder med sökvägar som ./resources/ eller url(resources/. Efter kopiering till webbplatstemat måste sökvägarna peka på theme/src/components/adaptiveform/resources/images/.

Standardtemat för webbplatsmallen använder Parcel, som löser url() sökvägar från theme/src/. När bilderna finns i theme/src/components/adaptiveform/resources/images/ använder du sökvägen components/adaptiveform/resources/images/ (i förhållande till theme/src/).

Sök och ersätt i var .scss under theme/src/components/adaptiveform/:

Exempel - före (Forms-tema):

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

Efter (webbplatstema, bilder i adaptiveform/resources/images/):

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

Upprepa för varje SCSS-fil under adaptiveform/ som refererar till bilder (knapp, dragspelspanel, guide, behållare, klottra med flera). Du bör söka/ersätta i din IDE över theme/src/components/adaptiveform/ i hela projektet.

Steg 5: Skapa SCSS för adaptiv formulärstart step-5-create-adaptiveform-scss

Skapa theme/src/components/adaptiveform/_adaptiveform.scss i webbplatstemat. Filen måste:

Använd följande som fullständig startpunkt (matchar standardintegreringen med alla Core Components-baserade formulärkomponenter):

//== 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';

Om ditt Forms-tema utelämnar vissa komponenter (till exempel ingen klottra eller captcha) bör du ta bort eller kommentera bort motsvarande @import-rader för att undvika byggfel. Listan ovan matchar strukturen för Canvas-temat.

Steg 6: Importera det adaptiva formulärtemat i webbplatstemat step-6-import-in-theme-scss

I theme/src/theme.scss lägger du till en enskild import i slutet av filen (efter andra komponentimporter):

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

Exempel - slutet av 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';

Det här är den enda ändringen som krävs i den befintliga temastrukturen för webbplatsen. All formulärspecifik kod behålls under src/components/adaptiveform/.

Steg 7: Bygg och driftsätt step-7-build-and-deploy

Felsökning troubleshooting

Se även see-also