Adaptiva Forms Core-komponenter adaptive-forms-core-components-introduction

Med de adaptiva Forms Core-komponenterna i Adobe Experience Manager kan ni skapa övertygande registreringsupplevelser.

Kärnkomponenter overview

I Adobe Experience Manager (AEM) är komponenter byggstenarna som används för att skapa sidor och formulär. De är ett enkelt och kraftfullt sätt för skribenter att skapa och hantera innehåll, samtidigt som de ger utvecklarna den flexibilitet och utbyggbarhet som behövs för att skapa anpassade komponenter. Dessa är utformade för att snabba upp utvecklingstiden och minska underhållskostnaderna för webbplatser och formulär, vara flexibla och kan enkelt anpassas efter specifika behov på en webbplats och i ett formulär.

Core-komponenterna är också utformade för att vara responsiva och ha stöd för ett stort antal enheter, bland annat stationära datorer, surfplattor och smarttelefoner. De följer också de senaste webbstandarderna och de bästa metoderna, vilket gör dem till en robust och tillförlitlig lösning för att skapa webbinnehåll.

De viktigaste komponenterna är generellt sett ett oumbärligt verktyg för att skapa och hantera webbinnehåll i AEM, en kraftfull och flexibel lösning som kan minska utvecklingstiden och underhållskostnaderna, samtidigt som de ger webbplatsens besökare en bra användarupplevelse.

Adaptiva Forms Core-komponenter

De adaptiva Forms Core-komponenterna är en uppsättning av 29 BEM-kompatibla komponenter med öppen källkod som bygger på grundvalen för Adobe Experience Manager WCM Core Components. De är särskilt utformade för att användas för att skapa Adaptiv Forms, som är formulär som anpassar sig efter användarens enhet, webbläsare och skärmstorlek.

Dessa komponenter kan användas för att skapa enastående datainhämtnings- och registreringsupplevelser genom ett stort antal alternativ för formulärfält, inklusive textfält, kryssrutor, listrutor med mera. De innehåller även funktioner som validering, villkorsstyrd logik och responsiv design, som kan användas för att skapa formulär som är användarvänliga och enkla att använda.

Eftersom dessa komponenter är öppen källkod kan utvecklare dessutom enkelt anpassa och utöka komponenterna så att de passar organisationens specifika behov. Och dessa komponenter bygger på BEM-metoden som ser till att de är skalbara och underhållbara.

adaptiv formulärbild

Funktioner features

Produktionsklart
De adaptiva Forms Core-komponenterna är 24 robusta WCM-komponenter.
Molnklar
Tillgängligt för AEM Forms as a Cloud Service.
Mångsidig
Komponenterna representerar generiska begrepp som Forms-författare kan använda för att sammanställa praktiskt taget vilken layout som helst.
Konfigurerbar
Innehållsprinciper på mallnivå definierar vilka funktioner som får användas eller inte.
Tillgänglig
De innehåller ARIA-etiketter, stöd för tangentbordsnavigering och text för hjälpmedelstekniker som skärmläsare.
Temabell
Komponenterna implementerar Style System och koden följer BEM CSS-konventioner.
Anpassningsbar
Flera mönster gör det enkelt att anpassa, från att justera HTML till att återanvända avancerade funktioner.
Versioner
Versionsprincipen försäkerställer att kärnkomponenterna inte bryter din plats när du förbättrar saker som kan påverka dig.
Öppen källkod
Om något inte är som det ska, bidrar du till förbättringen.

Fördelar benefits

Datainhämtningsupplevelser är avgörande för generering och registrering av leads, och de adaptiva Forms Core-komponenterna är en kraftfull lösning för att skapa formulär som är optimerade för datainhämtning. En del skäl till att använda kärnkomponenter för att skapa dessa upplevelser över grundläggande komponenter är:

  • Tillgänglighet på GitHub: De AEM adaptiva Forms Core-komponenterna har öppen källkod och är tillgängliga på GitHub tillsammans med omfattande dokumentation. Detta gör det enklare för utvecklare att förstå komponenterna och hur de fungerar, samt att bidra till utvecklingen av dem. Webbplatsen aemcomponents.dev är också en värdefull resurs, där utvecklare kan se komponenterna i praktiken och få tillgång till detaljerad dokumentation.

  • BEM-modell för formatering: Kärnkomponenterna följer BEM-modellen (Block Element Modifier) för formatering, som är en väletablerad och allmänt använd metod för att organisera CSS. Det gör det enklare för utvecklare att förstå hur formaten är ordnade och hur de kan ändras för att passa just deras behov.

  • Inget beroende av tredjepartsbibliotek: En av fördelarna med kärnkomponenterna är att de inte är beroende av JavaScript-bibliotek från tredje part, inklusive JQuery och Underscore. Detta gör komponenterna snabbare och enklare samt enklare att integrera i en befintlig AEM.

  • Fokusera på prestanda och tillgänglighet: Kärnkomponenterna har byggts med prestanda och tillgänglighet i åtanke, vilket återspeglas i deras höga poäng för Google Lightroom och webbinarium. Detta gör det enklare för utvecklare att skapa tillgängliga och högpresterande webbsidor, vilket blir allt viktigare i dagens digitala landskap.

  • Formulärkomponenter i webbplatserna 30, mallar och teman: De centrala komponenterna har stöd för formulärkomponenter i webbplatserna 30, mallar och teman, vilket gör det enklare för utvecklare att skapa och anpassa formulär i AEM.

  • Enklare att formatera: Det är enklare att formatera kärnkomponenterna än deras motsvarigheter till grundkomponenterna. Processen för att skapa teman liknar Sites, med möjlighet att ärva samma tema/CSS från den överordnade webbplatssidan. Dessutom gör BEM-modellen för formatering det enklare att förstå och ändra formaten.

  • Hjälpmedel: Adaptiva Forms Core-komponenter har stöd för hjälpmedelsstandarder och riktlinjer för att säkerställa att formulär kan användas av personer med funktionshinder, inklusive sådana som använder hjälpmedelstekniker som skärmläsare.

  • Versionshantering: Du kan skapa och hantera flera versioner av en Core Components-baserad Adaptive Forms, delta i samverkansdiskussioner via kommentarer och bifoga anteckningar till specifika formulärkomponenter, vilket förbättrar den övergripande formuläruppbyggnadsupplevelsen.

Tillgängliga komponenter: En uppdelning efter komponenttyp

Den aktuella versionen av AEM Forms har följande huvudkomponenter, Foundation Components och Form Block Components (Edge Delivery Services).

Komponenter
Foundation Components
Kärnkomponenter
Formulärblockskomponenter
Ytterligare information
Adobe Sign Block
✔️
Adobe Sign-integrering är bara tillgänglig för Foundation Components.
Dragspel
✔️
✔️
För Foundation-komponenter kan du konfigurera dragspelslayouten i panelkomponentegenskaperna.
Adaptivt formulärfragment
✔️
✔️
För Foundation Components (Foundation-komponenter) kan du lägga till ett fragment från Assets Browser.
Adaptiv form reCAPTCHA
✔️
✔️
✔️
För Foundation-komponenter använder du Captcha-komponenten för att lägga till Google reCaptcha i ett formulär.
Knapp
✔️
✔️
✔️
CAPTCHA
✔️
För Foundation-komponenter använder du Captcha-komponenten för att lägga till Google reCaptcha i ett formulär.
Diagram
✔️
Kryssruta
✔️
✔️
Kryssrutegrupp
✔️
✔️
✔️
För Foundation-komponenter använder du kryssrutekomponenten för att lägga till flera kryssrutor
Datumindatafält
✔️
Använd komponenten datumväljare för kärnkomponenter. Du kan också lägga till separata komponenter för textruta eller numerisk ruta för att hämta dag, månad och år.
Datumväljaren
✔️
✔️
✔️
Listruta
✔️
✔️
✔️
E-post
✔️
✔️
✔️
Bifogad fil
✔️
✔️
✔️
Lista över bifogade filer
✔️
Sidfot
✔️
✔️
✔️
Fotnotsplatshållare
✔️
Formulärbehållare
✔️
✔️
✔️
Använd komponenten Rotpanel för Foundation-komponenter.
Formulärtitel
✔️
✔️
Använd komponenten title för Foundation-komponenter.
hCaptcha
✔️
✔️
Sidhuvud
✔️
✔️
✔️
Vågräta flikar
✔️
✔️
För Foundation Components (Foundation-komponenter) kan du konfigurera layouten tabbar överst (vågräta flikar) i panelkomponentegenskaperna.
Bild
✔️
✔️
✔️
Bildval
✔️
Knappen Nästa
✔️
✔️
Använd guidekomponenten för nästa och föregående knappar för att flytta mellan flera paneler.
Numerisk ruta
✔️
✔️
✔️
Numerisk stege
✔️
Panel
✔️
✔️
✔️
Lösenordsruta
✔️
✔️
Telefon
✔️
✔️
✔️
Knappen Föregående
✔️
Använd guidekomponenten för nästa och föregående knappar för att flytta mellan flera paneler.
Alternativknapp
✔️
✔️
Grupp med alternativknappar
✔️
Återställ knapp
✔️
✔️
✔️
Klottersignatur
✔️
Avgränsare
✔️
Skicka-knapp
✔️
✔️
✔️
Sammanfattningssteg
✔️
Byt
✔️
✔️
Tabell
✔️
Villkor
✔️
✔️
Text
✔️
✔️
✔️
Textruta
✔️
✔️
✔️
Titel
✔️
Använd komponenten Formulärtitel för kärnkomponenter.
Turnstile Captcha
✔️
Turnstile Captcha är bara tillgängligt för Foundation-komponenter.
Lodräta tabbar
✔️
✔️
För Foundation-komponenter kan du konfigurera flikarna till vänster (lodräta flikar) layout i panelkomponentegenskaperna
guide
✔️
✔️
✔️
För Foundation-komponenter kan du konfigurera guidelayouten i panelkomponentegenskaperna
NOTE
  • Förutom de komponenter som anges ovan stöder Forms-blocket alla giltiga HTML5-indatatyper och textområde som komponenter.
  • Vill du ha en komponent som inte listas ovan? Begär det via e-post aem-forms-ea@adobe.com från din officiella adress.

Lättanvänd formulärredigerare

Redigeraren för Core Components based Adaptive Forms liknar den du redan använder för att skapa AEM Sites Pages. Det här får du:

  • Välbekanta gränssnittselement och inställningar: När du konfigurerar egenskaper för formulärkomponenter ser du en egenskapsdialogruta som liknar den du använder för WCM Core-komponenter. Det gör det snabbare att hitta de alternativ du behöver. Precis som för WCM Core Components visas egenskapsdialogrutan i mitten av redigeraren med tydliga flikar som avgränsar grundläggande och avancerade alternativ, hjälptext och hjälpmedelsinformation - allt i ett flikformat för enkel navigering.

  • Regelredigeraren: Du kan lägga till logiska och dynamiska funktioner i formulären utan att skriva kod. Med den inbyggda regelredigeraren kan du:

    • Visa eller dölj fält baserat på användarval
    • Aktivera eller inaktivera ett objekt
    • Ange ett värde för ett objekt
    • Utför beräkningar
    • Ange ett objekts egenskap
    • Validera datapost
    • Anropa en tjänst (anropa extern funktion)
    • Använd inbyggda funktioner (fördefinierade funktioner för vanliga uppgifter)
    • Använd anpassade funktioner (egen kod för specifika behov)
    • Validera fält och paneler (kontrollera att data uppfyller kraven)
    • Validera ett objekts värde
    • Utför funktioner för att beräkna värdet för ett objekt
    • Anropa en FDM-tjänst (Form Data Model) och utföra en åtgärd
    • Lägg till format dynamiskt (ändra utseendet baserat på villkor)
    • Skapa andra regler (kedjeåtgärder och logik)
    • med mera!

    Regelredigeraren saknar kodredigerare. Du kan använda anpassade funktioner för att lägga till egen kod för specifika behov i regelredigeraren.

  • Fylla i formulär i förväg: Du kan automatiskt fylla i vissa fält i ett formulär med befintliga data när en användare öppnar det. Detta sparar tid och arbete eftersom användaren inte behöver ange information som redan är tillgänglig manuellt. Core Components Editor erbjuder en tjänst för OOTB-förifyllning för att fylla i formulärfält med hjälp av en formulärdatamodell. Du kan också skapa anpassade förifyllningstjänster för mer komplexa scenarier.

  • Registreringsdokument (DoR): En DoR-referens (Document of Record) refererar till en formell, utskrivbar representation av data som skickas via formuläret. Det fungerar som en permanent post för den information som användaren har angett och ger en ögonblicksbild av inskickade data i ett användarvänligt format, vanligtvis ett PDF-dokument. Du kan använda redigeraren för att enkelt konfigurera en anpassad mall eller använda en OTB-mall för att generera en DoR-fil.

  • Formulärdatamodell: En adaptiv Forms datamodell (FDM) fungerar som en brygga mellan din adaptiva Forms och dina datakällor. Det definierar i huvudsak strukturen och strukturen för de data som formulären samlar in och interagerar med. Du kan använda redigeraren för att enkelt ansluta formuläret till en Forms datamodell (FDM).

  • Skicka formulär: En formuläröverföring avser processen för användare som fyller i och skickar sina ifyllda formulär. Detta utlöser en serie åtgärder som definieras i formulärets konfiguration, vilket i slutänden leder till lagring eller bearbetning av skickade data. Den adaptiva Forms-redigeraren erbjuder en mängd alternativ för att konfigurera formulärinskickat material. En del vanliga åtgärder för att skicka är:

  • Adaptiva Forms Core-komponenter i webbplatssidredigeraren: Du kan aktivera och använda adaptiva Forms Core-komponenter i AEM sidredigeraren och AEM Experience Fragments för att skapa datainhämtningsupplevelser direkt tillsammans med att skapa en webbplatssida.

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

Aktivera adaptiva Forms Core-komponenter

Genom att aktivera adaptiva Forms Core-komponenter i AEM Forms as a Cloud Service kan du börja skapa, publicera och leverera Core Components-baserade adaptiva Forms och Headless Forms med hjälp av AEM Forms Cloud Service-instanser i flera kanaler. Detaljerade instruktioner om hur du aktiverar komponenter i adaptiv Form Core finns i Aktivera adaptiva Forms Core-komponenter i AEM Forms as a Cloud Service och lokal utvecklingsmiljö.

De adaptiva Forms Core-komponenterna har följande krav.

AEM
AEM Forms-tillägg
Adaptiva Forms Core-komponenter
AEM as a Cloud Service
Forms - digital registrering
Version 2.0.10+
AEM 6.5
Forms-tillägg
Version 1.1.12+

Om din AEM Cloud Service SDK-version är äldre än 2023.02.0 bör du kontrollera att du har prerelease -flaggan aktiverad i miljön eftersom adaptiva Forms Core-komponenter ingick i den förinstallerade versionen före version 2023.02.0.

Skapa en grundkomponentbaserad adaptiv form

Du kan utföra följande åtgärder i både AEM Forms as a Cloud Service- och AEM 6.5 Forms-miljöer:

Åtgärd
AEM Forms Version
Skapa ett fristående anpassat formulär
AEM Forms som Cloud Service
Skapa ett anpassat formulär på AEM Sites Page
AEM 6.5 Forms, AEM Forms som Cloud Service
Skapa ett anpassat formulär i AEM Experience Fragment
AEM 6.5 Forms, AEM Forms som Cloud Service
Konvertera ett anpassat formulär till ett upplevelsefragment
AEM 6.5 Forms, AEM Forms som Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c