DocumentatieAEM 6.5Handboek

Lesbestand: een adaptief formulier maken do-not-publish-tutorial-create-an-adaptive-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Beheerder
  • Gebruiker
  • Ontwikkelaar

02-creeer-adaptief-vorm-main-beeld

Dit leerprogramma is een stap in creeert Uw Eerste AanpassingsVormreeksen. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.

Over de zelfstudie about-the-tutorial

Adaptieve formulieren zijn formulieren van de nieuwe generatie die dynamisch zijn en reageren. U kunt adaptieve formulieren gebruiken om persoonlijke ervaringen te bieden. U kunt ook adaptieve formulieren integreren met Adobe Analytics voor gebruiksstatistieken en Adobe Campaign voor campagnebeheer. Voor meer informatie over adaptieve vormmogelijkheden, zie Inleiding aan creatie adaptieve vormen.

Het is eenvoudiger om formulieren te maken en te beheren wanneer een correct proces wordt gevolgd. In dit artikel leert u hoe u:

Aan het einde van het artikel hebt u een formulier dat vergelijkbaar is met het volgende:
de voorproef van de Vorm in mobiele

Stap 1: Maak het adaptieve formulier step-create-the-adaptive-form

  1. Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Forms & Documents . Het gebrek URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Selecteer Create en selecteer Adaptive Form . Er verschijnt een optie voor het selecteren van een sjabloon. Selecteer de Blank -sjabloon en selecteer Next .

  3. Er verschijnt een optie voor Add Properties . De velden Title en Name zijn verplicht:

    • Titel: specificeer Add new or update shipping address op het Title gebied. In het titelveld wordt de weergavenaam van het formulier opgegeven. Met de titel kunt u het formulier identificeren in de AEM gebruikersinterface van Forms .
    • Naam: specificeer shipping-address-add-update-form op het Name gebied. In het veld Naam wordt de naam van het formulier opgegeven. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.

  4. Selecteer Create. Er wordt een adaptief formulier gemaakt en er wordt een dialoogvenster weergegeven om het formulier te openen voor bewerking. Selecteer Open om het nieuwe formulier op een nieuw tabblad te openen. Het formulier wordt geopend voor bewerking. De zijbalk wordt ook weergegeven om het nieuwe formulier aan te passen aan de behoeften.

    Voor informatie over adaptieve vorm auteursinterface en beschikbare componenten, zie Inleiding aan creatie adaptieve vormen.

    een pas gecreëerde adaptieve vorm.

Stap 2: kop- en voettekst toevoegen step-add-header-and-footer

AEM Forms biedt veel componenten om informatie weer te geven op een adaptief formulier. De componenten Koptekst en Voettekst geven een formulier een consistent uiterlijk. Een koptekst bevat doorgaans het logo van een bedrijf, de titel van het formulier en het overzicht. Een voettekst bevat doorgaans copyrightinformatie en koppelingen naar andere pagina's.

  1. Selecteer knevel-zij-paneel > drievoudig . De componentbrowser wordt geopend. Sleep de component Header van de componentbrowser naar het aangepaste formulier.

  2. Selecteer Logo. De werkbalk wordt weergegeven. Selecteer aem_6_3_edit op de toolbar, type Wij.Retail, en selecteer aem_6_3_forms_save .

  3. Selecteer Afbeelding. De werkbalk wordt weergegeven. Selecteer cmp . De eigenschappenbrowser wordt links van het scherm geopend. Browse en uploadt u de afbeelding van het logo. Selecteer name_6_3_forms_save . De afbeelding wordt in de koptekst weergegeven.

    U kunt de optie Bestand ophalen selecteren om het logo te downloaden dat in dit artikel wordt gebruikt als u er geen hebt.

Bestand ophalen

  1. Sleep de Footer component van drievoudig aan de adaptieve vorm. In dit stadium ziet het formulier er als volgt uit:

    adaptive-form-with-headers-and-footers

Stap 3: Voeg componenten toe aan het vastleggen en weergeven van informatie step-add-components-to-capture-and-display-information

Componenten zijn bouwstenen van een adaptief formulier. AEM Forms biedt veel componenten om informatie in een adaptieve vorm vast te leggen en weer te geven. U kunt de componenten van drievoudig aan een vorm slepen. Om over beschikbare componenten en overeenkomstige functionaliteit te leren, zie Inleiding aan auteursadaptieve vormen.

  1. Sleep de Numeric Box component naar het aangepaste formulier. Plaats het voor de voettekstcomponent. Open eigenschappen van de component, verander Title van de component in Customer ID, verander Element Name in customer_ID, laat de Required Field optie toe, laat de Use HTML5 Number Input Type optie toe, en selecteer aem_6_3_forms_save .

  2. Sleep drie tekstvakcomponenten naar het aangepaste formulier. Plaats deze voor de voettekstcomponent. Stel de volgende eigenschappen in voor deze tekstvakken.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Eigenschap Tekstvak 1 Tekstvak 2 Tekstvak 3
    Titel Naam Verzendadres Staat
    Elementnaam customer_Name customer_Shipping_Address customer_State
    Vereist veld Ingeschakeld Ingeschakeld Ingeschakeld
    Meerdere regels toestaan Uitgeschakeld Ingeschakeld Uitgeschakeld

  3. Sleep een component Numeric Box vóór de voettekstcomponent. Open eigenschappen van de component, vastgestelde waarden die in de hieronder lijst, Uitgezochte worden vermeld aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Eigenschap Waarde
    Titel Postcode
    Elementnaam customer_ZIPCode
    Maximum aantal cijfers 6
    Vereist veld Ingeschakeld
    Type weergavepatroon Geen patroon

  4. Sleep een component Email vóór de voettekstcomponent. Open eigenschappen van de component, plaats waarden die in de hieronder lijst worden vermeld, en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Eigenschap Waarde
    Titel E-mail
    Elementnaam customer_Email
    Vereist veld Ingeschakeld

  5. Sleep een component File Attachment vóór de voettekstcomponent. Open eigenschappen van de component, plaats waarden die in de hieronder lijst worden vermeld, en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Eigenschap Waarde
    Titel Door de overheid goedgekeurde adresbewijzen
    Elementnaam customer_Address_Proof
    Vereist veld Ingeschakeld

  6. Sleep een component Submit Button naar het aangepaste formulier. Plaats het voor de voettekstcomponent. Open eigenschappen van de component, verander de Naam van het Element in address_addition_update_submit, uitgezocht aem_6_3_forms_save . De indeling van het formulier is voltooid en het formulier ziet er als volgt uit:

    adaptive-form-with-all-the-components

Stap 4: de verzendactie voor het aangepaste formulier configureren step-configure-submit-action-for-the-adaptive-form

Een verzendactie wordt geactiveerd wanneer een gebruiker op de knop Verzenden tikt op een adaptief formulier. Met een verzendactie kunt u formuliergegevens opslaan in de lokale gegevensopslagruimte, formuliergegevens verzenden naar een REST-eindpunt, formuliergegevens verzenden als e-mail, enzovoort. Aangepaste formulieren bieden een paar extra verzendacties die buiten de box vallen. Voor gedetailleerde informatie, zie Vormend de Submit actie.

Met de volgende stappen kunt u de handeling voor het verzenden van e-mail configureren en demo-verzendactie van het formulier configureren:

  1. De e-mailserver configureren. Voor details, zie Vormend E-mailBericht.

  2. Selecteer Form Container in browser van de Inhoud en selecteer cmp . De eigenschappenbrowser wordt aan de linkerkant geopend.

  3. Ga naar Submission > Submit Action . Selecteer Send Email. Specificeer de volgende waarden en selecteer aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Eigenschap Waarde
    Van donotreply@weretail.com
    Naar ${customer_Email}
    Onderwerp Bevestiging: je hebt verzendadres toegevoegd op de website We.Retail.
    E-mailsjabloon Hallo ${customer_Name}, het volgende adres wordt toegevoegd als het verzendadres voor uw account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Regards, We.Retail
    Bijlagen opnemen Ingeschakeld

    Uw formulier is klaar. U kunt nu een voorbeeld van het formulier bekijken en de functionaliteit testen. Als u de naam hebt gebruikt die op het leerprogramma wordt vermeld en tot de vorm op de machine toegang heeft die AEM Forms server in werking stelt, dan is de vorm beschikbaar in http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Stap 5: Het adaptieve formulier voorvertonen en verzenden step-preview-and-submit-the-adaptive-form

Met de Preview option kunt u de weergave en het gedrag van een formulier evalueren. U kunt een formulier verzenden in de voorbeeldmodus en ook de validaties controleren die op een formulier zijn toegepast. Als bijvoorbeeld een fout wordt weergegeven wanneer een verplicht veld leeg blijft.

Aangepaste formulieren bieden ook een optie om een formulier voor verschillende apparaten te emuleren. Bijvoorbeeld iPhone, iPad en Desktop. U kunt zowel Preview als Emulator gebruiken heerser opties samen met elkaar om een vorm voor apparaten van verschillende het schermgrootte voor te vertonen.

  1. Selecteer de optie Preview aan de rechterkant van de formuliereditor. Het formulier wordt geopend in de voorbeeldmodus. Als u de naam gebruikt die op het leerprogramma wordt vermeld, dan voorproef URL van de vorm is http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Gebruik heerser om te bekijken hoe de vorm op diverse apparaten kijkt.
  3. Vul velden van het formulier in en selecteer Submit . De vorm wordt voorgelegd en u wordt opnieuw gericht aan gebrek bedankt pagina. U kunt ook een aangepaste pagina voor bedankt opgeven. Voor details, zie Vormend opnieuw richten pagina.

Het aangepaste formulier voor het toevoegen van een adres is gereed. Als u de naam gebruikt die in het leerprogramma wordt vermeld en tot de vorm op de machine toegang heeft die de server van AEM Forms in werking stelt, dan is de vorm beschikbaar in http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2