Inleiding tot het ontwerpen van adaptieve formulieren

Overzicht

Met adaptieve formulieren kunt u aantrekkelijke, responsieve, dynamische en adaptieve formulieren maken. AEM Forms biedt een intuïtieve gebruikersinterface en kant-en-klare componenten voor het maken van en werken met adaptieve formulieren. U kunt desgewenst een adaptief formulier maken op basis van een formuliermodel of -schema of zonder formuliermodel. Het is belangrijk om zorgvuldig het formuliermodel te kiezen dat niet alleen aan uw vereisten voldoet, maar ook uw bestaande infrastructurele investeringen en middelen uitbreidt. U kunt uit de volgende opties kiezen om een adaptief formulier te maken:

• Een formuliergegevensmodel gebruiken
  Met gegevensintegratie kunt u entiteiten en services van verschillende gegevensbronnen integreren in een formuliergegevensmodel waarmee u adaptieve formulieren kunt maken. Kies een formuliergegevensmodel als het adaptieve formulier dat u maakt, bestaat uit het ophalen en schrijven van gegevens van en naar meerdere gegevensbron.

• Een XDP-
  formuliersjabloonDit is een ideaal formuliermodel als u investeert in XFA-formulieren of XDP-formulieren. Dit biedt een directe manier om uw XFA-formulieren om te zetten in adaptieve formulieren. Bestaande XFA-regels blijven behouden in de bijbehorende adaptieve formulieren. De resulterende adaptieve formulieren ondersteunen XFA-constructies, zoals validaties, gebeurtenissen, eigenschappen en patronen.

• Het gebruiken van een Definitie van het Schema van XML (XSD) of een schema JSON
  SchemaXML en JSON vertegenwoordigen de structuur waarin het gegeven wordt geproduceerd of door het achterste deelsysteem in uw organisatie verbruikt. U kunt het schema koppelen aan een adaptief formulier en de elementen ervan gebruiken om dynamische inhoud toe te voegen aan het aangepaste formulier. De elementen van het schema zijn beschikbaar voor gebruik op het tabblad Gegevensmodelobjecten van de browser Inhoud wanneer u adaptieve formulieren maakt.

• Geen of geen formuliermodel gebruiken

Voor adaptieve formulieren die met deze optie worden gemaakt, wordt geen formuliermodel gebruikt. De XML-gegevens die op basis van dergelijke formulieren worden gegenereerd, hebben een vlakke structuur met velden en bijbehorende waarden.

Zie Een adaptief formulier maken voor meer informatie over het maken van een adaptief formulier.

UI voor het schrijven van adaptieve formulieren

De interface voor het optimaliseren van aanrakingen voor het ontwerpen van adaptieve formulieren is intuïtief en biedt:

• Functionaliteit voor slepen en neerzetten
• Standaardformuliercomponenten
• Geïntegreerde opslagplaats voor middelen

Wanneer u een nieuw formulier maakt of een bestaand adaptief formulier bewerkt, gebruikt u de volgende interface-elementen:

• Zijbalk

• Pagina, werkbalk

• Component, werkbalk

• Aangepaste formulierpagina

A. Zijbalk B. Pagina, werkbalk C. Aangepaste formulierpagina

Zijbalk

Met de zijbalk kunt u

• Zie formulierinhoud zoals deelvensters, componenten, velden en indeling.

• Eigenschappen van componenten bewerken.

• Zoek, bekijk en gebruik middelen in uw AEM DAM-opslagplaats (Digital Asset Management).

• Voeg componenten toe aan uw formulier.

  
  Klik om te vergroten

A. Content browser B. Properties browser C. Assets browser D. Components browser

De zijbalk bestaat uit de volgende browsers:

• Inhoudsbrowser

  In de inhoudbrowser kunt u zien

  • Formulierobjecten

    Hiermee geeft u de objecthiërarchie van het formulier weer. Auteurs kunnen naar specifieke formuliercomponenten navigeren door op dat element te tikken in de formulierobjectstructuur. Auteur kan objecten zoeken en opnieuw rangschikken vanuit deze structuur.

  • Gegevensmodelobjecten

    Hiermee kunt u de hiërarchie van het formuliermodel bekijken.

    Hiermee kunt u formuliermodelelementen naar het aangepaste formulier slepen en neerzetten. De toegevoegde elementen worden automatisch geconverteerd naar formuliercomponenten met behoud van hun oorspronkelijke eigenschappen. U kunt gegevensmodelobjecten zien wanneer uw formulier gebruikmaakt van een XML-schema, JSON-schema of XDP-sjabloon.

• Eigenschappenbrowser

  Hiermee kunt u de eigenschappen van een component bewerken. De eigenschappen veranderen afhankelijk van een component. Eigenschappen van de adaptieve formuliercontainer weergeven:

  Selecteer een component, tik dan > Adaptive Form Container, en tik dan .

• Bandenbrowser

  Hiermee kunt u verschillende typen inhoud segmenteren, zoals afbeeldingen, documenten, pagina's, films, enzovoort.

• Browser voor componenten

  Bevat componenten die u kunt gebruiken om een adaptief formulier te maken. U kunt componenten van het aangepaste formulier naar het aangepaste formulier slepen om formulierelementen toe te voegen en toegevoegde elementen configureren volgens de vereisten. In de volgende tabel worden de componenten beschreven die in de componentbrowser worden weergegeven.

Aanbevolen procedures voor het werken met componenten

U kunt de volgende tips en trucs gebruiken bij het werken met adaptieve formuliercomponenten:

• Elke component heeft bijbehorende eigenschappen die de weergave en functionaliteit ervan bepalen. Als u de eigenschappen van een component wilt configureren, tikt u op de component en vervolgens op om de eigenschappen van de component te openen in de eigenschappenbrowser.

• Een component wordt geïdentificeerd met zijn elementnaam. Wanneer u tikt, kunt u de naam van de component veranderen door de Element Name gebiedswaarde in eigenschappen browser te veranderen. Het veld Elementnaam accepteert alleen letters, cijfers, koppeltekens (-) en onderstrepingstekens (_). Andere speciale tekens zijn niet toegestaan en de elementnaam moet met een letter beginnen.

• U kunt de eigenschap Titel van een adaptieve formuliercomponent inline wijzigen in de formuliereditor zonder de browser Eigenschappen te openen, zolang de titel maar zichtbaar is op het formulier. Daartoe:

  1. Tik om een component te selecteren die een eigenschap Title heeft en waarvan de eigenschap Hide title is uitgeschakeld.
  2. Tik om de titel bewerkbaar te maken.
  3. Wijzig de titel en tik op de Return-toets of tik ergens buiten de component om de wijzigingen op te slaan. Tik op Esc om de wijzigingen te verwijderen.

• Sommige adaptieve formuliercomponenten, zoals E-mail en Telefoon, bevatten validatiepatronen die niet in de verpakking staan. U kunt echter aangepaste validatie opgeven door het veld Validation Pattern onder de accordeon Patronen in de componenteigenschappen bij te werken. Zie de componentbeschrijvingen in de bovenstaande tabel voor meer informatie over standaardvalidaties.

• Adaptieve formuliervelden, zoals Numeriek vak en E-mail, kunnen zo worden geconfigureerd dat ze speciale HTML5-invoertypen bevatten. Wanneer deze velden de focus hebben op mobiele apparaten en tablets, worden op het toetsenblok specifieke alfabet, getallen en tekens vóór weergegeven die doorgaans worden gebruikt voor het invoeren van informatie in de velden. Het helpt gebruikers informatie snel ingaan zonder het moeten tussen karakterreeksen op het toetsenbord van een knevel voorzien. Als u gespecialiseerde invoer voor een component wilt toestaan, schakelt u het selectievakje Use HTML Type Number in de componenteigenschappen in.

• U kunt een component van de Doos van de Tekst toelaten om RTF goed te keuren. Als u tekst met opmaak wilt inschakelen voor een tekstvak, schakelt u het selectievakje Allow Rich Text in de eigenschappen van de component in.

• U kunt de componenten van het Doos van de Tekst, E-mail, en van de Telefoon aan autofill waarden voor gebieden zoals naam, adres, creditcard, telefoon, en e-mail van de informatie toelaten die in browser autofill montages wordt opgeslagen. Selecteer Enable Autofill in de componenteigenschappen en selecteer een Autofill Attribute om deze functie in te schakelen. Wanneer een gebruiker een adaptief formulier invult, worden de waarden voorgesteld vanuit het profiel Automatisch vullen in de browser of op basis van de waarden die eerder door de gebruiker zijn ingevuld. Automatisch vullen werkt alleen als de instellingen voor automatisch vullen in de browser van de gebruiker zijn ingeschakeld.

• Geef waarden op voor keuzerondjes en selectievakjes in de indeling {value}={text} in componenteigenschappen.

• Met de component Bestandsbijlage kan een gebruiker standaard slechts één bestand bijvoegen. U kunt de componenteigenschappen echter configureren om meerdere bijlagen te ondersteunen. Als een gebruiker meerdere bestanden met dezelfde bestandsnaam bijvoegt, kunnen er bovendien problemen optreden in de bijlagen. Daarom wordt aanbevolen een unieke id te koppelen voor elke verzonden bijlage bij het verzenden van het formulier. Daartoe:

  1. Navigeer op uw AEM Forms-server naar Adobe Experience Manager > Tools > Operations > Web Console.
  2. Adaptive Forms Configuration Service zoeken en tikken.
  3. Schakel in het dialoogvenster Adaptive Forms Configuration Service Make File Names Unique in. Standaard is dit uitgeschakeld.

• Als u gebruikers wilt toestaan een PDF toe te voegen met gebruik van de Safari-browser, zorgt u ervoor dat application/pdf wordt toegevoegd aan de eigenschap Ondersteunde bestandstypen van de component Bestandsbijlage. Adaptieve formulieren die zijn gemaakt met een eerdere AEM Forms-versie kunnen .pdf bevatten in plaats van application/pdf in de eigenschap Ondersteunde bestandstypen.

Zie Aanbevolen werkwijzen voor het werken met adaptieve formulieren voor meer tips over het werken met adaptieve formulieren.

Pagina, werkbalk

De pagina-werkbalk boven in het scherm bevat opties waarmee u een voorbeeld van het formulier kunt bekijken, de eigenschappen van het formulier kunt wijzigen en de indeling van het formulier kunt bewerken. U kunt een voorbeeld van het formulier bekijken wanneer u het maakt en wijzigingen aanbrengen. In de paginabooltoolbar, ziet u:

• Toggle Side Panel : Hiermee kunt u Zijbalk tonen of verbergen.

• Page information : Hiermee kunt u pagina-eigenschappen weergeven, een formulier publiceren/publiceren, een formulierwerkstroom starten en het formulier openen in een klassieke gebruikersinterface.

• Emulator : Hiermee kunt u het uiterlijk van een formulier emuleren voor verschillende weergavegrootten, zoals tablets en telefoons.

• Edit: Hiermee kunt u andere modi selecteren, zoals: Bewerken, Stijl, Ontwikkelaar​en Ontwerp.

  • Edit: Hiermee kunt u de eigenschappen van het formulier en de componenten ervan bewerken. U kunt bijvoorbeeld een component toevoegen, een afbeelding neerzetten en verplichte velden opgeven.

  • Style: Hiermee kunt u de vormgeving van componenten van het formulier opmaken. In de stijlmodus kunt u bijvoorbeeld een deelvenster selecteren en de achtergrondkleur ervan opgeven.

  • Developer: Hiermee kan een ontwikkelaar:

    • Ontdek waaruit de formulieren bestaan.
    • Foutopsporing waar en wanneer gebeurt, wat weer helpt om problemen op te lossen.

  • Design: Hiermee kunt u aangepaste componenten, of componenten buiten het vak die niet in het zijpaneel staan, in- of uitschakelen.

• Preview: Hiermee kunt u een voorbeeld bekijken van de weergave van het formulier wanneer u het publiceert.

Component, werkbalk

Wanneer u een component selecteert, ziet u een werkbalk waarin u de component kunt bewerken. U krijgt opties om, eigenschappen van de componenten te snijden te kleven, te bewegen en te specificeren. U kunt kiezen uit de volgende opties:

A.Configure: Wanneer u Configure tikt, zijn componenteigenschappen zichtbaar in de zijbalk. Als u deze eigenschappen configureert, kunt u de ervaring voor het vastleggen van gegevens aanpassen. U kunt de elementnaam van de component wijzigen en de labeltekst opgeven in het veld Titel van de component. Met elementnaam kunt u waarden vastleggen die gebruikers invoeren met de component. In de componenteigenschappen geeft u het gedrag van de component op en beheert u de gebruikersinvoer. Configureer eigenschappen in de zijbalk om gebruikersgegevens vast te leggen en te gebruiken voor verdere verwerking. Met eigenschappen voor adaptieve formuliercontainers kunt u clientbibliotheken, indelingen, thema's, Document of Record-instellingen, opslaginstellingen, verzendinstellingen en metagegevensinstellingen opgeven.

B.Copy: Met de optie Kopiëren kunt u een component kopiëren en op andere plaatsen in het formulier plakken. Wanneer u een component plakt, krijgt de geplakte component een nieuwe elementnaam maar behoudt deze de eigenschappen van de gekopieerde component.

C.Cut: Met de optie Knippen kunt u een component in het aangepaste formulier van de ene naar de andere plaats verplaatsen.

D. Delete: Hiermee kunt u de component uit het formulier verwijderen.

E. Insert: Hiermee kunt u een component invoegen boven de geselecteerde component.

F. Paste: Hiermee kunt u de component die u hebt geknipt of gekopieerd, plakken met de hierboven beschreven opties.

G. Edit rules: Hiermee opent u de regeleditor. Zie Regeleditor voor meer informatie.

H. Groep: Hiermee kunt u meerdere componenten selecteren als u meerdere componenten tegelijk wilt knippen, kopiëren of plakken.

I. Parent: Hiermee kunt u het bovenliggende element van een component selecteren. Een tekstveld bevindt zich bijvoorbeeld binnen een subsectie, die zich in een sectie bevindt. De sectie bevindt zich in het hoofddeelvenster van de hulplijn en de adaptieve formuliercontainer is het bovenliggende element van een hoofddeelvenster van de hulplijn. Voor een component, kunt u alle opties zien met hiërarchie gesorteerd onderaan-op.

Als u bijvoorbeeld Parent tikt voor een tekstvak, ziet u:

• Onderafdeling
• Sectie
• guideRootPanel
• Container voor adaptieve vorm

J. Overige: Biedt meer opties voor het werken met de geselecteerde component.

• SOM-expressie weergeven
• Een deelvenster opslaan als fragment (alleen voor deelvensters)
• Onderliggend deelvenster toevoegen (alleen voor deelvensters)
• Deelvensterwerkbalk toevoegen (alleen voor deelvensters)
• Vervangen (niet voor deelvensters)

Aangepaste formulierpagina

De aangepaste formulierpagina is het daadwerkelijke formulier. Dit is net als elke andere WCM-pagina die is gemodelleerd als de WCM cq:Page-component. In de volgende afbeelding ziet u de inhoudsstructuur van een adaptief formulier.

De inhoudsstructuur bevat doorgaans de volgende primaire componenten:

• guideContainer: De basis van een adaptief formulier, dat is gemarkeerd als Begin van adaptief formulier in de gebruikersinterface van het adaptieve formulier. In deze component kunt u het volgende opgeven:

  • Mobiele lay-out van het adaptieve formulier: Hiermee definieert u de weergave van het formulier op mobiele apparaten.
  • Bedankt, pagina: Hiermee definieert u de pagina waarop de gebruiker na het verzenden van het formulier wordt omgeleid.
  • Handeling verzenden: Hiermee bepaalt u hoe het formulier op de server wordt verwerkt wanneer de gebruiker het formulier verzendt.
  • Stijlen: Hiermee geeft u het pad op naar het CSS-bestand dat wordt gebruikt om de weergave van het formulier aan te passen.

• rootPanel: Het hoofddeelvenster van een adaptief formulier. Het kan subdeelvensters onder de puntenknoop bevatten. Aan elk deelvenster, inclusief het hoofddeelvenster, kan een lay-out zijn gekoppeld. De indeling van het deelvenster bepaalt de indeling van het formulier. In de accordeonlay-out* worden *de onderdelen weergegeven als Accordion-stappen.

• toolbar: Een adaptieve formuliercontainer heeft een bijbehorende algemene werkbalk, die algemeen is voor het formulier. Deze werkbalk kan worden toegevoegd met de handeling Werkbalk toevoegen op de bewerkbalk. Hiermee kunnen auteurs handelingen toevoegen, zoals Verzenden, Opslaan, Herstellen, enzovoort.

• assets: Dit knooppunt bevat aanvullende informatie die wordt gebruikt voor het ontwerpen van formulieren. Bijvoorbeeld details van het formuliermodel, lokalisatiedetails, enzovoort).

Bronnen voor Business.Adobe.com

Content Insights Auto Text Summarization Style System Auto Form Fill Web Content Management Dynamic Media