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

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 som formaterar en viss komponent i ett adaptivt formulär. Till exempel /src/components/button/_button.scss filen innehåller 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 för att 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 på alla författare- och publiceringsinstanser.
  • 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 en 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 vid publiceringsinstansen. Kontrollera att du manuellt publicerar klientbiblioteket som det hänvisas till i ett adaptivt formulär till dina publiceringsmiljö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:

Exemplen i dokumentet är baserade på Arbetsyta men du kan klona vilket tema som helst 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 git clone för att klona ett tema.

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

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

    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 Författarna av alla filer i den överordnade mappen är betrodda och klicka Ja, jag litar på författarna.

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

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

The variable.scss filen 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 <your-theme-sources>/src/site/_variables.scss fil 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 $errorvariabel. Till exempel: $error: #196ee5.

    Exempel: Felfärgen är blå

  3. Spara och stäng filen.

På samma sätt kan du använda variable.scss för att ange teckensnittsfamilj och -typ, tema- och teckensnittsfärger, teckenstorlek, temaavstånd, felikoner, temats kantlinjeformat och fler variabler 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 <your-theme-sources>/src/components/button/button.scss, fil .

  2. Ändra värdet enligt dina önskemål. Om du till exempel vill ändra färgen på knappkomponenten vid muspekaren till Grön, ändrar du värdet på color: $white -egenskapen i cmp-adaptiveform-button__widget:hover klass som ska hex-kod nr 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 <your-theme-sources> mapp. 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 till exempel är customcanvasthemekö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

    Client Library Build

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

När du har testat temat på den lokala utvecklingsmiljön kan du fortsätta att distribuera temat till produktionsmiljöerna, inklusive både författaren och publiceringsinstanser. 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 Överför paket och klicka Bläddra.
  4. Navigera till och markera [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Klicka Ö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 med att 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 och dokument.

  3. Klicka Skapa > Adaptiv Forms.

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

  5. Ange Namn för din adaptiva form.

    note note
    NOTE
    • Som standard är adaptiveform.theme.canvas3 -temat är valt.
    • Du kan välja ett annat tema från Temaklientbibliotek listruta.
  6. Klicka 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 prioriteras när du gör anpassningar i en temamapp på både global nivå och komponentnivå?

Ans: När ett format definieras på både tema- och komponentnivå har det format 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 Theme Client Library gör 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 .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