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

Adobe rekommenderar att du använder den moderna och utbyggbara datainhämtningen Core Componentsför att skapa nya adaptiva Formseller att lägga till adaptiva 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.

Med Adobe Experience Manager kan du 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 på platsen /libs/fd/af/layouts.

Om du vill ändra layouten för ett adaptivt formulär använder du 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 är tillgängliga på /libs/fd/af/layouts/panel-platsen. Markera panelen och välj för att 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 placera flera Panel Adaptive Form-komponenter efter varandra på 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 komponenten Panel Adaptive Form om du vill skapa stegvisa navigeringar 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 placera komponenten Panel Adaptive Form på en panel med dragspelsformatsnavigering. 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 placera komponenten Panel Adaptive Form på 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 placera komponenten Panel Adaptive Form på 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. I navigeringsfältet visas ikonen < och > som indikerar next och previous navigeringssteg i formuläret.

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

Välj alternativet Add navigable items of responsive layout to mobile menu om du vill visa de navigerbara alternativ som är tillgängliga för en panel i Mobile-layouten. De navigerbara 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å ikonen för att komma åt olika formulärpaneler.

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