Layoutfunktioner i Adaptive Forms

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.

Typer av layouter

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

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. Tryck på panelen och välj om du vill visa panelegenskaperna.

Responsive - everything on one page without navigation

Använd den här panellayouten för att skapa en responsiv layout som anpassar sig efter 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

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 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

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 slutanvändaren anger i titeln på den minimerade panelen.

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 som visas till vänster på en panel

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

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 för att 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, för att få åtkomst till olika formulärpaneler, tillgänglig genom att trycka på ikon.

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 ​

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.

Resurser för Business.Adobe.com