Panelbehållare

I ett adaptivt formulär är en panel ett behållarelement som kan användas för att gruppera relaterade formulärelement. Det gör att du kan gruppera och ordna olika formulärelement på ett logiskt och meningsfullt sätt. Detta kan förbättra formulärets övergripande struktur och läsbarhet, vilket gör det lättare för användarna att förstå och navigera.

Paneler kan användas för att skapa komprimerbara avsnitt, vilket kan vara användbart för att dölja komplexa eller mindre ofta använda formulärfält, vilket gör formuläret enkelt och lätt att använda. Du kan även inkludera andra komponenter som text, kryssruta och knapp.

Den kan också användas för att ange olika regelbaserade åtgärder som att skicka formulär, öppna en webbplats, visa/dölja komponenter eller lägga till en instans av en panel.

Exempel

Användning

Det finns flera skäl att använda en panel i ett formulär, bland annat:

• Ordna formulärelement: En panel kan användas för att gruppera relaterade formulärelement, vilket gör det enklare för användarna att förstå och navigera i formuläret.

• Förbättra formulärstrukturen: Genom att gruppera formulärelement i paneler kan det förbättra formulärets övergripande struktur och läsbarhet, vilket gör det lättare att förstå.

• Skapa komprimerbara avsnitt: Paneler kan användas för att skapa komprimerbara avsnitt, vilket kan vara användbart för att dölja komplexa eller mindre ofta använda formulärfält, vilket gör formuläret enkelt och lätt att använda.

• Förbättra användbarheten: Genom att använda paneler för att ordna formulärelement kan det göra formuläret mer användarvänligt och lättare att använda, vilket kan leda till högre slutförandegrad.

Version och kompatibilitet

Den adaptiva Forms Accordion Core-komponenten släpptes i februari 2023 som en del av Core Components 2.0.4 för Cloud Service och Core Components 1.1.12 för AEM 6.5.16.0 Forms eller senare. Här är en tabell med alla versioner som stöds, AEM kompatibilitet och länkar till motsvarande dokumentation:

Information om versioner och versioner av kärnkomponenter finns i Huvudkomponentversioner -dokument.

Teknisk information

Hämta den senaste informationen om den adaptiva kärnkomponenten i Forms-panelbehållaren i den tekniska dokumentationen om GitHub. Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.

Konfigurera dialogruta

Du kan enkelt anpassa panelbehållarupplevelsen för besökare med dialogrutan Konfigurera. Du kan också enkelt definiera alternativ för panelbehållare för en smidig användarupplevelse.

Fliken Grundläggande

• Namn - Du kan enkelt identifiera en formulärkomponent med dess unika namn både i formuläret och i regelredigeraren, men namnet får inte innehålla blanksteg eller specialtecken.

• Titel - Med dess titel kan du enkelt identifiera en komponent i ett formulär. Som standard visas titeln ovanpå komponenten. Om du inte lägger till en titel visas komponentens namn i stället för titeltexten.

• Dölj titel - Välj alternativet om du vill dölja komponentens titel.

• Radbryt data i objekt - Välj "Radbryt data i ett objekt" om du vill placera fältdata från guiden i ett JSON-objekt. Om du inte väljer det här alternativet har JSON-objektet för att skicka data en platt struktur för guidens fält.

• Layout - Du kan ha en fast layout (enkel) eller en flexibel layout (responsivt stödraster) för guiden. Med den enkla layouten är allt fast på plats, medan det responsiva rutnätet gör att du kan justera komponenternas placering efter dina behov. Använd till exempel responsivt stödraster för att justera"Förnamn","Mittennamn" och"Efternamn" i ett formulär på en enda rad.

• Bindningsreferens - En bind referens är en referens till ett dataelement som lagras i en extern datakälla och används i ett formulär. Med den binda referensen kan du binda data dynamiskt till formulärfält så att formuläret kan visa de senaste data från datakällan. En bindningsreferens kan till exempel användas för att visa en kunds namn och adress i ett formulär baserat på kundens ID som anges i formuläret. Bindningsreferensen kan också användas för att uppdatera datakällan med data som anges i formuläret. På så sätt kan du med AEM Forms skapa formulär som interagerar med externa datakällor, vilket ger en smidig användarupplevelse för att samla in och hantera data.

• Dölj komponent - Välj alternativet att dölja komponenten från formuläret. Komponenten är fortfarande tillgänglig för andra syften, som att använda den för beräkningar i regelredigeraren. Detta är användbart när du behöver lagra information som inte behöver visas eller ändras direkt av användaren.

• Inaktivera komponent - Välj alternativet att inaktivera komponenten. Den inaktiverade komponenten är inte aktiv eller redigerbar av slutanvändaren. Användaren kan se fältets värde, men kan inte ändra det. Komponenten är fortfarande tillgänglig för andra syften, som att använda den för beräkningar i regelredigeraren.

Fliken Hjälpinnehåll

• Kort beskrivning - En kort beskrivning är en kort textförklaring som ger ytterligare information eller förtydliganden om syftet med ett visst formulärfält. Det hjälper användaren att förstå vilken typ av data som ska anges i fältet och kan ge riktlinjer eller exempel som hjälper till att säkerställa att den angivna informationen är giltig och uppfyller de önskade kriterierna. Som standard är korta beskrivningar dolda. Aktivera Visa alltid kort beskrivning för att visa den under komponenten.

• Visa alltid kort beskrivning - Aktivera alternativet att visa den korta beskrivningen under komponenten.

• Hjälptext - Hjälptexten hänvisar till ytterligare information eller vägledning som användaren får för att hjälpa sig fylla i ett formulärfält på rätt sätt. Det visas när användaren klickar på hjälpikonen (i) som finns bredvid komponenten. Hjälptexten ger mer detaljerad information än etiketten eller platshållartexten för ett formulärfält och är utformad för att hjälpa användaren förstå fältets krav eller begränsningar. Den kan också ge förslag eller exempel som gör det enklare och exaktare att fylla i formuläret.

Fliken Tillgänglighet

• Text för skärmläsare - Text för skärmläsare avser text som är avsedd att läsas av hjälpmedelstekniker, t.ex. skärmläsare, som används av personer med nedsatt syn. Den här texten innehåller en ljudbeskrivning av formulärfältets syfte och kan innehålla information om fältets titel, beskrivning, namn och relevanta meddelanden (anpassad text). Skärmläsartexten ser till att formuläret är tillgängligt för alla användare, även användare med nedsatt syn, och ger dem en fullständig förståelse för formulärfältet och dess krav.

• HTML roll som skärmläsaren kan meddela - Rollen HTML är ett attribut som används för att ange syftet med ett HTML-element för hjälpmedelstekniker som skärmläsare. Rollattributet används för att ge ytterligare kontext och semantisk innebörd till ett element, vilket gör det enklare för skärmläsare att tolka och meddela innehållet till användaren. I AEM Forms kan till exempel etiketten för ett formulärfält ha rollen"label", och inmatningsfältet kan ha rollen"texbox". Detta gör att skärmläsaren förstår förhållandet mellan etiketten och inmatningsfältet och kan meddela användaren dem på rätt sätt.

Designdialogruta

Designdialogrutan används för att definiera och hantera CSS-format för behållarkomponenten för panelen.

Fliken Tillåtna komponenter

The Tillåtna komponenter kan mallredigeraren ange vilka komponenter som kan läggas till som objekt i panelbehållarkomponenten i den adaptiva Forms-redigeraren.

Fliken Standardkomponenter

På den här fliken kan mallredigeraren mappa komponenter som kan läggas till som objekt till panelerna i panelbehållarkomponenten i den adaptiva Forms-redigeraren.

Responsiva inställningar

På den här fliken kan mallredigeraren ange hur många kolumner som ska visas i det responsiva rutnätet.

Fliken Inställningar för behållare

På fliken Behållarinställningar kan du ange komponenternas placering i den adaptiva Forms-redigeraren.

• Layout: Med den enkla layouten är allt fast på plats, medan det responsiva rutnätet gör att du kan ändra komponenternas placering efter dina behov.
• Inaktivera layout: Du kan även inaktivera layoutvalet i redigeringsdialogrutan genom att välja Inaktivera layout kryssrutan.
• Aktivera bakgrundsbild: På den här fliken kan du ange bakgrundsbild och -färg i mallredigeraren.
• Aktivera bakgrundsfärg: På den här fliken kan du ange bakgrundsfärg i mallredigeraren.

Fliken Format

Fliken används för att definiera och hantera CSS-format för en komponent. Core-komponenten för den adaptiva Forms-panelbehållaren stöder AEM Formatsystem.

• CSS-standardklasser: Du kan ange en standard-CSS-klass för den adaptiva Forms Core-komponenten.

• Tillåtna format: Du kan definiera format genom att ange ett namn och den CSS-klass som representerar formatet. Du kan till exempel skapa ett format med namnet"bold text" och ge CSS-klassen"font-weight: fet". Du kan använda eller använda dessa format på ett adaptivt formulär i Adaptiv Forms. Om du vill använda ett format väljer du den komponent som du vill använda redigeraren för formatet på i Adaptiv Forms-redigerare, navigerar till egenskapsdialogrutan och väljer önskat format i dialogrutan Stilar nedrullningsbar lista. Om du behöver uppdatera eller ändra formaten går du tillbaka till designdialogrutan, uppdaterar formaten på formatfliken och sparar ändringarna.

• HTML roll som skärmläsaren kan meddela - Rollen HTML är ett attribut som används för att ange syftet med ett HTML-element för hjälpmedelstekniker som skärmläsare. Rollattributet används för att ge ytterligare kontext och semantisk innebörd till ett element, vilket gör det enklare för skärmläsare att tolka och meddela innehållet till användaren. I AEM Forms kan till exempel etiketten för ett formulärfält ha rollen"label", och inmatningsfältet kan ha rollen"texbox". Detta gör att skärmläsaren förstår förhållandet mellan etiketten och inmatningsfältet och kan meddela användaren dem på rätt sätt.

Resurser för Business.Adobe.com