Lay-outmogelijkheden van adaptieve Forms layout-capabilities-of-adaptive-forms

Adobe beveelt aan moderne en uitbreidbare gegevensvastlegging te gebruiken Kernonderdelenfor nieuwe Adaptieve Forms makenof Aangepaste Forms toevoegen aan AEM Sites-pagina's. Deze componenten betekenen een aanzienlijke vooruitgang in de aanmaak van Adaptive Forms en zorgen voor indrukwekkende gebruikerservaring. In dit artikel wordt een oudere aanpak beschreven voor de auteur Adaptive Forms die gebruikmaakt van stichtingscomponenten.

Versie
Artikelkoppeling
AEM 6,5
Klik hier
AEM as a Cloud Service
Dit artikel

Adobe Experience Manager Hiermee kunt u gebruiksvriendelijke adaptieve Forms maken die eindgebruikers een dynamische ervaring biedt. De formulierindeling bepaalt hoe items of componenten in een adaptieve vorm worden weergegeven.

Typen lay-outs types-of-layouts

Een adaptief formulier biedt u de volgende typen indelingen:

Panel Layout Bepaalt hoe items of componenten in een deelvenster op een apparaat worden weergegeven.

Mobile Layout Hiermee regelt u de navigatie van een formulier op een mobiel apparaat. Als de apparaatbreedte 768 pixels of meer is, wordt de lay-out beschouwd als een mobiele lay-out en geoptimaliseerd voor een mobiel apparaat.

Toolbar Layout Hiermee bepaalt u de plaatsing van de knoppen Handeling op de werkbalk of de werkbalk van het deelvenster in een formulier.

Al deze paneellay-outs worden bepaald bij /libs/fd/af/layouts locatie.

Als u de indeling van een adaptief formulier wilt wijzigen, gebruikt u de ontwerpmodus in Experience Manager.

Panel layout panel-layout

Een auteur van een formulier kan een indeling koppelen aan elk deelvenster van een adaptief formulier, inclusief het hoofdvenster.

De schermindelingen van het deelvenster zijn beschikbaar op /libs/fd/af/layouts/panel locatie. Selecteer het deelvenster en selecteer cmppr1 om de deelvenstereigenschappen weer te geven.

Lijst met deelvensterindelingen voor het hoofdvenster van een adaptief formulier

Responsive - everything on one page without navigation responsive-everything-on-one-page-without-navigation-br

Met deze deelvensterlay-out maakt u een responsieve lay-out die zich aanpast aan de schermgrootte van uw apparaat zonder dat u hiervoor speciale navigatie nodig hebt.

Met deze layout kunt u meerdere plaatsen Panel Adaptive Form in het deelvenster een voor een.

Een formulier met een responsieve indeling zoals wordt weergegeven op een klein scherm

Wizard wizard

Met deze deelvensterindeling kunt u navigatie met instructies in een formulier bieden. Gebruik deze indeling bijvoorbeeld wanneer u verplichte gegevens in een formulier wilt vastleggen en gebruikers stapsgewijs wilt begeleiden.

Gebruik de Panel Adaptive Form voor stapsgewijze navigatie binnen een deelvenster. Als u deze lay-out gebruikt, gaat een gebruiker pas naar de volgende stap nadat de huidige stap is voltooid

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

Een formulier met wizardindeling

Accordion layout-for-accordion-design

Met deze lay-out kunt u de Panel Adaptive Form in een deelvenster met accordeonstijlnavigatie. Met deze indeling kunt u ook herhaalbare deelvensters maken. Met herhalende deelvensters kunt u, indien nodig, deelvensters dynamisch toevoegen of verwijderen. U kunt het minimum en het maximum aantal keren bepalen dat een paneel herhaalt. De titel van het deelvenster kan ook dynamisch worden bepaald op basis van de informatie in de deelvensteritems.

De summiere uitdrukking kan worden gebruikt om de waarden te tonen die door de gebruiker in de titel van het geminimaliseerde paneel worden verstrekt.

Herhaalbare deelvensters met de accordeonlay-out in Adaptive Forms

Tabbed layout - tabs appear on the left tabbed-layout-tabs-appear-on-the-left

Met deze lay-out kunt u de Panel Adaptive Form in een deelvenster met tabnavigatie. De tabbladen worden links van de inhoud van het deelvenster geplaatst.

In de lay-out Tabbed, verschijnen de lusjes op de linkerzijde

Tabs die links van een deelvenster worden weergegeven

Tabbed layout - tabs appear on the top tabbed-layout-tabs-appear-on-the-top

Met deze lay-out kunt u de Panel Adaptive Form Component in a panel with tab navigation. De tabbladen worden boven op de inhoud van het deelvenster geplaatst.

Lay-out met tabs in Adaptive Forms met tabs bovenaan

Mobiele lay-outs mobile-layouts

Mobiele lay-outs maken gebruikersvriendelijke navigatie op mobiele apparaten met relatief kleinere schermen mogelijk. Mobiele lay-outs maken gebruik van tabbladen of wizards voor formuliernavigatie. Als u een mobiele indeling toepast, beschikt u over één indeling voor het hele formulier.

Deze indeling bepaalt de navigatie met behulp van een navigatiebalk en een navigatiemenu. De navigatiebalk toont < en > pictogram om aan te geven next en previous navigatiestappen in het formulier.

De mobiele lay-outs zijn beschikbaar op /libs/fd/af/layouts/mobile/ locatie. De volgende mobiele lay-outs zijn standaard beschikbaar in Adaptive Forms.

Lijst met mobiele lay-outs in Adaptive Forms

Selecteer de Add navigable items of responsive layout to mobile menu Hiermee geeft u de opties voor navigatie weer die beschikbaar zijn voor een deelvenster in de mobiele lay-out. De navigeerbare opties zijn alleen zichtbaar als u Responsive lay-out voor een deelvenster.

Als u een mobiele indeling gebruikt, kunt u in het formuliermenu verschillende formulierdeelvensters openen door op aem6forms_form_menu pictogram.

Layout with panel titles in the form header layout-with-panel-titles-in-the-form-header

In deze indeling worden, zoals in de naam wordt gesuggereerd, deelvenstertitels weergegeven, samen met het navigatiemenu en de navigatiebalk. Deze indeling biedt ook de pictogrammen Volgende en Vorige voor navigatie.

Mobiele lay-outs met titels van deelvensters in de formulierkoppen

Layout without panel titles in the form header layout-without-panel-titles-in-the-form-header

In deze indeling worden, zoals in de naam wordt gesuggereerd, alleen het navigatiemenu en de navigatiebalk zonder venstertitels weergegeven. Deze indeling biedt ook de pictogrammen Volgende en Vorige voor navigatie.

Mobiele lay-outs zonder titels in de formulierkoppen

Zie ook see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab