[AEM Forms]{class="badge positive" title="van toepassing op AEM Forms)."}

Een Adaptief Forms-thema insluiten in een AEM Sites-thema

U kunt een Adaptief thema van Forms (zoals het ​ thema van het Canvas van AEM Forms ​) in uw thema van AEM Sites inbedden. Die manier, drijft één enkel thema zowel uw plaatspagina’s als om het even welke Aangepaste Forms ingebed op die pagina’s, met één bouwstijl en één plaatsing via de ​ Voorste-EindPijpleiding van AEM ​.

Dit artikel is bedoeld voor ontwikkelaars die het standaard (of aangepaste) AEM Sites-thema onderhouden of aanpassen en die adaptieve formulieropmaak willen opnemen zonder een aparte Forms-themaimplementatie te beheren.

Vereisten prerequisites

Voordat u begint, moet u controleren of:

Stap 1: De map met adaptieve formuliercomponenten maken step-1-create-folder

Maak in de site-themaopslagplaats de map waarin het Forms-thema zich bevindt:

theme/src/components/adaptiveform/

Alle Forms-themaelementen bevinden zich onder deze map zodat ze gescheiden blijven van bestaande sitecomponenten.

Stap 2: Forms-themacomponenten en -afbeeldingen kopiëren step-2-copy-components-and-images

Gebruikend uw thema van Forms (bijvoorbeeld, aem-forms-theme-canvas) en uw plaats thema wegen:

Stap 3: Variabelen en combinaties kopiëren step-3-copy-variables-and-mixins

In het Forms-thema worden gedeelde variabelen en combinaties gebruikt onder src/site/ . Kopieer slechts deze twee dossiers in de wortel van adaptiveform/ (niet binnen a site subfolder):

Kopieer ​​niet de rest van de omslag van het thema van Forms src/site/; slechts worden deze twee dossiers vereist voor de ingebedde vormstijlen.

toe

Stap 4: Afbeeldingspaden corrigeren in SCSS step-4-fix-image-paths

In het Forms-thema verwijzen SCSS-deelbestanden vaak naar afbeeldingen met paden zoals ./resources/ of url(resources/ . Na het kopiëren naar het sitethema, moeten deze paden naar theme/src/components/adaptiveform/resources/images/ verwijzen.

Het standaardthema van het plaatssjabloon gebruikt Pakket, dat url() wegen van theme/src/ oplost. Gebruik dus het pad theme/src/components/adaptiveform/resources/images/ (relatief ten opzichte van components/adaptiveform/resources/images/ ) wanneer de afbeeldingen zich in theme/src/ bevinden.

vind en vervang in elk .scss onder theme/src/components/adaptiveform/:

Voorbeeld - vóór (het thema van Forms):

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

na (plaatsthema, beelden in adaptiveform/resources/images/):

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

Herhaal dit voor elk SCSS-bestand onder adaptiveform/ dat verwijst naar afbeeldingen (knop, accordeon, wizard, container, krabbel en andere). Het wordt aanbevolen om in uw IDE via theme/src/components/adaptiveform/ een zoek-/vervangactie voor het hele project uit te voeren.

Stap 5: Maak het adaptieve form entry-point SCSS step-5-create-adaptiveform-scss

Maak theme/src/components/adaptiveform/_adaptiveform.scss in het sitethema. Dit bestand moet:

Gebruik het volgende als het volledige ingangspunt (komt overeen met de standaardintegratie met alle op Core Components-gebaseerde formuliercomponenten):

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

Als uw Forms-thema bepaalde componenten weglaat (bijvoorbeeld geen krabbels of captcha), verwijdert of maakt u opmerkingen over de overeenkomende @import -regels om bouwfouten te voorkomen. De lijst hierboven past de ​ het themastructuur van het Canvas ​ aan.

Stap 6: Importeer het adaptieve formulierthema in het site-thema step-6-import-in-theme-scss

In theme/src/theme.scss, voeg één enkele invoer bij het eind van het dossier (na andere componenteninvoer) toe:

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

Voorbeeld - eind van 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';

toe

Dit is de enige vereiste wijziging in de bestaande sitethemastructuur. Alle formulierspecifieke code blijft onder src/components/adaptiveform/ staan.

Stap 7: Bouwen en implementeren step-7-build-and-deploy

Problemen oplossen troubleshooting

Zie ook see-also