Thema's in adaptieve Forms themes-for-af-using-core-components
U kunt thema's maken en toepassen om een adaptief formulier op te maken. Een thema bevat opmaakgegevens voor de componenten en deelvensters. Stijlen omvatten eigenschappen zoals achtergrondkleuren, statuskleuren, transparantie, uitlijning en grootte. Wanneer u een thema toepast, weerspiegelt de opgegeven stijl de corresponderende componenten. Een thema wordt onafhankelijk beheerd zonder verwijzing naar een adaptief formulier en kan opnieuw worden gebruikt in meerdere Adaptieve Forms.
Beschikbare thema's
Forms as Cloud Service biedt de onderstaande thema's voor op Core Components gebaseerde Adaptive Forms:
Werken met de structuur van de thema's
Een thema is een pakket dat het CSS-bestand, JavaScript-bestanden en bronnen (zoals pictogrammen) omvat die de stijl van uw Adaptieve Forms definiëren. Het thema Adaptief formulier volgt op een specifieke organisatie, die bestaat uit de volgende onderdelen:
-
src/theme.scss
: Deze map bevat het CSS-bestand dat een grote invloed heeft op het hele thema. Het fungeert als een gecentraliseerde locatie voor het definiëren en beheren van de opmaak en het gedrag van uw thema. Door dit bestand te bewerken, kunt u wijzigingen aanbrengen die overal in het thema worden toegepast. Zo kunt u de vormgeving en functionaliteit van zowel de adaptieve Forms- als AEM Sites-pagina's wijzigen. -
src/site
: Deze map bevat CSS-bestanden die worden toegepast op de gehele pagina van AEM site. Deze bestanden bestaan uit code en stijlen die van invloed zijn op de algemene functionaliteit en lay-out van de pagina van de AEM. Alle wijzigingen die u hier aanbrengt, worden doorgevoerd op alle pagina's van uw site. [Wanneer moet u het gebruiken?] -
src/components
: De CSS-bestanden in deze map zijn ontworpen voor afzonderlijke AEM kerncomponenten. Elke specifieke map voor een component bevat een.scss
bestand dat die component in een adaptief formulier opmaakt. Het bestand /src/components/accordion/_accordion.scss bevat bijvoorbeeld stijlgegevens voor de component Adaptive Forms Accordion. -
src/resources
: Deze map bevat statische bestanden, zoals pictogrammen, logo's en lettertypen. Deze bronnen worden gebruikt om de visuele elementen en het algehele ontwerp van uw thema te verbeteren.
Een thema maken
Forms as Cloud Service biedt de onderstaande thema's voor Core Components based Adaptive Forms.
U kunt al deze thema's aanpassen om een nieuw thema te maken.
Een thema aanpassen customize-a-theme-core-components
Wanneer u een thema aanpast, wordt hiermee verwezen naar het wijzigen en aanpassen van de weergave van een thema. Wanneer u een thema aanpast, wijzigt u de ontwerpelementen, lay-out, kleuren, typografie en soms de onderliggende code. Hiermee kunt u een unieke en op maat gemaakte look voor uw website of toepassing maken met behoud van de basisstructuur en -functionaliteit die door het thema worden geboden.
Vereisten prerequisites-to-customize
- Verken uzelf met een pijplijn instellen in Cloud Manager en het hebben van basiskennis van hoe te opstelling helpt een pijpleiding u efficiënt beheren en uw themaaanpassingen opstellen.
- Leer hoe u een gebruiker configureren met de rol van contribuant. Begrijpen hoe te om een gebruiker met de bijdragerrol te vormen laat u de noodzakelijke toestemmingen voor themaaanpassing verlenen.
- Installeer de nieuwste versie van Apache Maven. Apache Maven is een tool voor automatisering van build die veel wordt gebruikt voor Java™-projecten. De installatie van de recentste versie verzekert u de noodzakelijke gebiedsdelen voor themaaanpassing.
- Installeer een teksteditor zonder opmaak. Bijvoorbeeld Microsoft® Visual Studio Code. Het gebruiken van een gewone tekstredacteur zoals de Code van Microsoft® Visual Studio verstrekt een gebruikersvriendelijk milieu voor het uitgeven en het wijzigen van themadossiers.
Uw omgeving instellen
- Adaptieve Forms Core-componenten inschakelen voor uw lokale ontwikkelings- en Cloud Service-omgeving.
- Configureren front-end implementatiepijplijn voor uw Cloud Service-omgeving. Alternatief, kunt u de pijpleiding vormen later, die u de flexibiliteit geven om aan het testen prioriteit te geven en het thema te verfijnen alvorens de plaatsingspijpleiding te vestigen.
Na het leren van de voorwaarden en het vormen van de ontwikkelomgeving, bent u bereid om te beginnen uw thema aan uw specifieke vereisten aanpassen.
Een thema aanpassen steps-to-customize-a-theme-core-components
Het aanpassen van een thema is een proces met meerdere stappen. Voer de stappen in de aangegeven volgorde uit om het thema aan te passen:
De voorbeelden in het document zijn gebaseerd op de Canvas thema, maar het is belangrijk om op te merken dat u om het even welk thema kunt klonen en het aanpassen gebruikend de zelfde instructies. Deze instructies zijn van toepassing op elk thema, zodat u thema's kunt aanpassen aan uw specifieke behoeften.
1. Een thema klonen download-a-theme-core-components
Kies een van de volgende thema's om een thema voor op Core Components gebaseerde Adaptieve Forms te klonen:
Voer de volgende instructies uit om een thema te klonen:
-
Open de opdrachtprompt of het terminalvenster in uw lokale ontwikkelomgeving.
-
Voer de
git clone
om een thema te klonen.code language-none git clone [Path of Git Repository of the theme]
Vervang de [Pad van Git Repository van het thema] met de werkelijke URL van de overeenkomstige Git Repository van het thema
Als u bijvoorbeeld het thema Canvas wilt klonen, voert u de volgende opdracht uit:
code language-none git clone https://github.com/adobe/aem-forms-theme-canvas
Nadat de opdracht is uitgevoerd, beschikt u over een lokale kopie van het thema op uw computer in het dialoogvenster
aem-forms-theme-canvas
map.
2. Naam van thema instellen set-name-of-theme
-
Open de themamap in een teksteditor zonder opmaak. Als u bijvoorbeeld het dialoogvenster
aem-forms-theme-canvas
omslag in de redacteur van de Code van Visual Studio. -
Ga naar de
aem-forms-theme-canvas
map. -
Voer de volgende opdracht uit:
code language-none code .
De omslag opent in de Code van Visual Studio.
-
Open de
package.json
bestand voor bewerking. -
Stel de waarden in voor de
name
endescription
kenmerken.Het kenmerk name wordt gebruikt om het thema op unieke wijze te identificeren, zoals "aem-forms-wknd-theme" en in het dialoogvenster Stijl tabblad van Wizard Formulier maken. Het beschrijvingskenmerk bevat aanvullende details over het thema, inclusief het doel en de scenario's waarvoor het is ontworpen. U kunt ook de versie, beschrijving en licentie voor het thema opgeven.
-
Sla het bestand op en sluit het.
3. Een thema aanpassen customize-the-theme
U kunt afzonderlijke componenten aanpassen of wijzigingen op themaniveau aanbrengen met algemene variabelen van een thema. Wijzigingen in algemene variabelen zijn van invloed op alle afzonderlijke componenten. U kunt bijvoorbeeld algemene variabelen gebruiken om de randkleur te wijzigen van alle componenten van een adaptief formulier en een heldere vulkleur om CTA (Call to action) in te stellen met behulp van knopcomponent:
Stijlen voor themaniveau instellen theme-customization-global-level
De variable.scss
Het bestand bevat de algemene themavariabelen. Door deze variabelen bij te werken, kunt u op themaniveau op stijl betrekking hebbende veranderingen aanbrengen. Voer de volgende stappen uit om stijlen op themaniveau toe te passen:
-
Open de
<your-theme-sources>/src/site/_variables.scss
bestand voor bewerking. -
Wijzig de waarde van een willekeurige eigenschap. De standaardfoutkleur is bijvoorbeeld
red
. De foutkleur wijzigen vanred
totblue
wijzigt u de hexkleurcode van de$errorvariable
. Bijvoorbeeld:$error: #196ee5
. -
Sla het bestand op en sluit het.
U kunt ook de opdracht variable.scss
bestand voor het instellen van lettertypefamilie en -type, thema- en lettertypekleuren, lettergrootte, themaspatiëring, foutpictogram, themarand en meer variabele die van invloed zijn op meerdere componenten van het adaptieve formulier.
Stijlen op componentniveau instellen component-based-customization
U kunt ook het lettertype, de kleur, de grootte en andere CSS-eigenschappen wijzigen van een specifieke kerncomponent van Adaptief formulier. Bijvoorbeeld knop, selectievakje, container, voettekst en meer. U kunt een stijl op de knop of het selectievakje toepassen door het CSS-bestand van de specifieke component te bewerken en het uit te lijnen met de stijl van uw organisatie. Een stijl van een component aanpassen:
-
Het bestand openen
<your-theme-sources>/src/components/<component>/<component.scss>
voor bewerken. Als u bijvoorbeeld de lettertypekleur van de knopcomponent wilt wijzigen, opent u de knop<your-theme-sources>/src/components/button/button.scss
, bestand. -
Wijzig desgewenst de waarde van een object. Als u bijvoorbeeld de kleur van de knopcomponent wilt wijzigen wanneer u de muisaanwijzer verplaatst naar
green
wijzigt u de waarde vancolor: $white
eigenschap in decmp-adaptiveform-button__widget:hover
klasse naar hexadecimale code#12B453
of een andere vorm vangreen
. De uiteindelijke code ziet er als volgt uit:code language-none .cmp-adaptiveform-button__widget:hover { background: $dark-gray; color: #12B453; }
-
Sla het bestand op en sluit het.
Wanneer een stijl zowel op thema als componentenniveau wordt bepaald, krijgt de stijl die op het componentenniveau wordt bepaald prioriteit.
4. Test een aangepast thema test-the-theme
Voer de volgende stappen uit om een voorvertoning van de wijzigingen in de lokale omgeving te bekijken en deze te testen en het thema aan te passen aan de vereisten voor verschillende AEM:
4.1. De lokale omgeving configureren voor testen rename-env-file-theme-folder
-
Open de themamap in een teksteditor zonder opmaak. Open bijvoorbeeld de
aem-forms-theme-canvas
omslag in de redacteur van de Code van Visual Studio. -
De naam van de
env_template
bestand naar.env
in de themamap en voeg de volgende parameters toe:code language-none * **AEM url** AEM_URL=https://[author-instance] * **AEM Adaptive form name** AEM_ADAPTIVE_FORM=Form_name * **AEM proxy port** AEM_PROXY_PORT=7000
De URL van het formulier is bijvoorbeeld
http://localhost:4502/editor.html/content/forms/af/contactusform.html
. De waarden van:- AEM_URL =
http://localhost:4502/
- AEM_ADAPTIVE_FORM =
contactusform
- AEM_URL =
-
Sla het bestand op.
4.2 Het thema testen met behulp van de lokale omgeving start-a-local-proxy-server
-
Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap
aem-forms-theme-canvas
. -
Open de opdrachtprompt of terminal.
-
Uitvoeren
npm install
om de gebiedsdelen te installeren. -
Uitvoeren
npm run live
om een voorbeeld van het formulier weer te geven met het bijgewerkte thema in uw lokale browser.note note NOTE Als er een fout optreedt tijdens de uitvoering van de npm run live
opdracht, voert de volgende opdrachten uitnpm run live
opdracht:npm install parcel --save-dev
npm i @parcel/transformer-sass
Dit is een hete implementatie. Dus wanneer u wijzigingen aanbrengt en de _variables.scss
en button.scss
bestanden selecteert de server automatisch de wijzigingen en geeft een voorvertoning weer van de meest recente uitvoer. De lijn [Browsersync] File event [change]
Geeft aan dat de server de laatste wijzigingen heeft herkend en de wijzigingen in de lokale omgeving implementeert.
Nadat u de voorbeelden hebt gevolgd die zowel op themaniveau als op componentniveau voor themaaanpassingen worden geleverd, worden de foutberichten van een adaptief formulier gewijzigd in de blue
kleur, terwijl de labelkleur voor de knopcomponent verandert in green
bij het aanwijzen.
Een voorbeeld weergeven van de stijl voor themaniveau
Stijl op componentniveau voorvertonen
Het thema testen voor formulieren die worden gehost in een Cloud Service-omgeving
U kunt ook het thema testen voor het adaptieve formulier dat wordt gehost op uw as a Cloud Service AEM Forms-exemplaar. Voer de volgende stappen uit om de lokale omgeving voor het testen van de thema's te configureren en in te stellen met de Adaptive Forms die wordt gehost op de cloudinstantie:
-
Open de themamap in een teksteditor zonder opmaak. Open bijvoorbeeld de
aem-forms-theme-canvas
omslag in de redacteur van de Code van Visual Studio. -
De naam van de
env_template
bestand naar.env
en voeg de volgende parameters toe:code language-none * **AEM url** AEM_URL=https://[author-instance] * **AEM Adaptive form name** AEM_ADAPTIVE_FORM=Form_name * **AEM proxy port** AEM_PROXY_PORT=7000
De URL van het formulier in de cloud-omgeving is bijvoorbeeld
https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html
. De waarden van:- AEM_URL =
https://author-XXXX-cmstg.adobeaemcloud.com/
- AEM_ADAPTIVE_FORM =
contactusform
- AEM_URL =
-
Sla het bestand op.
-
Maak een lokale gebruiker.
note note NOTE Een lokale gebruiker maken: - Ga naar AEM Home > Tools > Security > Users .
- Zorg ervoor dat de gebruiker lid is van de
forms-users
groep.
-
Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap
aem-forms-theme-canvas
. -
Uitvoeren
npm run live
en u wordt omgeleid naar een lokale browser. -
Klikken
SIGN IN LOCALLY (ADMIN TASKS ONLY)
en aanmelden met de lokale gebruikersgegevens.
U kunt een voorbeeld van het adaptieve formulier bekijken met de meest recente wijzigingen. Zodra, bent u tevreden met de wijzigingen die in een themamap worden gedaan, stel het thema aan uw milieu van AEM Cloud Service gebruikend de front-end pijpleiding op.
5. Een thema gebruiken deploy-the-theme
Om het thema aan uw milieu van de Cloud Service op te stellen gebruikend de front-end pijpleiding:
5.1 Een opslagplaats voor thema maken create-a-new-theme-repo
U hebt een opslagplaats nodig om het thema te implementeren. Aanmelden bij uw AEM Cloud Manager-opslagplaats en voeg nieuwe opslagplaats voor uw thema toe.
-
Nieuwe opslagplaats voor thema's maken door op de knop Repositories > Add Repository.
-
Geef de Naam opslagplaats in de Opslagplaats toevoegen in. De opgegeven naam is bijvoorbeeld
custom-canvas-theme-repo
. -
Klik op Save.
-
Klikken Copy Repository URL om de URL van de repository te kopiëren.
note note NOTE - U kunt één opslagplaats voor meerdere thema's gebruiken.
- Om verschillende thema's op te stellen, moet u afzonderlijke front-end pijpleidingen tot stand brengen.
- U kunt bijvoorbeeld dezelfde gegevensopslagruimte gebruiken als
custom-canvas-theme-repo
, voor Canvas-thema, WKND-thema en EASEL-thema. Als u de thema's echter wilt implementeren, moet u aparte front-end pijpleidingen maken. De toekomstige aanpassingen voor een specifiek thema worden opgesteld gebruikend de overeenkomstige front-end pijpleiding.
5.2. Verhoog de wijzigingen in de gegevensopslagruimte committing-the-changes
Breng nu de wijzigingen aan in de themaopslagplaats van uw AEM Forms-Cloud Service.
-
Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap
aem-forms-theme-canvas
. -
Open de opdrachtprompt of terminal.
-
Voer de volgende opdracht in de vermelde volgorde uit:
code language-none git remote add [alias-name-for-repository] [URL of repository] git add . git commit git push [name-for-createdrepository]
Bijvoorbeeld:
code language-none git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/ git add . git commit git push canvascloudthemerepo
5.3 Loop de frontend pijpleiding run-a-frontend-pipeline
Het thema wordt opgesteld gebruikend pijpleiding aan de voorzijde.. Voer de volgende stappen uit om thema te implementeren:
-
Meld u aan bij de AEM Cloud Manager-opslagplaats.
-
Klikken Add van de knop Pipelines sectie.
-
Selecteren Add Non-Production Pipeline of Add Production Pipeline op basis van de omgeving van de Cloud Service. Hier kunt u bijvoorbeeld de Add Production Pipeline is geselecteerd.
-
In de Add Production Pipeline als onderdeel van de Configuration stappen, specificeer naam voor uw pijpleiding. De naam van de pijplijn is bijvoorbeeld
customcanvastheme
. -
Klik op Continue.
-
Selecteer de Targeted Deployment > de Front-end code opties, in de Source Code stappen.
-
Selecteer de Repository en de Git Branch waarden met de meest recente wijzigingen. Hier is bijvoorbeeld de naam van de geselecteerde opslagplaats
custom-canvas-theme-repo
en de Git-vertakking ismain
. -
Selecteer de Code Location als
/
, als de wijzigingen aanwezig zijn in de hoofdmap. -
Klik op Save.
Nadat de pijpleidingsopstelling volledig is, wordt de vraag-aan-actie kaart bijgewerkt.
-
Klik de gecreeerde pijpleiding met de rechtermuisknop aan.
-
Klikken Run .
Zodra de bouwstijl volledig is, wordt het thema beschikbaar bij de auteursinstantie voor het gebruik. Het verschijnt onder de Style in de wizard Adaptief formulier maken, terwijl u een adaptief formulier maakt.
Een thema toepassen op een adaptief formulier using-theme-in-adaptive-form
De stappen voor het toepassen van een thema op een adaptief formulier zijn:
-
Meld u aan bij de AEM Forms-auteur.
-
Selecteren Adobe Experience Manager > Forms > Forms & Documenten.
-
Klikken Maken > Adaptieve Forms. De wizard voor het maken van adaptief formulier wordt geopend.
-
Selecteer de sjabloon voor de kerncomponent in het dialoogvenster Bron tab.
-
Selecteer het thema in het dialoogvenster Stijl tab.
-
Klikken Maken.
De thema's Adaptief formulier worden gebruikt als onderdeel van een adaptieve formuliersjabloon om opmaak te definiëren terwijl u een adaptief formulier maakt.
Aanbevolen procedures best-practices
-
Elementen uit een ander thema verwijderen
Wanneer u een thema bewerkt, kunt u door elementen (zoals afbeeldingen) bladeren en elementen uit andere thema's toevoegen. U bewerkt bijvoorbeeld de achtergrond van een pagina. Wanneer u bijvoorbeeld Page > Background > Add > Image Er wordt dan een dialoogvenster weergegeven waarin u door afbeeldingen in andere thema's kunt bladeren en deze kunt toevoegen.
U kunt problemen met uw huidige thema oplossen als een element wordt toegevoegd uit een ander thema en het andere thema wordt verplaatst of verwijderd. U wordt aangeraden te voorkomen dat u bladeren en elementen uit andere thema's toevoegt.
-
De lay-outbreedte van het containervenster wijzigen
Het wordt niet aanbevolen de lay-outbreedte van het containervenster te wijzigen. Wanneer u de breedte van een containerdeelvenster opgeeft, wordt het statisch en wordt het niet aangepast aan verschillende weergaven.
-
Formuliereditor of themaeditor gebruiken voor het werken met kop- en voettekst
Gebruik de themaeditor als u koptekst en voettekst wilt opmaken met opmaakopties zoals lettertypestijl, achtergrond en transparantie.
Gebruik de opties voor de formuliereditor als u informatie wilt opgeven, zoals een logoafbeelding, een bedrijfsnaam in de koptekst en copyrightinformatie in de voettekst.
Veelgestelde vragen faq
V: Welke aanpassing neemt prioriteit wanneer het maken van aanpassingen in een themamap op zowel het globale niveau als componentenniveau?
Ans: Wanneer aanpassingen op zowel het globale niveau als componentenniveau worden gemaakt, neemt de aanpassing op het componentenniveau prioriteit.
Zie ook see-also
- Een AEM adaptief formulier maken
- Een AEM adaptief formulier toevoegen aan de AEM Sites-pagina
- Thema's toepassen op een AEM adaptief formulier
- Componenten toevoegen aan een AEM adaptief formulier
- CAPTCHA gebruiken in een AEM adaptieve vorm
- PDF-versie (DoR) van een AEM adaptief formulier genereren
- Een AEM adaptief formulier vertalen
- Adobe Analytics inschakelen voor een adaptief formulier om het formuliergebruik bij te houden
- Aangepast formulier verbinden met Microsoft SharePoint
- Adaptief formulier aansluiten op Microsoft Power Automate
- Adaptief formulier aansluiten op Microsoft OneDrive
- Adaptief formulier aansluiten op Microsoft Azure Blob Storage
- Aangepast formulier verbinden met Salesforce
- Adobe Sign gebruiken in een AEM adaptief formulier
- Een nieuwe landinstelling toevoegen voor een adaptief formulier
- Adaptieve formuliergegevens naar een database verzenden
- Verzend AanpassingsGegevens van de Vorm naar een eindpunt REST
- Adaptieve formuliergegevens naar AEM workflow verzenden
- Forms Portal gebruiken om AEM Adaptive Forms op een AEM website weer te geven
- Formulierindeling instellen voor verschillende schermgrootten en apparaattypen
- Document met record genereren voor adaptieve Forms (kerncomponenten)
- Een adaptieve Forms maken met herhalende secties
- Voorbeeldthemasjablonen en formuliergegevensmodellen
- Adaptieve Forms Core-componenten inschakelen in de as a Cloud Service en lokale ontwikkelomgeving van AEM Forms