Inleiding tot het ontwerpen van adaptieve formulieren introduction-to-authoring-adaptive-forms
Overzicht overview
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
Gegevensintegratie Hiermee kunt u entiteiten en services integreren van verschillende gegevensbronnen 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-formuliersjabloon gebruiken
Het is een ideaal formuliermodel als u investeert in XFA-gebaseerde 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. -
Een XML-schemadefinitie (XSD) of een JSON-schema gebruiken
De schema's van XML en JSON vertegenwoordigen de structuur waarin de gegevens door het achterste deelsysteem in uw organisatie worden geproduceerd of worden 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.
Ga voor meer informatie over het maken van een adaptief formulier naar Een adaptief formulier maken.
UI voor het schrijven van adaptieve formulieren adaptive-form-authoring-ui
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:
A. Zijbalk B. Pagina, werkbalk C. Aangepaste formulierpagina
Zijbalk sidebar
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.
A. Inhoudsbrowser B. Eigenschappenbrowser C. Bandenbrowser D. Browser voor componenten
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 en tik vervolgens op
-
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 best-practices
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. Tik op de component en tik om de eigenschappen van een component te configureren
-
Een component wordt geïdentificeerd met zijn elementnaam. Wanneer u tikt
-
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:
- Tik om een component te selecteren die een Title eigendom en waarvan Hide title eigenschap is uitgeschakeld.
- Tikken
- 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 dialoogvenster Validation Pattern onder de accordeon Patronen in de eigenschappen van de component. 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 ook 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 de optie Use HTML Type Number in de componenteigenschappen.
-
U kunt een component van de Doos van de Tekst toelaten om RTF goed te keuren. Als u RTF-tekst wilt inschakelen voor een tekstvak, schakelt u de optie Allow Rich Text in de componenteigenschappen.
-
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. 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 de items Keuzerondje en Selectievakje in
{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:
- Navigeer op uw AEM Forms-server naar Adobe Experience Manager > Tools > Operations > Web Console.
- Zoeken en tikken Adaptive Forms Configuration Service.
- Schakel in het dialoogvenster Adaptive Forms Configuration Service de optie Make File Names Unique. Standaard is dit uitgeschakeld.
-
Om gebruikers in staat te stellen een PDF vast te maken gebruikend browser Safari, zorg ervoor dat application/pdf wordt toegevoegd aan de eigenschap Ondersteunde bestandstypen van de component Bestandsbijlage. Aangepaste formulieren die zijn gemaakt met een eerdere AEM Forms-versie kunnen .pdf in plaats van application/pdf in de eigenschap Ondersteunde bestandstypen.
Voor meer tips en trucs over adaptieve formulieren raadpleegt u Aanbevolen werkwijzen voor het werken met adaptieve formulieren.
Pagina, werkbalk page-toolbar
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
-
Page information
-
Emulator
-
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 component-toolbar
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 tikt Configure, 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 voor meer informatie Regeleditor.
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 tikt Parent 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 af-page
De aangepaste formulierpagina is het daadwerkelijke formulier. Het is als elke andere WCM pagina die als WCM wordt gemodelleerd 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, gemarkeerd als Begin van het adaptieve 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.
- Pagina Bedankt: 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 hoe het formulier wordt opgemaakt. 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 opdracht Werkbalk toevoegen in 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).