Använd layoutläget för att ändra storlek på komponenter use-layout-mode-to-resize-components
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 det adaptiva gränssnittet för formulärutveckling kan du ändra storlek på komponenter i layoutläget. Dra och släpp blå punkter i kolumner för att definiera start- och slutpunkterna för placering av komponenter. De blå punkterna visas när du har tryckt på komponenten i det responsiva rutnätet. Det responsiva rutnätet består av 12 lika stora kolumner. Den vita och blå färgskuggningen i alternativa kolumner skiljer den ena kolumnen från den andra.
Du kan använda layoutläget för att ändra storlek på komponenter för alla enhetstyper, som stationära datorer, surfplattor, telefoner och andra mindre enheter. Tabletten hämtar automatiskt layoutkonfigurationen från skrivbordsversionen och de mindre enheterna hämtar layoutkonfigurationen från telefonen. Du kan dock åsidosätta de automatiskt härledda konfigurationerna för att definiera olika konfigurationer för varje enhetstyp.
Åtkomst till layoutläge access-layout-mode
Välj Layout i listrutan som visas högst upp i det adaptiva formulärredigeringsgränssnittet bredvid alternativet Förhandsgranska . Formuläret visas i layoutläget.
-
Logga in på AEM författarinstans och gå till Adobe Experience Manager > Forms > Forms & Documents.
-
Skapa ett anpassat formulär eller öppna ett befintligt.
-
Välj Layout i listrutan som visas högst upp bredvid alternativet Förhandsvisa . Formuläret visas i layoutläget.
Ändra storlek på komponenter resize-components
-
Markera den komponent som du vill ändra storlek på i layoutläget. De blå punkterna visas i början och slutet av det responsiva rutnätet.
-
Dra och släpp de blå punkterna för att definiera placeringen av komponenten i det responsiva rutnätet.
Verktygsfältet som visas när du har tryckt på komponenter består av följande alternativ:
- Parent: Välj den överordnade komponenten för en komponent.
- Revert breakpoint layout: Ångra alla ändringar av storleksändring och använd standardlayout på komponenten.
- Float to new line: Skift komponenten till nästa rad om det finns flera komponenter på samma rad.
Du kan också använda alternativet Revert breakpoint layout (
note note NOTE Du kan inte ändra storlek på tabellkolumn, verktygsfält, verktygsfältsknapp och målområdeskomponenter i layoutläget. Använd stilläget om du vill ändra storlek på de här komponenterna.
Exempel example
Mål: Du vill infoga en tabellkomponent och en bildkomponent och placera dem parallellt med varandra i en adaptiv form.
-
Infoga tabell- och bildkomponenterna i redigeringsläget i det adaptiva formuläret. Bildkomponenten visas efter tabellkomponenten.
-
Växla till layoutläge och markera tabellkomponenten. De blå punkter som komponentvisningen ska ändra storlek på i kolumnerna 1 och 12.
-
Dra och släpp den blå punkten i kolumn 12 till kolumn 6 i det responsiva rutnätet.
-
Markera på samma sätt bildkomponenten och dra och släpp den blå punkten i kolumn 1 till kolumn 7 i det responsiva rutnätet. Tabellen och bildkomponenterna visas parallellt med varandra.
Du kan markera bildkomponenten och välja alternativet Flyt till ny rad i verktygsfältet för att flytta bildkomponenten till nästa rad.
Ändra storlek på paneler resize-panels-layout-mode
Utför följande steg om du vill ändra storlek på hela panelen i stället för enskilda komponenter:
-
Markera någon av komponenterna på panelen som du vill ändra storlek på, välj
De blå punkterna visas i början och slutet av det responsiva rutnätet.
-
Dra och släpp de blå punkterna för att definiera panelens position i det responsiva rutnätet.
Du kan upprepa steg 1 och 2 och välja
Definiera layout med flera kolumner för en panel
Utför följande steg för att definiera antalet kolumner för en panel:
-
I läget Edit markerar du panelen, väljer
-
Välj
-
I Layout-läget markerar du någon av komponenterna på panelen, väljer
-
Välj
Aktivera det nya responsiva rutnätet för äldre responsiva layouter enableresponsivegrid
Aktivera det nya responsiva rutnätet för formulär som du skapar med AEM Forms 6.4 eller tidigare för att ändra storlek på komponenter.
Gör så här för att aktivera det nya responsiva rutnätet:
- Välj Layout i listrutan som visas högst upp bredvid alternativet Förhandsvisa . En bekräftelse som aktiverar layoutläget visas.
- Välj Ja om du vill aktivera layoutläget för formuläret.
Bädda in ett gammalt fragment i en adaptiv form med ny responsiv layout embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout
Med den nya responsiva layouten för anpassningsbara formulär kan du lägga till ett adaptivt formulärfragment med den gamla responsiva layouten i formuläret. Den nya layouten tar dock bort de layoutegenskaper som redan har definierats för komponenter som används i fragmentet. Du kan växla till layoutläget för att definiera layoutegenskaperna för komponenter som används i fragmentet.
Bädda in ett fragment med ny responsiv layout i ett gammalt anpassat formulär embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form
Om du bäddar in ett fragment med den nya responsiva layouten i ett adaptivt formulär med en gammal responsiv layout uppmanas du att aktivera layoutläget för formuläret och bädda in fragmentet igen.
Om du vill aktivera layoutläget väljer du Layout i listrutan som visas högst upp bredvid alternativet Förhandsgranska och sedan Ja för att bekräfta. Välj läget Redigera om du vill bädda in fragmentet igen.
Inaktivera layoutläget för formulär med gammal responsiv layout disable-layout-mode-for-forms-with-old-responsive-layout
Du kan inaktivera layoutläget för formulär med äldre responsiv layout genom att redigera egenskaperna för mallen som används i formuläret.
Utför följande steg för att inaktivera layoutläget:
-
Välj Tools > General > Templates och öppna mallen som används i formuläret i Edit-läge.
-
Markera dokumentbehållaren i den vänstra rutan och välj Policy.
-
Välj fliken Layout Settings och välj Disable Layout Mode.
-
Välj
