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.

adaptief vormbeeld

Functies features

Gereed voor productie
De Adaptive Forms Core-componenten zijn 24 robuuste WCM-componenten.
Klaar voor cloud
Beschikbaar voor as a Cloud Service AEM Forms.
Veelzijdig
De componenten vertegenwoordigen algemene concepten waarmee de Forms-auteurs bijna elke lay-out kunnen samenstellen.
Configureerbaar
Sjabloon-niveau inhoudsbeleidbepaalt welke eigenschappen worden toegestaan om te gebruiken of niet te gebruiken.
Toegankelijk
Ze bieden ARIA-labels, ondersteunen toetsenbordnavigatie en tekst voor ondersteunende hulpmiddelen, zoals schermlezers.
Thema
De componenten voeren het Systeem van de Stijluit, en de prijsverhoging volgt CSS van BEM overeenkomsten.
Aanpasbaar
Met verschillende patronen kunt u de HTML eenvoudig aanpassen, van het aanpassen tot het opnieuw gebruiken van de geavanceerde functionaliteit.
Versioning
Het versioning beleidzorgt ervoor dat de Componenten van de Kern uw plaats niet zullen 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 Aangepaste Componenten van de Kern van Forms 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 {🔗 website 0} aemcomponents.dev is ook een waardevol middel, waar de ontwikkelaars de componenten in actie kunnen zien en tot gedetailleerde documentatie toegang hebben.

  • BEM Model voor het Stijlen: De Componenten van de Kern volgen het model BEM (de Modifier van het Element van het Blok) voor het stileren, dat een gevestigde en wijd gebruikte methodologie voor het organiseren van CSS is. Op deze manier kunnen ontwikkelaars gemakkelijker begrijpen hoe de stijlen zijn ingedeeld en hoe ze aan hun specifieke behoeften kunnen worden aangepast.

  • geen Vertrouwen op de Bibliotheken van de Derde: Één van de voordelen van de Componenten van de Kern is dat zij geen gebiedsdeel op de bibliotheken van derdeJavaScript, met inbegrip van JQuery en Onderstrepingsteken hebben. Hierdoor worden de componenten sneller en lichter, maar ook eenvoudiger te integreren in een bestaande AEM.

  • concentreert zich op Prestaties en Toegankelijkheid: De Componenten van de Kern worden gebouwd met prestaties en toegankelijkheid in mening, die in hun hoge Lighthouse en Web vitals scores van Google weerspiegeld wordt. Op die manier kunnen ontwikkelaars gemakkelijker toegankelijke en goed presterende webpagina's maken, wat steeds belangrijker wordt in het huidige digitale landschap.

  • Componenten van de Vorm in Plaatsen 30 Malplaatje en Thema's: De Componenten van de Kern verlenen steun voor vormcomponenten in het malplaatje en de thema's van Plaatsen 30, die het voor ontwikkelaars gemakkelijker maken om vormen binnen AEM tot stand te brengen en aan te passen.

  • Gemakkelijker aan Stijl: De Componenten van de Kern zijn gemakkelijker om dan hun tegenhangers van de stichtingscomponent te vormen. 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: De adaptieve Componenten van de Kern van Forms steunen toegankelijkheidsnormen en richtlijnen om ervoor te zorgen dat de vormen door mensen met handicaps, met inbegrip van die kunnen worden gebruikt die ondersteunende technologieën zoals het schermlezers gebruiken.

  • Versioning: U kunt veelvoudige versies van een op Aangepast Forms gebaseerde Componenten van de Kern tot stand brengen en beheren, aan samenwerkingsbesprekingen door commentaren, aangaan en annotaties aan specifieke vormcomponenten vastmaken, daardoor verbeterend de algemene vorm-bouwende ervaring.

Beschikbare componenten: een uitsplitsing naar componenttype

De huidige versie van AEM Forms heeft de volgende Componenten van de Kern, Componenten van de Stichting, en Componenten van het Blok van de Vorm (Edge Delivery Services).

Onderdelen
Elementaire componenten
Kernonderdelen
Componenten voor formulierblokken
Aanvullende informatie
Adobe Sign Block
✔️
de integratie van Adobe Signis beschikbaar slechts voor de Componenten van de Stichting.
Accordeon
✔️
✔️
Voor de Componenten van de Stichting, kunt u de accordeonlay-out in eigenschappen van de paneelcomponentvormen.
Adaptief formulierfragment
✔️
✔️
Voor de Componenten van de Stichting, kunt u een fragmentvan Browser van Assets toevoegen.
Adaptief formulier reCAPTCHA
✔️
✔️
✔️
Voor de Componenten van de Stichting, gebruik de component Captcha om Google reCaptcha aan een vormtoe te voegen.
Knop
✔️
✔️
✔️
CAPTCHA
✔️
Voor de Componenten van de Stichting, gebruik de component Captcha om Google reCaptcha aan een vormtoe te voegen.
Diagram
✔️
Selectievakje
✔️
✔️
Selectievakjesgroep
✔️
✔️
✔️
Voor de Componenten van de Stichting, gebruik de checkbox component om veelvoudige checkboxes toe te voegen
Datuminvoerveld
✔️
Voor de Componenten van de Kern, gebruik de 🔗 component van de plukker van 0} datum. U kunt afzonderlijke textboxof numerieke dooscomponenten ook toevoegen 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 de component van het Comité van de Wortel.
Formuliertitel
✔️
✔️
Gebruik de titelcomponent voor Foundation Components.
hCaptcha
✔️
✔️
Koptekst
✔️
✔️
✔️
Horizontale tabs
✔️
✔️
Voor de Componenten van de Stichting, kunt u de lusjes bovenop (horizontale lusjes) lay-outin de eigenschappen van de paneelcomponent vormen.
Afbeelding
✔️
✔️
✔️
Afbeeldingskeuze
✔️
Volgende knop
✔️
✔️
Gebruik de tovenaar componentvoor volgende en vorige knopen om zich tussen veelvoudige panelen te bewegen.
Numeriek vak
✔️
✔️
✔️
Numerieke stap
✔️
Deelvenster
✔️
✔️
✔️
Wachtwoordvak
✔️
✔️
Telefoon/telefoon
✔️
✔️
✔️
Vorige knop
✔️
Gebruik de tovenaar componentvoor volgende en vorige knopen om zich tussen veelvoudige panelen te bewegen.
Keuzerondje
✔️
✔️
Groep keuzerondjes
✔️
Knop Opnieuw instellen
✔️
✔️
✔️
Krabbelhandtekening
✔️
Scheidingsteken
✔️
Verzendknop
✔️
✔️
✔️
Samenvattingsstap
✔️
Overschakelen
✔️
✔️
Tabel
✔️
Voorwaarden en bepalingen
✔️
✔️
Tekst
✔️
✔️
✔️
Tekstvak
✔️
✔️
✔️
Titel
✔️
Voor de Componenten van de Kern, gebruik de 🔗 component van de Titel van de Vorm 0}.
Turnstile Captcha
✔️
Turnstile Captchais beschikbaar slechts voor de Componenten van de Stichting.
Verticale tabs
✔️
✔️
Voor de Componenten van de Stichting, kunt u de lusjes op de linkerlay-out (verticale lusjes)in eigenschappen van de paneelcomponent vormen
Wizard
✔️
✔️
✔️
Voor de Componenten van de Stichting, kunt u de tovenaar lay-outin de eigenschappen van de paneelcomponent vormen
NOTE
  • Naast de hierboven vermelde componenten, steunt het blok van Forms alle geldige HTML5 inputtypesen tekstgebiedals 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 elementen UI en montages: Wanneer het vormen van eigenschappen voor vormcomponenten, ziet u een eigenschappendialoog enkel als degenen kijkt u aan voor de Componenten van de Kern WCM gebruikt. 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.

  • Redacteur van de Regel: U kunt logica en dynamische eigenschappen aan uw vormen toevoegen 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 douanefunctiesgebruiken om uw eigen code voor specifieke behoeften aan de regelredacteur toe te voegen.

  • Vullingsvormen: U kunt bepaalde gebieden in een vorm met bestaande gegevens automatisch bevolken 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 van Verslag (DoR): Een Document van Verslag (DoR) verwijst naar een formele, bedrukbare vertegenwoordiging van de gegevens die door de vorm worden voorgelegd. 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.

  • Model van de Gegevens van de Vorm: Een Adaptief Model van de Gegevens van Forms (FDM) handelt als brug tussen uw Aangepaste 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).

  • de Indieningen van de Vorm: De vormvoorlegging verwijst naar het proces van gebruikers die hun ingevulde vormen 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:

  • de Aangepaste Componenten van de Kern van Forms van in de redacteur van de Pagina van Plaatsen: U kunt de Aangepaste Componenten van de Kern van Forms in AEM Redacteur van de Pagina en AEM ErvingsFragments toelaten en gebruiken om gegevens direct te creëren vangen ervaring samen met het bouwen van een pagina van Plaatsen.

    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 om de Aangepaste Componenten van de Kern van de Vorm toe te laten, zie Aangepaste Componenten van de Kern van Forms op as a Cloud Service en lokale ontwikkelomgeving van AEM Formstoelaten.

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
Versie 2.0.10+
AEM 6,5
Forms-invoegtoepassing
Versie 1.1.12+

Als uw versie van SDK van AEM Cloud Service ouder dan 2023.02.0, ervoor zorgt dat u prerelease vlag hebt die op uw milieuwordt toegelaten aangezien de Adaptieve Componenten van de Kern van Forms deel van pre-lease vóór de versie 2023.02.0 vormden.

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