Adaptieve Forms Core-componenten adaptive-forms-core-components-introduction

Met de Adaptive Forms Core Components in Adobe Experience Manager kunt u aantrekkelijke inschrijvingservaringen creëren.

Kernonderdelen overview

In Adobe Experience Manager (AEM) zijn componenten de bouwstenen die worden gebruikt om pagina's en formulieren te maken. Ze bieden auteurs een eenvoudige en krachtige manier om inhoud te maken en te beheren en bieden ontwikkelaars ook de flexibiliteit en uitbreidbaarheid die nodig zijn om aangepaste componenten te maken. Deze zijn ontworpen om de ontwikkelingstijd te versnellen en de onderhoudskosten voor websites en formulieren te verlagen, flexibel te zijn en eenvoudig te kunnen worden aangepast aan de specifieke behoeften van een website en formulier.

De Core Components zijn ook ontworpen om responsief te zijn en ondersteuning te bieden voor een groot aantal apparaten, zoals desktops, tablets en smartphones. Ze houden zich ook aan de nieuwste webstandaarden en best practices, waardoor ze een robuuste en betrouwbare oplossing zijn voor het maken van webinhoud.

Over het algemeen vormen de Core Components een essentieel instrument voor het maken en beheren van webinhoud in AEM, dat een krachtige en flexibele oplossing biedt die kan helpen de ontwikkelingstijd en onderhoudskosten te verlagen en tevens de bezoekers van de website een geweldige gebruikerservaring biedt.

Adaptieve Forms Core-componenten

De Adaptive Forms Core Components zijn een set van 29 opensource, BEM-compatibele componenten die op de basis van de Adobe Experience Manager WCM Core Components zijn gebouwd. Deze zijn speciaal ontworpen voor het maken van Adaptief Forms. Dit zijn formulieren die worden aangepast aan het apparaat, de browser en de schermgrootte van de gebruiker.

Deze componenten kunnen worden gebruikt om buitengewone ervaringen met het vastleggen en inschrijven van gegevens te maken door een groot aantal opties voor formuliervelden te bieden, zoals tekstvelden, selectievakjes, vervolgkeuzemenu's en nog veel meer. Ze bevatten ook functies zoals validatie, voorwaardelijke logica en responsief ontwerp, waarmee u formulieren kunt maken die gebruiksvriendelijk en gebruiksvriendelijk zijn.

Bovendien, aangezien deze componenten open-bron zijn, hebben de ontwikkelaars de capaciteit om de componenten gemakkelijk aan te passen en uit te breiden om aan de specifieke behoeften van hun organisatie te passen. Deze componenten zijn gebaseerd op de BEM-methode, die ervoor zorgt dat ze schaalbaar en onderhoudsbaar zijn.

adaptieve formulierafbeelding

Functies features

Gereed voor productie
De Adaptive Forms Core-componenten zijn 24 robuuste WCM-componenten.
Klaar voor cloud
Beschikbaar voor AEM Forms as a Cloud Service.
Veelzijdig
De componenten vertegenwoordigen algemene concepten waarmee de Forms-auteurs bijna elke lay-out kunnen samenstellen.
Configureerbaar
Sjabloonniveau inhoudsbeleid bepalen welke functies wel of niet mogen worden gebruikt.
Toegankelijk
Ze bieden ARIA-labels, ondersteunen toetsenbordnavigatie en tekst voor ondersteunende hulpmiddelen, zoals schermlezers.
Thema
De componenten implementeren de Stijlsysteemen volgt de markering BEM CSS-conventies.
Aanpasbaar
Met verschillende patronen kunt u de HTML eenvoudig aanpassen, van het aanpassen tot het opnieuw gebruiken van de geavanceerde functionaliteit.
Versioning
De versiebeleid zorgt ervoor dat de componenten van de Kern uw plaats niet breken wanneer het verbeteren van dingen die u zouden kunnen beïnvloeden.
Open Bronnen
Als iets anders is dan zou moeten, draagt u bij aan uw verbetering.

Voordelen benefits

Ervaringen met het vastleggen van gegevens zijn van cruciaal belang voor het genereren en inschrijven van leads en de Adaptive Forms Core Components bieden een krachtige oplossing voor het maken van formulieren die zijn geoptimaliseerd voor het vastleggen van gegevens. Enkele redenen om de Componenten van de Kern te gebruiken om deze ervaringen over stichtingscomponenten te creëren zijn:

  • Beschikbaarheid op GitHub: De AEM Adaptive Forms Core Components zijn open-source en beschikbaar op GitHub, samen met uitvoerige documentatie. Dit maakt het voor ontwikkelaars gemakkelijker om de componenten te begrijpen en hoe zij werken, en aan hun ontwikkeling bij te dragen. De aemcomponents.dev de website is ook een waardevolle bron , waar ontwikkelaars de componenten in actie kunnen zien en toegang hebben tot gedetailleerde documentatie .

  • BEM-model voor opmaken: De kerncomponenten volgen het BEM-model (Block Element Modifier) voor opmaak, een gangbare en veelgebruikte methode voor het ordenen van CSS. Op deze manier kunnen ontwikkelaars gemakkelijker begrijpen hoe de stijlen zijn ingedeeld en hoe ze aan hun specifieke behoeften kunnen worden aangepast.

  • Geen afhankelijkheid van bibliotheken van derden: Een van de voordelen van de Core Components is dat deze niet afhankelijk zijn van JavaScript-bibliotheken van derden, waaronder JQuery en Underscore. Hierdoor worden de componenten sneller en lichter, maar ook eenvoudiger te integreren in een bestaande AEM.

  • Focus op prestaties en toegankelijkheid: De Core Components zijn gebouwd met het oog op prestaties en toegankelijkheid. Dit wordt weerspiegeld in hun hoge Google Lighthouse- en web vitals-scores. Op die manier kunnen ontwikkelaars gemakkelijker toegankelijke en goed presterende webpagina's maken, wat steeds belangrijker wordt in het huidige digitale landschap.

  • Formuliercomponenten in Sites 30-sjabloon en -thema's: De kerncomponenten bieden ondersteuning voor formuliercomponenten in de Sites 30-sjabloon en -thema's, zodat ontwikkelaars gemakkelijker formulieren kunnen maken en aanpassen binnen AEM.

  • Eenvoudigere stijl: De componenten van de Kern zijn gemakkelijker om dan hun stichtingscomponenten te stichten. Het proces voor het maken van thema's lijkt op Sites, waarbij u hetzelfde thema/CSS kunt overnemen van de bovenliggende pagina Sites. Bovendien maakt het BEM-model voor opmaak het eenvoudiger om de stijlen te begrijpen en wijzigen.

  • Toegankelijkheid: Adaptive Forms Core Components ondersteunt toegankelijkheidsstandaarden en -richtlijnen om ervoor te zorgen dat formulieren kunnen worden gebruikt door mensen met een handicap, inclusief personen die gebruik maken van ondersteunende hulpmiddelen zoals schermlezers.

  • Versioning: U kunt meerdere versies van een op Adaptieve Forms gebaseerde Core Components maken en beheren, op samenwerking gebaseerde discussies doorvoeren via opmerkingen en annotaties toevoegen aan specifieke formuliercomponenten en zo de algehele ervaring met het maken van formulieren verbeteren.

Het vergelijken van de Componenten van de Kern, de Componenten van de Stichting, en de Componenten van het Blok van de Vorm components

De huidige versie van AEM heeft de volgende Core Components, Elementaire componenten, en Componenten voor formulierblokken (Edge Delivery Services).

Onderdelen
Elementaire componenten
Kernonderdelen
Componenten voor formulierblokken
Aanvullende informatie
Adobe Sign Block
✔️
Adobe Sign-integratie is beschikbaar slechts voor de Componenten van de Stichting.
Accordeon
✔️
✔️
Voor de Componenten van de Stichting, kunt u de accordeonlay-out binnen vormen eigenschappen van deelvensters.
Adaptief formulierfragment
✔️
✔️
Voor de Componenten van de Stichting, kunt u een fragment toevoegen vanuit de middelenbrowser.
Adaptief formulier reCAPTCHA
✔️
✔️
✔️
Voor de Componenten van de Stichting, gebruik de component Captcha aan Google reCaptcha aan een formulier toevoegen.
Knop
✔️
✔️
✔️
Captcha
✔️
Voor de Componenten van de Stichting, gebruik de component Captcha aan Google reCaptcha aan een formulier toevoegen.
Diagram
✔️
Selectievakje
✔️
✔️
Selectievakjesgroep
✔️
✔️
✔️
Voor de Componenten van de Stichting, gebruik de checkbox component om veelvoudige checkboxes toe te voegen
Datuminvoerveld
✔️
Gebruik voor Core Components (Basiscomponenten) de datumkiezer component. U kunt ook afzonderlijke textbox of numeriek vak componenten om de dag, de maand, en het jaar te vangen.
Datumkiezer
✔️
✔️
✔️
Vervolgkeuzelijst
✔️
✔️
✔️
E-mail
✔️
✔️
✔️
Bestandsbijlage
✔️
✔️
✔️
Lijst met bestandsbijlagen
✔️
Voettekst
✔️
✔️
✔️
Plaatsaanduiding voetnoot
✔️
Formuliercontainer
✔️
✔️
✔️
Voor de Componenten van de Stichting, gebruik Hoofddeelvenstercomponent.
Formuliertitel
✔️
✔️
Gebruik de titelcomponent voor Foundation Components.
Koptekst
✔️
✔️
✔️
Horizontale tabs
✔️
✔️
Voor de Componenten van de Stichting, kunt u vormen tabs boven op lay-out (horizontale tabs) in deelvenstereigenschappen.
Afbeelding
✔️
✔️
✔️
Afbeeldingskeuze
✔️
Volgende knop
✔️
✔️
Gebruik de wizardcomponent voor de volgende en vorige knoppen om tussen meerdere vensters te navigeren.
Numeriek vak
✔️
✔️
✔️
Numerieke stap
✔️
Deelvenster
✔️
✔️
✔️
Wachtwoordvak
✔️
✔️
Telefoon/telefoon
✔️
✔️
✔️
Vorige knop
✔️
Gebruik de wizardcomponent voor de volgende en vorige knoppen om tussen meerdere vensters te navigeren.
Keuzerondje
✔️
✔️
Groep keuzerondjes
✔️
Knop Opnieuw instellen
✔️
✔️
✔️
Krabbelhandtekening
✔️
Scheidingsteken
✔️
Verzendknop
✔️
✔️
✔️
Samenvattingsstap
✔️
Overschakelen
✔️
✔️
Tabel
✔️
Voorwaarden en bepalingen
✔️
✔️
Tekst
✔️
✔️
✔️
Tekstvak
✔️
✔️
✔️
Titel
✔️
Gebruik voor Core Components (Basiscomponenten) de Formuliertitel component.
Verticale tabs
✔️
✔️
Voor de Componenten van de Stichting, kunt u vormen tabs aan de linkerkant (verticale tabbladen) in deelvenstercomponenteigenschappen
Wizard
✔️
✔️
✔️
Voor de Componenten van de Stichting, kunt u vormen wizard-indeling in deelvenstercomponenteigenschappen
NOTE
  • Naast de bovenstaande componenten ondersteunt Forms-blok alle geldige componenten HTML5-invoertypen en tekstgebied als componenten.
  • Hebt u een component nodig die hierboven niet wordt vermeld? Vraag het aan door aem-forms-ea@adobe.com van uw officiële adres te e-mailen.

Eenvoudig te gebruiken formuliereditor

De editor voor op Core Components gebaseerde Adaptive Forms is vergelijkbaar met de editor die u al gebruikt voor het maken van AEM Sites-pagina's. Dit is wat je krijgt:

  • Vertrouwde UI-elementen en -instellingen: Bij het configureren van eigenschappen voor formuliercomponenten ziet u een dialoogvenster met eigenschappen eruit zoals de dialoogvensters die u gebruikt voor WCM Core-componenten. Hierdoor wordt het sneller om de opties te vinden u wenst. Net als WCM Core Components, verschijnt voor formuliercomponenten het dialoogvenster Eigenschappen in het midden van de editor met duidelijke tabbladen waarin de basis- en geavanceerde opties, Help-tekst en toegankelijkheidsinformatie worden gescheiden. Dit venster ziet u allemaal in tabs-indeling voor eenvoudige navigatie.

  • Regeleditor: U kunt logische en dynamische functies toevoegen aan uw formulieren zonder code te schrijven. U kunt de ingebouwde regelredacteur gebruiken aan:

    • Velden weergeven of verbergen op basis van gebruikersopties
    • Een object in- of uitschakelen
    • Een waarde instellen voor een object
    • Berekeningen uitvoeren
    • Eigenschap van een object instellen
    • Gegevensinvoer valideren
    • Een service aanroepen (externe functionaliteit aanroepen)
    • Ingebouwde functies gebruiken (vooraf gedefinieerde functies voor algemene taken)
    • Aangepaste functies gebruiken (uw eigen code voor specifieke behoeften)
    • Valideer velden en deelvensters (controleer of de gegevens aan de vereisten voldoen)
    • De waarde van een object valideren
    • Functies uitvoeren om de waarde van een object te berekenen
    • Roep de service Form Data Model (FDM) aan en voer een bewerking uit
    • Dynamisch stijlen toevoegen (weergave wijzigen op basis van voorwaarden)
    • Andere regels maken (kettinghandelingen en logica)
    • en meer!

    De regelredacteur heeft niet de coderedacteur. U kunt aangepaste functies om uw eigen code voor specifieke behoeften aan de regelredacteur toe te voegen.

  • Formulieren vooraf invullen: U kunt bepaalde velden in een formulier automatisch vullen met bestaande gegevens wanneer een gebruiker het opent. Dit bespaart gebruikers tijd en moeite door de behoefte te elimineren om informatie manueel in te gaan die reeds beschikbaar zou kunnen zijn. De editor Core Components biedt een OOTB-service om formuliervelden te vullen met behulp van een formuliergegevensmodel. U kunt de diensten van de douane ook tot stand brengen vooraf ingevulde voor complexere scenario's.

  • Document of Record (DoR): Een Document of Record (DoR) verwijst naar een formele, afdrukbare weergave van de gegevens die via het formulier zijn ingediend. Het dient als een permanent verslag van de informatie een gebruiker inging, die een momentopname van de voorgelegde gegevens in een gebruikersvriendelijk formaat, typisch een document van de PDF verstrekt. U kunt de redacteur gebruiken om een douanemalplaatje gemakkelijk te vormen of een malplaatje OTB te gebruiken om een DoR te produceren.

  • Formuliergegevensmodel: Een adaptief Forms Data Model (FDM) fungeert als brug tussen uw Adaptive Forms en uw gegevensbronnen. In feite wordt hiermee de structuur en organisatie gedefinieerd van de gegevens die uw formulieren verzamelen en waarmee ze werken. U kunt de editor gebruiken om een formulier eenvoudig te verbinden met een Forms Data Model (FDM).

  • Formulierverzendingen: Een formulier dat wordt verzonden, verwijst naar het proces waarbij gebruikers hun ingevulde formulieren invullen en verzenden. Hierdoor wordt een reeks handelingen geactiveerd die in de configuratie van het formulier zijn gedefinieerd, wat uiteindelijk leidt tot de opslag of verwerking van de verzonden gegevens. De Adaptive Forms-editor biedt verschillende opties voor het configureren van formulierverzendingen. Enkele gemeenschappelijke acties voor het indienen van voorstellen zijn:

  • Adaptieve Forms Core-componenten in Sites Page Editor: U kunt Adaptive Forms Core Components inschakelen en gebruiken in AEM Pagina-editor en AEM Experience Fragments om gegevens direct vast te leggen en tegelijk een sitepagina te maken.

    embed

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

Adaptieve Forms Core-componenten inschakelen

Als u Adaptive Forms Core Components inschakelt op AEM Forms as a Cloud Service, kunt u beginnen met het maken, publiceren en leveren van Core Components based Adaptive Forms and Headless Forms met uw AEM Forms Cloud Service-instanties naar meerdere kanalen. Voor gedetailleerde instructies voor het inschakelen van Adaptive Form Core Components, raadpleegt u Adaptieve Forms Core-componenten inschakelen in de as a Cloud Service en lokale ontwikkelomgeving van AEM Forms.

De Adaptive Forms Core Components hebben de volgende vereisten.

AEM
AEM Forms-invoegtoepassing
Adaptieve Forms Core-componenten
AEM as a Cloud Service
Forms - Digitale inschrijving
Release 2.0.10+
AEM 6,5
Forms-invoegtoepassing
Release 1.1.12+

Als uw AEM Cloud Service SDK-versie ouder is dan 2023.02.0, zorg ervoor dat u prerelease markering ingeschakeld in uw omgeving omdat Adaptive Forms Core Components deel uitmaakten van de pre-lease vóór de release van 2023.02.0.

Een adaptief formulier op basis van kerncomponenten maken

U kunt de volgende handelingen uitvoeren in zowel AEM Forms as a Cloud Service als AEM 6.5 Forms-omgevingen:

Handeling
AEM Forms-versie
Een zelfstandig adaptief formulier maken
AEM Forms als Cloud Service
Een adaptief formulier maken op een AEM Sites-pagina
AEM 6,5 Forms, AEM Forms als Cloud Service
Een adaptief formulier maken in AEM Experience Fragment
AEM 6,5 Forms, AEM Forms als Cloud Service
Een adaptief formulier converteren naar een ervaringsfragment
AEM 6,5 Forms, AEM Forms als Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c