Teman i Adaptiv Forms (kärnkomponenter)

Du kan skapa och använda teman för att stilisera ett adaptivt formulär med hjälp av kärnkomponenterna. 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. Temat hanteras oberoende av varandra utan referens till ett adaptivt formulär.

När du skapa ett adaptivt formulär med hjälp av kärnkomponenter visas"Out-of-the-Box"-teman under Stil -fliken. Som standard är bara Arbetsyta temat är tillgängligt.

Använda Canvas-temat i Adaptive Forms med hjälp av kärnkomponenter

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

1. Logga in på din AEM Forms-författarinstans.

2. Tryck Adobe Experience Manager > Forms > Forms och dokument.

3. Klicka Skapa > Adaptiv Forms. Guiden för att skapa adaptiva formulär öppnas.

4. Välj kärnkomponentmallen i Källa -fliken.

   OBSERVERA

   När du skapar ett adaptivt formulär med kärnkomponenter visas Canvas-temat på fliken Format. Det här är det enda färdiga temat som är tillgängligt just nu. Men du kan ändra temat efter dina önskemål och spara det för framtida bruk genom att skapa en frontpipeline.

5. Välj arbetsytans tema i Stil -fliken.

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.

Anpassa temat

Om du vill anpassa ett tema

• konfigurera en pipeline i Cloud Manager
• Konfigurera en användare med medarbetarroll.
• Du borde ha en grundläggande kunskaper i Git och Cloud Service Git-databaser.

Så här anpassar du ett Canvas-tema:

1. Klona arbetsytans tema
2. Förstå temats struktur
3. Ändra namn i package.json och package_lock.json
4. Skapa
5. Starta den lokala proxyservern
6. Anpassa temat
7. Verkställ ändringarna
8. Distribuera pipeline

1. Klona arbetsytans tema

Öppna kommandotolken och kör följande kommando för att klona arbetsytans tema:

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

2. Förstå temats struktur

Ett Adaptivt formulärtema är ett paket som innehåller CSS-, JavaScript- och statiska resurser som definierar formulärets format och som följer strukturen i ett adaptivt formulärtema. Ett Adaptivt formulärtema har följande struktur som är typisk för ett front end-projekt:

• src/components: JavaScript- och CSS-filer som är specifika för AEM kärnkomponenter
• src/resources: Statiska filer som ikoner, logotyper och teckensnitt
• src/site: JavaScript- och CSS-filer som gäller för hela AEM Sites-sidan
• src/theme.ts: Huvudstartpunkten för JavaScript- och CSS-temat
• src\theme.scss: JavaScript- och CSS-filer som gäller för hela temat

The src/components -mappen har JavaScript- och CSS-filer som är specifika för alla AEM kärnkomponenter som knapp, kryssruta, behållare, sidfot osv. Du kan formatera en knapp eller kryssruta genom att redigera CSS-filen som är specifik för AEM.

Om du vill anpassa temat kan du starta den lokala proxyservern och se temaanpassningarna i realtid baserat på det faktiska AEM innehållet.

3. Ändra namn i temat package.json och package_lock.json för arbetsytan

Uppdatera namnet på och versionen av Canvas-temat i package.json och package_lock.json filer.

4. Skapa .env-filen i en temamapp

Skapa en .env i temamappen och lägg till följande parametrar:

• AEM url
  AEM_URL=https://[author-instance]

• AEM webbplatsnamn
  AEM_ADAPTIVE_FORM=Form_name

• AEM proxyport
  AEM_PROXY_PORT=7000

5. Starta en lokal proxyserver

1. Navigera från kommandoraden till temats rot på din lokala dator.

2. Kör npm install och npm hämtar beroenden och installerar projektet.

3. Kör npm run live och proxyservern startas.

   

4. Tryck eller klicka LOGGA IN LOKALT (ENDAST ADMINISTRATÖRSÅTGÄRDER) och logga in med de autentiseringsuppgifter för proxyanvändare som du har fått från AEM.

   

   OBSERVERA

   • Skapa en lokal användare som kan logga in lokalt. Ange deltagarroll för temadesigner.
   • Om du anger AEM URL som http://localhost:[port]/ i .env -filen med Canvas-temat omdirigeras du direkt till webbläsaren.

5. När du är inloggad ändrar du URL:en i webbläsaren så att den pekar på sökvägen till exempelinnehållet som AEM har gett dig.

   • Om den angivna sökvägen till exempel /content/formname.html?wcmmode=disabled, ändra URL:en till http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled

   

Navigera till ett adaptivt formulär och se arbetsytans tema som används i ett adaptivt formulär.

6. Anpassa temat

1. Öppna filen i redigeraren <your-theme-sources>/src/site/_variables.scss.

   OBSERVERA

   Du kan formatera alla adaptiva formulärkomponenter direkt på en plats genom att redigera site/_variables.scss -fil.

2. Redigera variabeln för font colour till red.

   

   Formatera de olika AEM

   Du kan formatera de olika komponenterna i ett adaptivt formulär genom att ändra dess CSS-fil i redigeraren. Det finns olika CSS-mappar för varje komponent i kärnan Adaptiv form i mappen Tema på arbetsytan.

   

   Om du vill ange format för en viss komponent i temaredigeraren kan du redigera CSS-koden i en temamapp. Om du till exempel vill ändra kantfärgen för ett textrutefält öppnar du CSS-filen i redigeraren och ändrar kantfärgen.

   

3. När du sparar filen känner proxyservern igen ändringen via raden [Browsersync] File event [change].

   

4. När du växlar tillbaka till webbläsaren på den lokala proxyservern visas ändringen omedelbart.

   

Temadesigner förhandsgranskar ändringarna på den lokala proxyservern och anpassar temat enligt kraven för olika AEM.

Innan du implementerar ändringarna i AEM Git-databasen måste du få åtkomst till Git-databasinformation.

7. Verkställ ändringarna

När du har ändrat temat och testat det med en lokal proxyserver implementerar du ändringarna i Git-databasen för din AEM Forms-Cloud Service. Det gör det anpassade temat tillgängligt i Forms Cloud Service-miljön så att designers av Adaptive Forms kan använda det.

Innan du implementerar ändringar i Git-databasen för din AEM Forms-Cloud Service måste du klona databasen på din lokala dator. Så här klonar du databasen:

1. Skapa en ny temabasera genom att klicka på Repositories alternativ.

   

2. Klicka Add Repository och ange Databasnamn i Lägg till databas -dialogrutan. Klicka på Save.

   

3. Klicka Copy Repository URL för att kopiera URL:en för den skapade databasen.

   

4. Öppna kommandotolken och klona den molndatabas som skapats ovan.

   git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
   

5. Flytta filerna i den temalagringsplats som du redigerar till molndatabasen med ett kommando som liknar
   cp -r [source-theme-folder]/* [destination-cloud-repo]
   Använd till exempel det här kommandot
   cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

6. I molndatabasens katalog implementerar du de temafiler du flyttade till med följande kommandon.

   git add .
   git commit -a -m "Adding theme files"
   git push
   

7. Anpassningarna skickas till Git-databasen.

   

Dina anpassningar lagras nu säkert i Git-databasen.

8. Kör frontpipeline

1. Skapa frontendpipeline för att distribuera det anpassade temat. Lär dig hur du ställer in en pipeline för första raden för att distribuera anpassat tema.
2. Kör den skapade frontend-pipelinen för att distribuera en anpassad temamapp under Style i en guide för att skapa adaptiva formulär.

Exempel på hur du anpassar temat

1. Logga in på din AEM Forms-författarinstans.
2. Öppna ett adaptivt formulär som skapats med kärnkomponenter.
3. Starta den lokala proxyservern med kommandotolken och klicka på LOGGA IN LOKALT (ENDAST ADMINISTRATÖRSÅTGÄRDER).
4. När du har loggat in omdirigeras du till webbläsaren och ser det aktuella temat.
5. Ladda ned Tema Canvas och extrahera den hämtade zip-mappen.
6. Öppna den extraherade zip-mappen i det redigeringsprogram du föredrar.
7. Skapa en .env i temamappen och lägg till parametrar: AEM URL, AEM_ADAPTIVE_FORM och AEM_PROXY_PORT.
8. Öppna CSS-filen för textrutan i temamappen för arbetsytan och ändra kantfärgen till red och spara ändringarna.
9. Öppna webbläsaren igen och du ser ändringarna direkt i ett adaptivt formulär.
10. Flytta temamappen för arbetsytan i din klonade databas.
11. Verkställ ändringarna och kör frontpipeline.

När du har kört pipeline är temat tillgängligt på fliken Format.

God praxis

• Undvika resurser från ett annat tema

  När du redigerar ett tema kan du bläddra bland och lägga till resurser (till exempel bilder) från andra teman. Du redigerar till exempel bakgrunden på en sida. Om du till exempel väljer Page > Background > Add > Image visas en dialogruta där du kan bläddra bland och lägga till bilder i andra teman.

  Du kan stöta på problem med det aktuella temat om en resurs läggs till från ett annat tema och det andra temat flyttas eller tas bort. Du bör undvika att bläddra bland och lägga till resurser från andra teman.

• Ändra layoutbredd för behållarpanelen

  Du bör inte ändra bredden på behållarpanelens layout. När du anger bredden på en behållarpanel blir den statisk och anpassas inte till olika skärmar.

• Använda formulärredigeraren eller temaredigeraren för att arbeta med sidhuvud och sidfot

  Använd temaredigeraren om du vill formatera sidhuvud och sidfot med formatalternativ som teckensnittsformat, bakgrund och genomskinlighet.
  Om du vill ange information som logotypbild, företagsnamn i sidhuvud och copyrightinformation i sidfoten använder du alternativen för formulärredigeraren.

Resurser för Business.Adobe.com