Thema's gebruiken om de stijl van op Core Components gebaseerde Adaptive Forms te bepalen 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.
In dit artikel begrijpen we hoe we aangepaste ontwerpen kunnen maken voor op Core Component gebaseerde Adaptive Forms met gebruik van thema's.
Beschikbare thema's voor de opmaak van kerncomponenten
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 met opmaakcomponenten zoals CSS-bestanden, JavaScript-bestanden en bronnen (zoals pictogrammen) 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 om het te gebruiken?] -
src/components
: De CSS-bestanden in deze map zijn ontworpen voor afzonderlijke AEM kerncomponenten. Elke toegewijde map voor een component bevat een.scss
-bestand waarmee die component in een adaptief formulier wordt geformatteerd. 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 Adaptive Form styling-thema's voor Core Components based Adaptive Forms.
U kunt om het even welk van deze thema's aanpassen om nieuw thematot stand te brengen.
Een thema aanpassen customize-a-theme-core-components
Wanneer u een thema aanpast, wordt hiermee verwezen naar het wijzigen, opmaken 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 zelf met vestiging een pijpleiding in Cloud Manageren het hebben van basiskennis van hoe te opstelling helpt u efficiënt uw themaaanpassingen beheren en opstellen.
- Leer hoe te een gebruiker met de bijdragerrolvormen. Begrijpen hoe te om een gebruiker met de bijdragerrol te vormen laat u de noodzakelijke toestemmingen voor themaaanpassing verlenen.
- Installeer de recentste versie van Apache Maven. Apache Maven is een tool voor automatisering van build dat 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
- laat de Aangepaste Componenten van de Kern van Formsvoor uw lokale ontwikkeling en milieu van de Cloud Service toe.
- Vorm a front-end plaatsingspijpleidingvoor uw milieu van de Cloud Service. 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 vereisten en het vormen van de ontwikkelomgeving, bent u bereid om te beginnen uw thema aan te passen of te stileren volgens uw specifieke vereisten.
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 die in het document worden verstrekt zijn gebaseerd op het thema van het Canvas, 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.
Laten we beginnen met een proces om een merkervaring te maken voor de Adaptieve Forms op basis van uw Core-component met gebruik van thema's.
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 opdracht
git clone
uit om een thema te klonen.code language-none git clone [Path of Git Repository of the theme]
Vervang het [ Weg van de Bewaarplaats van het Git van het thema ] met daadwerkelijke URL van de overeenkomstige Bewaarplaats van het Git 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 de map
aem-forms-theme-canvas
.
2. Naam van thema instellen set-name-of-theme
-
Open de themamap in uw winde. Bijvoorbeeld, om de
aem-forms-theme-canvas
omslag in de redacteur van de Code van Visual Studio te openen. -
Navigeer naar de map
aem-forms-theme-canvas
. -
Voer de volgende opdracht uit:
code language-none code .
De omslag opent in de Code van Visual Studio.
-
Open het
package.json
-bestand om het te bewerken. -
Stel de waarden in voor de kenmerken
name
enversion
.note note NOTE - Het naamattribuut wordt gebruikt om het thema uniek te identificeren, en de gespecificeerde naam wordt getoond in het lusje van de Stijl van de Tovenaar van de Aanmaak van de Vorm.
- U kunt desgewenst een naam voor het thema selecteren, bijvoorbeeld
mytheme
ofcustomtheme
. In dit geval hebben we de naam echter opgegeven alsaem-forms-wknd-theme
.
-
Open het
package-lock.json
-bestand om het te bewerken. -
Stel de waarden in voor de kenmerken
name
enversion
. Zorg ervoor dat de waarden voor de kenmerkenname
enversion
in het bestandPackage-lock
.json overeenkomen met die in het bestandPackage.json
. -
(Optioneel) Open het
ReadMe
-bestand om het te bewerken en werk de naam van het thema bij. -
Sla de bestanden op en sluit ze.
Overwegingen terwijl het plaatsen van de naam van het thema
- Het is verplicht om
@aemforms
te verwijderen uit de themanaam inPackage.json
bestand enPackage-lock.json
bestand. Als u@aemforms
niet kunt verwijderen uit uw aangepaste themanaam, resulteert dit in de fout van de frontend-pijplijn tijdens de themaimplementatie. - U wordt aangeraden het thema
version
in hetPackage.json
-bestand en hetPackage-lock.json
-bestand bij te werken om wijzigingen en verbeteringen in de tijd voor uw thema nauwkeurig weer te geven. - Voor de belangrijke informatie over het gebruik, de installatie-instructies en andere relevante details wordt aangeraden de naam van het thema in het
ReadMe
-bestand bij te werken.
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 algemene variabelen bijvoorbeeld 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
Het bestand variable.scss
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 het
<your-theme-sources>/src/site/_variables.scss
-bestand om het te bewerken. -
Wijzig de waarde van een willekeurige eigenschap. De standaardfoutkleur is bijvoorbeeld
red
. Als u de foutkleur wilt wijzigen vanred
inblue
, wijzigt u de hexadecimale kleurcode van de$errorvariable
. Bijvoorbeeld$error: #196ee5
. -
Sla het bestand op en sluit het.
uit
Op dezelfde manier kunt u het bestand variable.scss
gebruiken om lettertypefamilie en -type, thema- en lettertypekleuren, lettergrootte, themaspatiëring, foutpictogram, themarand en meer variabele in te stellen 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 knop of selectievakje opmaken door het CSS-bestand van de specifieke component te bewerken en deze uit te lijnen met de stijl van uw organisatie. Een stijl van een component aanpassen:
-
Open het bestand
<your-theme-sources>/src/components/<component>/<component.scss>
voor bewerking. Als u bijvoorbeeld de lettertypekleur van de knopcomponent wilt wijzigen, opent u het bestand<your-theme-sources>/src/components/button/button.scss
. -
Wijzig desgewenst de waarde van een object. Als u bijvoorbeeld de kleur van de component Button bij de muisaanwijzer wilt wijzigen in
green
, wijzigt u de waarde van de eigenschapcolor: $white
in de klassecmp-adaptiveform-button__widget:hover
in hexadecimale code#12B453
of een andere tint 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 het thema als componentenniveau wordt bepaald, krijgt de stijl die op het componentenniveau wordt bepaald voorrang.
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. Een lokale omgeving configureren voor testen rename-env-file-theme-folder
-
Open de themamap in uw winde. Bijvoorbeeld, open de
aem-forms-theme-canvas
omslag in de redacteur van de Code van Visual Studio. -
Wijzig de naam van het
env_template
-bestand in.env
-bestand 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 een 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.
-
Voer
npm install
uit om de afhankelijkheden te installeren. -
Voer
npm run live
uit om een voorbeeld van het formulier weer te geven met het bijgewerkte thema in uw lokale browser.note note NOTE Als een fout optreedt tijdens de uitvoering van de opdracht npm run live
, voert u de volgende opdrachten uit vóór de opdrachtnpm run live
:npm install parcel --save-dev
npm i @parcel/transformer-sass
Dit is een hete implementatie. Als u dus wijzigingen aanbrengt en de _variables.scss
- en button.scss
-bestanden opslaat, selecteert de server automatisch de wijzigingen en geeft een voorvertoning van de meest recente uitvoer weer. De regel [Browsersync] File event [change]
geeft aan dat de server de laatste wijzigingen heeft herkend en de wijzigingen implementeert in de lokale omgeving.
Nadat u de voorbeelden hebt gevolgd voor het opmaken van een adaptief formulier (kerncomponenten) op themaniveau en componentniveau voor themaaanpassingen, worden de foutberichten van een adaptief formulier gewijzigd in de blue
-kleur, terwijl de labelkleur van de knopcomponent bij aanwijzen verandert in green
.
Previewing de stijl van het themaniveau
Previewing de stijl van het componentenniveau
wordt geplaatst
Als u een thema aanpast, kunt u het aangepaste ontwerp gebruiken om de op Core Component gebaseerde Adaptieve Forms te zoeken op basis van de organisatorische vereisten.
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 AEM Forms as a Cloud Service-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 uw winde. Bijvoorbeeld, open de
aem-forms-theme-canvas
omslag in de redacteur van de Code van Visual Studio. -
Wijzig de naam van het
env_template
-bestand in.env
-bestand 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 .
- Controleer of de gebruiker lid is van de groep
forms-users
.
-
Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap
aem-forms-theme-canvas
. -
Voer
npm run live
uit en u wordt omgeleid naar een lokale browser. -
Klik op
SIGN IN LOCALLY (ADMIN TASKS ONLY)
en meld u aan 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. Login aan uw bewaarplaats van AEM Cloud Manageren voeg nieuwe bewaarplaats voor uw thema toe.
-
Maak een nieuwe opslagplaats voor een thema door op Repositories > Add Repository te klikken.
-
Specificeer de Naam van de Bewaarplaats in voeg de dialoogdoos van de Bewaarplaats toe. De opgegeven naam is bijvoorbeeld
custom-canvas-theme-repo
. -
Klik op Save.
toe
-
Klik op Copy Repository URL om de URL van de gegevensopslagruimte 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 de front-end pijpleiding.. Voer de volgende stappen uit om thema te implementeren:
-
Meld u aan bij uw AEM Cloud Manager-opslagplaats.
-
Klik op de knop Add in de sectie Pipelines .
-
Selecteer Add Non-Production Pipeline of Add Production Pipeline op basis van de omgeving van de Cloud Service. Hier is bijvoorbeeld de optie Add Production Pipeline geselecteerd.
-
Geef in het dialoogvenster Add Production Pipeline de naam voor de pijplijn op als onderdeel van de stappen van Configuration . De naam van de pijplijn is bijvoorbeeld
customcanvastheme
. -
Klik op Continue.
-
Selecteer de opties Targeted Deployment > Front-end code in
de Source Code stappen. -
Selecteer de waarden Repository en Git Branch die de meest recente wijzigingen hebben ondergaan. Hier is de geselecteerde naam van de opslagplaats bijvoorbeeld
custom-canvas-theme-repo
en is de Git-vertakkingmain
. -
Selecteer 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.
-
Klik op Run .
Zodra de bouwstijl volledig is, wordt het thema beschikbaar bij de auteursinstantie voor het gebruik. Deze wordt weergegeven onder het tabblad Style in de wizard Adaptief formulier bij het maken van een adaptief formulier.
Het aangepaste thema helpt bij het maken van een merkervaring voor op Core Component gebaseerde Adaptive Forms.
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.
-
Selecteer Adobe Experience Manager > Forms > Forms & Documenten.
-
Klik creëren > Aanpassings Forms. De wizard voor het maken van adaptief formulier wordt geopend.
-
Selecteer het malplaatje van de kerncomponent in het Source lusje.
-
Selecteer het thema in de Stijl tabel.
-
Klik creëren.
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
-
vermijdend activa van een ander thema
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. Bijvoorbeeld, wanneer u Page > Background > Add > Image selecteert, ziet u een dialoog die u laat doorbladeren en beelden in ander thema 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.
-
Veranderend de lay-outbreedte van het containerpaneel
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.
Veelgestelde vragen faq
Q: Welke aanpassing neemt prioriteit wanneer het maken van aanpassingen in een themamap op zowel het globale niveau als componentenniveau?
Ans: wanneer de 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
- voegt componenten aan een AEM Aangepaste Vormtoe
- CAPTCHA gebruiken in een AEM adaptieve vorm
- Een 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
- verzendt de Adaptieve gegevens van de Vorm naar een gegevensbestand
- 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
- Versies, opmerkingen en annotaties toevoegen aan een adaptief formulier
- Adaptieve Forms vergelijken
- Formulierindeling instellen voor verschillende schermgrootten en apparaattypen
- Document met record genereren voor adaptieve Forms (kerncomponenten)
- Een adaptieve Forms maken met herhalende secties
- de themasjablonen van de Steekproef en modellen van vormgegevens
- Aangepaste Forms Core-componenten inschakelen in de as a Cloud Service en lokale ontwikkelomgeving van AEM Forms