DocumentatieAEM as a Cloud ServiceHandboek

Thema's gebruiken om de stijl van op Core Components gebaseerde Adaptive Forms te bepalen themes-for-af-using-core-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Gebruiker
  • Ontwikkelaar
Versie
Artikelkoppeling
AEM 6,5
klik hier
AEM as a Cloud Service
Dit artikel

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.

    adaptieve vorm gebaseerde themastructuur

  • 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.

Werkschema van themaaanpassing

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

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:

  1. Kloon een thema
  2. Naam van thema instellen
  3. Een thema aanpassen
  4. Een thema testen
  5. Een thema implementeren

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:

  1. Open de opdrachtprompt of het terminalvenster in uw lokale ontwikkelomgeving.

  2. 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

  1. 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.

  2. Navigeer naar de map aem-forms-theme-canvas .

  3. Voer de volgende opdracht uit:

    code language-none 
       code .

    open de themamap in een gewone tekstredacteur

    De omslag opent in de Code van Visual Studio.

  4. Open het package.json -bestand om het te bewerken.

  5. Stel de waarden in voor de kenmerken name en version .

    de naamverandering van het Thema van het Canvas beeld

    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 of customtheme . In dit geval hebben we de naam echter opgegeven als aem-forms-wknd-theme .

  6. Open het package-lock.json -bestand om het te bewerken.

  7. Stel de waarden in voor de kenmerken name en version . Zorg ervoor dat de waarden voor de kenmerken name en version in het bestand Package-lock .json overeenkomen met die in het bestand Package.json .

    de naamverandering van het Thema van het Canvas beeld

  8. (Optioneel) Open het ReadMe -bestand om het te bewerken en werk de naam van het thema bij.

    de naamverandering van het Thema van het Canvas beeld

  9. 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 in Package.json bestand en Package-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 het Package.json -bestand en het Package-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 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

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:

  1. Open het <your-theme-sources>/src/site/_variables.scss -bestand om het te bewerken.

  2. Wijzig de waarde van een willekeurige eigenschap. De standaardfoutkleur is bijvoorbeeld red . Als u de foutkleur wilt wijzigen van red in blue , wijzigt u de hexadecimale kleurcode van de $errorvariable . Bijvoorbeeld $error: #196ee5 .

  3. Sla het bestand op en sluit het.

    geef thema 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:

  1. 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 .

  2. 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 eigenschap color: $white in de klasse cmp-adaptiveform-button__widget:hover in hexadecimale code #12B453 of een andere tint van green . De uiteindelijke code ziet er als volgt uit:

    code language-none 
    .cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}

  3. Sla het bestand op en sluit het.

    geeft CSS TextBox uit

    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

  1. Open de themamap in uw winde. Bijvoorbeeld, open de aem-forms-theme-canvas omslag in de redacteur van de Code van Visual Studio.

  2. 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

  3. Sla het bestand op.

    Structuur van het Thema van Canvas

4.2 Het thema testen met een lokale omgeving start-a-local-proxy-server

  1. Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap aem-forms-theme-canvas .

  2. Open de opdrachtprompt of terminal.

  3. Voer npm install uit om de afhankelijkheden te installeren.

  4. 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 opdracht npm 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.

Proxy browserSync

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

Voorbeeld: De kleur van de fout die aan blauw wordt geplaatst

Previewing de stijl van het componentenniveau

Voorbeeld: De kleur van de omslag die aan groen 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:

  1. Open de themamap in uw winde. Bijvoorbeeld, open de aem-forms-theme-canvas omslag in de redacteur van de Code van Visual Studio.

  2. 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

  3. Sla het bestand op.

  4. 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 .

  5. Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap aem-forms-theme-canvas .

  6. Voer npm run live uit en u wordt omgeleid naar een lokale browser.

  7. 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.

  1. Maak een nieuwe opslagplaats voor een thema door op Repositories > Add Repository te klikken.

    creeer nieuwe themarepo

  2. Specificeer de Naam van de Bewaarplaats in voeg de dialoogdoos van de Bewaarplaats toe. De opgegeven naam is bijvoorbeeld custom-canvas-theme-repo .

  3. Klik op Save.

    voeg de Repo van het Thema van het Canvas toe

  4. Klik op Copy Repository URL om de URL van de gegevensopslagruimte te kopiëren.

    het thema URL van het Canvas

    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.

  1. Navigeer naar de hoofdmap van de themamap. In dit geval is de naam van de themamap aem-forms-theme-canvas .

  2. Open de opdrachtprompt of terminal.

  3. 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

    Gecommitteerde Veranderingen

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:

  1. Meld u aan bij uw AEM Cloud Manager-opslagplaats.

  2. Klik op de knop Add in de sectie Pipelines .

  3. 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.

  4. 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 .

  5. Klik op Continue.

  6. Selecteer de opties Targeted Deployment > Front-end code in
    de Source Code stappen.

  7. 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-vertakking main .

  8. Selecteer Code Location als / als de wijzigingen aanwezig zijn in de hoofdmap.

  9. Klik op Save.
    creeer front-endpipe

    Nadat de pijpleidingsopstelling volledig is, wordt de vraag-aan-actie kaart bijgewerkt.

  10. Klik de gecreeerde pijpleiding met de rechtermuisknop aan.

  11. Klik op Run .

    looppas-a-pipleine

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.

douanethema beschikbaar onder stijllusje

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:

  1. Meld u aan bij de AEM Forms-auteur.

  2. Selecteer Adobe Experience Manager > Forms > Forms & Documenten.

  3. Klik creëren > Aanpassings Forms. De wizard voor het maken van adaptief formulier wordt geopend.

  4. Selecteer het malplaatje van de kerncomponent in het Source lusje.

  5. Selecteer het thema in de Stijl tabel.

  6. 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 uitgeeft-knoop > 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.

  • Gebruikend een vormredacteur of themaredacteur voor het werken met kopbal en footer

    Gebruik een themaeditor als u de kop- 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, de bedrijfsnaam in de koptekst en copyrightinformatie in de voettekst.

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

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab