DokumentationAEM 6.5Användarhandbok

Skapa eller anpassa ett anpassat formulärtema introduction-to-theme

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Administratör
  • Utvecklare
Version
Artikellänk
AEM as a Cloud Service
Klicka här
AEM 6.5
Denna artikel

I AEM Forms 6.5 är ett tema ett AEM klientbibliotek som du använder för att definiera format (utseende och känsla) för ett adaptivt formulär. Ett tema innehåller formatinformation för komponenterna och panelerna. Format innehåller egenskaper som bakgrundsfärger, lägesfärger, genomskinlighet, justering och storlek. När du använder ett tema återspeglas det angivna formatet i motsvarande komponenter. Ett tema hanteras separat utan referens till ett adaptivt formulär och kan återanvändas i flera adaptiva Forms.

Tillgängliga teman available-theme

AEM 6.5-miljön innehåller följande teman för Core Components based Adaptive Forms:

Om temats struktur understanding-structure-of-theme

Ett tema är ett paket som omfattar CSS-filen, JavaScript-filer och resurser (som ikoner) som definierar formatet för din adaptiva Forms. Temat Adaptiv form följer en särskild organisation som består av följande komponenter:

  • src/theme.scss: Den här mappen innehåller CSS-filen som har stor effekt på hela temat. Det fungerar som en central plats för att definiera och hantera temats format och beteende. Genom att redigera den här filen kan du göra ändringar som tillämpas överallt i temat, vilket påverkar både utseendet och funktionaliteten på dina adaptiva Forms- och AEM Sites-sidor.

  • src/site: Den här mappen innehåller CSS-filer som används på en hel AEM. Dessa filer består av kod och format som påverkar den övergripande funktionen och layouten för AEM webbplats. Alla ändringar som görs här återspeglas på alla sidor på webbplatsen.

  • src/components: CSS-filerna i den här mappen är utformade för enskilda AEM kärnkomponenter. Varje dedikerad mapp för en komponent innehåller en .scss-fil som formaterar den specifika komponenten i ett adaptivt formulär. Filen /src/components/button/_button.scss innehåller till exempel formatinformation för den adaptiva Forms Button-komponenten.

    Arbetsytans temastruktur

  • src/resources: Den här mappen innehåller statiska filer som ikoner, logotyper och teckensnitt. Resurserna används för att förbättra temats visuella element och övergripande design.

Skapa ett tema

AEM Forms 6.5 innehåller följande teman för Core Components based Adaptive Forms.

Du kan anpassa något av dessa teman och skapa ett-tema.

Anpassa ett tema customize-a-theme-core-components-based-adaptive-forms

Att anpassa ett tema avser processen att ändra och anpassa utseendet på ett tema. När du anpassar ett tema ändrar du dess designelement, layout, färger, typografi och ibland den underliggande koden. På så sätt kan du skapa ett unikt och skräddarsytt utseende för webbplatsen eller tillämpningen, samtidigt som du bibehåller den grundläggande strukturen och funktionaliteten som temat ger.

NOTE
  • Använd Pakethanteraren för att distribuera ett tema till alla författare- och Publish-instanser.
  • Ett temaklientbibliotek importeras eller exporteras via Package Manager precis som andra paket.

Krav för att anpassa ett tema prerequisites

  • Aktivera adaptiva Forms Core-komponenter för din miljö.

  • Installera den senaste versionen av Apache Maven. Apache Maven är ett automatiserat byggverktyg som ofta används för Java™-projekt. Genom att installera den senaste versionen får du de beroenden du behöver för att anpassa temat.

  • Lär dig skapa ett klientbibliotek i Adobe Experience Manager. AEM tillhandahåller klientbibliotek, som gör att du kan lagra din klientkod i databasen, ordna den i kategorier och definiera när och hur varje kodkategori ska skickas till klienten.

  • Installera en vanlig textredigerare. Exempel: Microsoft® Visual Studio Code. Med en vanlig textredigerare som Microsoft® Visual Studio Code får du en användarvänlig miljö där du kan redigera och ändra temafiler.

  • Kontrollera att AEM Forms-miljön är igång.

Att tänka på när du anpassar ett tema consideration

  • Se till att du använder Arketype-projektet som används för att aktivera adaptiva Forms Core-komponenter i din miljö för att anpassa dina teman.

  • När du publicerar ett adaptivt formulär publiceras inte klientbiblioteken automatiskt på Publish-instansen. Kontrollera att du manuellt publicerar klientbiblioteket som det hänvisas till i ett adaptivt formulär till dina Publish-miljöer.

  • Adobe rekommenderar att du inte ändrar klassnamn för klientbibliotek.

Anpassa ett tema customize-a-theme-core-components

Att skapa eller anpassa ett tema är en process i flera steg. Utför stegen i listan för att skapa/anpassa temat:

  1. Klona ett tema
  2. Anpassa temats utseende
  3. Temat är klart för lokal distribution
  4. Distribuera temat i en lokal miljö
  5. Distribuera temat i produktionsmiljön

Exemplen i dokumentet är baserade på temat Canvas, men du kan klona ett tema och anpassa det med samma instruktioner. Dessa instruktioner kan användas för alla teman och du kan ändra teman efter dina specifika behov.

1. Klona Git-databasen för temat clone-git-repo-of-theme

Om du vill klona ett tema för Core Components based Adaptive Forms väljer du ett av följande teman:

Utför följande instruktioner för att klona ett tema:

  1. Öppna kommandotolken eller terminalfönstret i den lokala utvecklingsmiljön.

  2. Kör kommandot git clone om du vill klona ett tema.

    code language-none 
       git clone [Path of Git Repository of the theme]

    Ersätt [Sökvägen till Git-databasen för temat] med den faktiska URL:en för motsvarande Git-databas för temat

    Om du till exempel vill klona arbetsytans tema kör du följande kommando:

    code language-none 
       git clone https://github.com/adobe/aem-forms-theme-canvas

  3. Välj Lita på författarna till alla filer i den överordnade mappen och klicka på Ja, jag litar på författarna.

När kommandot har körts har du en lokal kopia av temat på datorn i mappen aem-forms-theme-canvas.

2. Anpassa temat customize-the-theme

Du kan anpassa enskilda komponenter eller göra ändringar på temanivå med hjälp av temats globala variabler. När du ändrar globala variabler får du en överlappande effekt på alla enskilda komponenter. Du kan till exempel använda globala variabler för att ändra kantfärgen på alla komponenter i ett adaptivt formulär eller tillämpa en levande fyllningsfärg på knapparna Call to Action (CTA). Du kan:

Ange format för temanivåer theme-customization-global-level

Filen variable.scss innehåller temats globala variabler. Genom att uppdatera dessa variabler kan du göra formatrelaterade ändringar på temanivå. Så här använder du format på temanivå:

  1. Öppna filen <your-theme-sources>/src/site/_variables.scss för redigering.

  2. Ändra värdet för alla egenskaper. Standardfelfärgen är t.ex. röd. Om du vill ändra felfärgen från rött till blått ändrar du färghexkoden för variabeln $error. Exempel: $error: #196ee5.

    Exempel: Felfärgen är blå

  3. Spara och stäng filen.

På samma sätt kan du använda filen variable.scss för att ange teckensnittsfamilj och -typ, tema- och teckensnittsfärger, teckensnittsstorlek, temaavstånd, felikon, temagränsformat och mer variabel som påverkar flera adaptiva formulärkomponenter.

Ange format för komponentnivå component-based-customization

Du kan också anpassa teckensnitt, färg, storlek och andra CSS-egenskaper för specifika komponenter i den adaptiva formulärkärnan, som knappar, kryssrutor, behållare, sidfötter och mycket annat. Genom att redigera den CSS-fil som är kopplad till den specifika komponenten kan du anpassa dess format efter din organisations varumärke. Så här anpassar du en komponents stil:

  1. Öppna filen <your-theme-sources>/src/components/<component>/<component.scss> för redigering. Om du till exempel vill ändra teckenfärgen för knappkomponenten öppnar du filen <your-theme-sources>/src/components/button/button.scss .

  2. Ändra värdet enligt dina önskemål. Om du till exempel vill ändra färgen på knappkomponenten vid mushovring till Grön, ändrar du värdet för egenskapen color: $white i klassen cmp-adaptiveform-button__widget:hover till hexkoden 12b453 eller någon annan grön nyans. Den färdiga koden ser ut så här:

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

  3. Spara och stäng filen.

NOTE
När ett format definieras både på tema- och komponentnivå prioriteras det format som definieras på komponentnivå.

3. Temat är klart för distribution generate-the-clientlib

Om du vill distribuera ett tema till en AEM måste det konverteras till ett klientbibliotek. Så här konverterar du temat till ett klientbibliotek:

  1. Öppna kommandotolken eller terminalfönstret.

  2. Navigera till mappen <your-theme-sources>. Exempel: C:\aem-forms-theme-canvas

  3. Kör följande kommando:

    code language-none 
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]

    Ersätt [yourtheme] med namnet på det anpassade temat. Om namnet på det anpassade temat är customcanvastheme kör du följande kommando

    code language-none 
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme

    När kommandot har körts skapas en klientbiblioteksmapp på themerepo\theme-clientlibs\[yourtheme].

    Generering av klientbibliotek

    Klientbibliotekets plats

4. Använd temat i en lokal miljö deploy-the-theme-on-a-local-environment

Så här distribuerar du temat till din lokala utvecklings- eller testmiljö:

  1. Kopiera klientbiblioteket, som skapades i föregående avsnitt, till ditt Archetype-projekt på följande sökväg:

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. Öppna kommandotolken eller terminalen.

  3. Navigera till rotkatalogen för ditt AEM Archetype-projekt, det projekt som används för att aktivera adaptiva Form Core-komponenter.

  4. Kör följande kommando för att distribuera det anpassade temat i din miljö:

    mvn clean install

    Klientbiblioteksbygge

5. Använd ett tema i produktionsmiljön deploy-theme

När du har testat temat på din lokala utvecklingsmiljö kan du fortsätta att distribuera temat till dina produktionsmiljöer, inklusive både författaren och Publish-instanserna. Så här distribuerar du temat i dina produktionsmiljöer:

  1. Logga in i din AEM.
  2. Öppna Pakethanteraren. Standardwebbadressen är https://localhost:4502/crx/packmgr/index.jsp.
  3. Klicka på Överför paket och klicka på Bläddra.
  4. Navigera till och markera [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Klicka på Öppna.
  5. Klicka på Installera. Upprepa steget i alla produktionsmiljöer.

När paketet har installerats är temat tillgängligt för val.

Temaklientbibliotek

NOTE
Om du får problem med att komma åt inloggningsdialogrutan på en publiceringsinstans för att installera paketet via pakethanteraren kan du försöka logga in via följande URL: http://[Publish Server URL]:[PORT]/system/console. Detta ger dig åtkomst till att logga in på Publish-instansen, så att du kan fortsätta med installationsprocessen.

Använda ett tema i ett anpassat formulär using-theme-in-adaptive-form

Steg för att tillämpa ett tema på ett adaptivt formulär är:

  1. Logga in på den lokala AEM författarinstansen.

  2. Ange dina uppgifter på inloggningssidan för Experience Manager. Välj Adobe Experience Manager > Forms > Forms & Documents.

  3. Klicka på Skapa > Adaptiv Forms.

  4. Välj en anpassad Forms Core Components-mall och klicka på Nästa. Lägg till egenskaper visas

  5. Ange namnet för ditt adaptiva formulär.

    note note
    NOTE
    • Som standard är temat adaptiveform.theme.canvas3 valt.
    • Du kan välja ett annat tema i listrutan Temaklientbibliotek.

  6. Klicka på Skapa.

Adaptiva formulärteman används som en del av en adaptiv formulärmall för att definiera format när du skapar ett adaptivt formulär.

Ta bort ett tema delete-a-theme

Så här tar du bort oanvända eller oönskade teman:

  1. Logga in på din Author-instans.
  2. Öppna http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. Navigera till apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
  4. Ta bort temamappen och spara ändringarna.

Frågor och svar faq

F: Vilken anpassning prioriterar när du gör anpassningar i en temamapp på både global nivå och komponentnivå?

Ans: När en stil definieras på både tema- och komponentnivå har den stil som definieras på komponentnivå företräde.

F: Vilka åtgärder ska vidtas om det anpassade temat inte syns i Theme Client Library?

Ans: Om ditt anpassade tema inte visas i listrutan Theme Client Library gör du så här:

  1. Navigera till den plats där du har lagt till ditt anpassade temaklientbibliotek. Den rekommenderade sökvägen är /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

  2. Öppna filen .content.xml och inkludera följande metadata:

    code language-none 
        formstheme:true
    allowproxy:true

  3. Spara filen och distribuera temat igen.

Se även

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2