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
Finns 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
Mallnivå innehållsprinciper ange 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 Formatsystemoch 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
The versionsprincip sä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 finns 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. The 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 Core Components ä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.

  • Fokus på prestanda och tillgänglighet: Kärnkomponenterna byggs 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-mallen och -teman, vilket gör det enklare för utvecklare att skapa och anpassa formulär i AEM.

  • Enklare att formatera: Kärnkomponenterna är enklare att formatera än deras motsvarigheter i 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.

  • Tillgänglighet: Adaptiva Forms Core-komponenter stöder standarder och riktlinjer för tillgänglighet 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.

  • Versioner: 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.

Jämföra kärnkomponenter, grundkomponenter och formulärblockskomponenter components

Den aktuella versionen av AEM har följande kärnkomponenter: Foundation Componentsoch Formulärblockskomponenter (Edge Delivery Services).

Komponenter
Foundation Components
Kärnkomponenter
Formulärblockskomponenter
Ytterligare information
Adobe Sign Block
✔️
Integrering med Adobe Sign är bara tillgängligt för Foundation Components.
Dragspel
✔️
✔️
För Foundation Components kan du konfigurera dragspelslayouten i Egenskaper för panelkomponent.
Adaptivt formulärfragment
✔️
✔️
För Foundation Components kan du lägga till ett fragment från Resursläsaren.
Adaptiv form reCAPTCHA
✔️
✔️
✔️
För Foundation-komponenter använder du Captcha-komponenten för att lägg till Google reCaptcha i ett formulär.
Knapp
✔️
✔️
✔️
Captcha
✔️
För Foundation-komponenter använder du Captcha-komponenten för att lägg 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
✔️
För kärnkomponenter använder du datumväljare -komponenten. Du kan också lägga till separata textruta eller numeric box för att fånga dag, månad och år.
Datumväljaren
✔️
✔️
✔️
Listruta
✔️
✔️
✔️
E-post
✔️
✔️
✔️
Bifogad fil
✔️
✔️
✔️
Lista över bifogade filer
✔️
Sidfot
✔️
✔️
✔️
Fotnotsplatshållare
✔️
Formulärbehållare
✔️
✔️
✔️
För Foundation-komponenter använder du Rotpanelskomponent.
Formulärtitel
✔️
✔️
Använd komponenten title för Foundation-komponenter.
Sidhuvud
✔️
✔️
✔️
Vågräta flikar
✔️
✔️
För Foundation Components kan du konfigurera tabbar överst (vågräta flikar), layout i panelkomponentegenskaper.
Bild
✔️
✔️
✔️
Bildval
✔️
Knappen Nästa
✔️
✔️
Använd guidekomponent 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 guidekomponent 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
✔️
För kärnkomponenter använder du Formulärtitel -komponenten.
Lodräta tabbar
✔️
✔️
För Foundation Components kan du konfigurera tabbar till vänster (lodräta tabbar) layout i panelkomponentegenskaper
guide
✔️
✔️
✔️
För Foundation Components kan du konfigurera guidelayout i panelkomponentegenskaper
NOTE
  • Förutom de komponenter som anges ovan stöder Forms block alla giltiga Indatatyper för HTML5 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 den du använder för WCM Core Components. 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 behöva 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.

  • Dokumentation (DoR): En dokumentreferens (Document of Record, DoR) avser 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 bro 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 att användarna 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 tillsammans med att bygga en sajtsida.

    embed

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

Aktivera adaptiva Forms Core-komponenter

Genom att aktivera adaptiva Forms Core-komponenter på 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 kärnkomponenter i adaptiva formulär finns i Aktivera adaptiva Forms Core-komponenter i AEM Forms as a Cloud Service och lokala 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, se till att du har prerelease flagga aktiverad i din miljö som adaptiva Forms Core Components ingick i förleasingen 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