Textbunden formatering av adaptiva formulärkomponenter inline-styling-of-adaptive-form-components
Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenterfor skapa ny Adaptive Formseller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.
Du kan definiera det övergripande utseendet och formatet för ett anpassat formulär genom att ange format med temaredigerare. Du kan också använda infogade CSS-format på enskilda adaptiva formulärkomponenter och förhandsgranska ändringarna direkt. Inline-format åsidosätter format som finns i temat.
Använda infogade CSS-egenskaper apply-inline-css-properties
Så här lägger du till infogade format i en komponent:
-
Öppna formuläret i formulärredigeraren och ändra läget till formateringsläge. Om du vill ändra läge till formateringsläge väljer du > Style.
-
Markera en komponent på sidan och markera redigeringsknappen . Stilegenskaper öppnas i sidofältet.
Du kan också välja komponenter från formulärhierarkiträdet i sidlisten. Formulärhierarkiträdet är tillgängligt som formulärobjekt i sidlisten.
I Style I visas komponenterna under Formulärobjekt. Formulärobjektslistan i sidofältet visar dock komponenter som fält och paneler. Fält och paneler är generiska komponenter som kan innehålla komponenter som textrutor och alternativknappar.
När du väljer en komponent från sidofältet visas alla underkomponenter i listan och egenskaperna för den markerade komponenten. Du kan markera en viss underkomponent och formatera den.
-
Klicka på en flik i sidofältet för att ange CSS-egenskaper. Du kan ange egenskaper som:
- Dimensions & Position (Visningsinställning, utfyllnad, höjd, bredd, marginal, position, z-index, flyttal, klar, spill)
- Text (Teckensnittsfamilj, vikt, färg, storlek, radhöjd och justering)
- Background (Bild och övertoning, bakgrundsfärg)
- Border (Bredd, stil, färg, radie)
- Effects (Skugga, Opacitet)
- Advanced (Gör att du kan skriva anpassad CSS för komponenten)
-
På samma sätt kan du använda format för andra delar av en komponent, som Widget, Captionoch Help.
-
Välj Done för att bekräfta ändringarna eller Cancel för att ignorera ändringarna.
Exempel: textbundna format för en fältkomponent example-inline-styles-for-a-field-component
Följande bilder visar ett textfält före och efter att infogade format har använts på det.
Textrutekomponent innan infogade formategenskaper används
Lägg märke till ändringen i textrutans format, så som visas i följande bild, när du har använt följande CSS-egenskaper.
Textrutekomponent efter användning av egenskaper för infogat format
Följ stegen ovan för att markera och formatera andra komponenter, till exempel paneler, skicka-knappar och alternativknappar.
Kopiera och klistra in format copy-paste-styles
Du kan också kopiera och klistra in en stil från en komponent till en annan i ett adaptivt formulär. I Style markerar du komponenten och väljer ikonen Kopiera .
Markera den andra komponenten av samma typ och välj ikonen Klistra in om du vill klistra in det kopierade formatet. Du kan också välja ikonen Radera format om du vill ta bort det använda formatet.
Ange format för olika lägen i en komponent set-styles-for-states
Du kan ange format för olika lägen för en komponenttyp. De olika lägena är: Focus, Disabled, Hover, Error, Successoch Mandatory.
Så här definierar du format för ett läge för en komponent:
-
I Style markerar du komponenten och väljer ikonen Redigera .
-
Välj läge för komponenten med State listruta.
-
Definiera formatet för komponentens markerade läge och markera för att spara egenskaperna.
Du kan också simulera status för lyckade och fel. Välj ikonen Expandera om du vill visa Simulate Success och Simulate Error alternativ.
Se även see-also
- Skapa ett AEM anpassat formulär
- Lägg till ett AEM anpassat formulär på AEM Sites-sidan
- Använda teman i ett AEM anpassat formulär
- Lägga till komponenter i ett AEM adaptivt formulär
- Använd CAPTCHA i en AEM anpassad form
- Generera PDF-version (DoR) av ett AEM adaptivt formulär
- Översätt en AEM adaptiv form
- Aktivera Adobe Analytics för ett adaptivt formulär för att spåra formuläranvändning
- Ansluta anpassat formulär till Microsoft SharePoint
- Ansluta anpassat formulär till Microsoft Power Automate
- Ansluta anpassat formulär till Microsoft OneDrive
- Ansluta anpassat formulär till Microsoft Azure Blob Storage
- Ansluta anpassat formulär till Salesforce
- Använda Adobe Sign i en AEM anpassad form
- Lägga till en ny språkinställning för ett adaptivt formulär
- Skicka adaptiva formulärdata till en databas
- Skicka data för anpassat formulär till en REST-slutpunkt
- Skicka anpassade formulärdata till AEM arbetsflöde
- Använd Forms Portal för att lista AEM Adaptive Forms på en AEM webbplats