Layoutfunktioner i Adaptive Forms layout-capabilities-of-adaptive-forms

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenterfor skapa ny Adaptive Formseller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

Adobe Experience Manager Med kan ni skapa lättanvända, adaptiva Forms som ger användarna dynamiska upplevelser. Formulärlayouten styr hur objekt och komponenter visas i ett adaptivt formulär.

Typ av layout types-of-layouts

Med ett adaptivt formulär får du följande typer av layouter:

Panel Layout Styr hur objekt eller komponenter i en panel visas på en enhet.

Mobile Layout Styr navigeringen i ett formulär på en mobil enhet. Om enhetens bredd är minst 768 pixlar betraktas layouten som en mobillayout och optimerad för en mobil enhet.

Toolbar Layout Styr placeringen av åtgärdsknappar i verktygsfältet eller panelverktygsfältet i ett formulär.

Alla dessa panellayouter definieras i /libs/fd/af/layouts plats.

Använd redigeringsläget i Experience Manager.

Panel layout panel-layout

En formulärförfattare kan koppla en layout till varje panel i ett adaptivt formulär, inklusive rotpanelen.

Panellayouterna finns på /libs/fd/af/layouts/panel plats. Markera panelen och markera om du vill visa panelegenskaperna.

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

Använd den här panellayouten för att skapa en responsiv layout som anpassar sig till enhetens skärmstorlek utan att behöva använda någon särskild navigering.

Med den här layouten kan du montera flera Panel Adaptive Form -komponenter efter varandra i panelen.

Wizard wizard

Använd den här panellayouten för guidad navigering i ett formulär. Använd till exempel den här layouten när du vill hämta in obligatorisk information i ett formulär och vägleda användarna steg för steg.

Använd Panel Adaptive Form -komponent för stegvis navigering i en panel. När du använder den här layouten flyttas användaren till nästa steg först när det aktuella steget är klart

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

Accordion layout-for-accordion-design

Med den här layouten kan du montera Panel Adaptive Form i en panel med navigering i dragspelsstil. Med den här layouten kan du även skapa upprepningsbara paneler. Med upprepningsbara paneler kan du lägga till eller ta bort paneler dynamiskt efter behov. Du kan definiera minsta och högsta antal gånger en panel upprepas. Panelens namn kan också bestämmas dynamiskt utifrån informationen som finns i panelobjekten.

Sammanfattningsuttryck kan användas för att visa de värden som användaren anger i den minimerade panelens titel.

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

Med den här layouten kan du montera Panel Adaptive Form i en panel med tabbnavigering. Flikarna placeras till vänster om panelinnehållet.

Tabbar till vänster om en panel

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

Med den här layouten kan du montera Panel Adaptive Form Komponent i en panel med tabbnavigering. Flikarna placeras ovanpå panelinnehållet.

Mobillayouter mobile-layouts

Mobillayouter möjliggör användarvänlig navigering på mobila enheter med relativt mindre skärmar. I mobila layouter används antingen flikformat eller guideformat för formulärnavigering. När du använder en Mobile-layout får du en layout för hela formuläret.

Den här layouten styr navigeringen med ett navigeringsfält och en navigeringsmeny. Navigeringsfältet visas < och > ikon som anger next och previous navigeringssteg i formuläret.

Mobillayouterna finns på /libs/fd/af/layouts/mobile/ plats. Följande mobila layouter är som standard tillgängliga i Adaptive Forms.

Välj Add navigable items of responsive layout to mobile menu om du vill visa de navigeringsbara alternativ som är tillgängliga för en panel i Mobile-layouten. De navigeringsbara alternativen visas bara om du väljer Responsive layout för en panel.

När du använder en Mobile-layout är formulärmenyn tillgänglig genom att trycka på -ikon.

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

I den här layouten, som namnet föreslår, visas panelrubriker tillsammans med navigeringsmenyn och navigeringsfältet. Den här layouten innehåller även ikoner för Nästa och Föregående för navigering.

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

Den här layouten, som namnet föreslår, visar bara navigeringsmenyn och navigeringsfältet utan panelrubriker. Den här layouten innehåller även ikoner för Nästa och Föregående för navigering.

Se även see-also