Bildkomponent image-adaptive-forms-core-component

En bildkomponent i ett adaptivt formulär är ett sätt att inkludera bilder i ett formulär. Dessa bilder kan användas för att förbättra formulärets övergripande design, ge ytterligare information eller fungera som visuell hjälp för att hjälpa användarna förstå formulärets syfte. Bildkomponenten kan användas för att lägga till en logotyp, ett foto eller en bild i formuläret.

För hjälpmedel är det viktigt att ange Alternativ text till bilden för att ge bilden ett kort, beskrivande textalternativ som beskriver bilden för användare som inte kan se den.

Exempel

exempel

Användning reasons-to-use-image-in-a-form

Det finns många skäl till att det är bra att ta med en bildkomponent i en adaptiv form, bland annat:

  • Varumärkning: En bild kan användas för att visa logotypen eller namnet på den organisation som skapade formuläret, vilket bidrar till att etablera varumärkesigenkänning och trovärdighet.

  • Visuella hjälpmedel: En bild kan bidra till att ge en extra nivå av information till användarna genom att den används som visuell hjälp för att hjälpa användarna förstå formulärets syfte.

  • Dekoration: En bild kan användas för att förbättra formulärets allmänna design och göra den mer visuellt tilltalande.

  • Användarupplevelse: En bild kan användas för att göra formuläret mer användarvänligt genom att ge användarna ett tydligt och intuitivt sätt att komma åt och fylla i formulärfält.

Version och kompatibilitet version-and-compatibility

Den adaptiva Forms Image 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:

Komponentversion
AEM as a Cloud Service
AEM 6.5.16.0 Forms eller senare
v1
Kompatibel med
version 2.0.4 och senare
Kompatibel med
version 1.1.12 och senare, men mindre än 2.0.0.

Information om versioner och versioner av kärnkomponenter finns i dokumentet Core Components Versions .

Teknisk information technical-details

Hämta den senaste informationen om den adaptiva Forms Image Core-komponenten i den tekniska dokumentationen för GitHub. Mer information om hur du utvecklar kärnkomponenter finns i dokumentationen för kärnkomponentutvecklare.

Konfigurera dialogruta configure-dialog

Du kan enkelt anpassa din bildupplevelse för besökare med dialogrutan Konfigurera. Du kan också enkelt definiera bildalternativ för en smidig användarupplevelse.

Fliken Egenskaper

  • 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 titeln 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 rubriktexten.

  • Markera som obundet formulärelement: Välj alternativet att konfigurera ett formulärfält som inte är länkat till något schema. Med det här alternativet kan du spara data utan att uppdatera datakällan. Det gör det också möjligt att hantera data på ett anpassat sätt, skilt från standarddatabasintegrering.

  • Beskrivning - En beskrivning är en kort textförklaring som ger ytterligare information eller förtydliganden om syftet med en viss bild.

  • Släpp en resurs här eller bläddra efter en fil som ska överföras - Med det här alternativet kan du släppa en resurs som en bild genom att dra och släppa med musen. Du kan också överföra en fil från ett lokalt filsystem med knappen Bläddra . När du har lagt till en bild visas tre knappar längst ned i bilden:

    • Redigera - Tryck eller klicka på Redigera för att hantera återgivningarna av resursen i Assets Editor.
    • Radera - Tryck eller klicka på Radera för att avmarkera den markerade bilden.
    • Välj - Tryck eller klicka på alternativet Välj om du vill välja en annan bild från Assets-mappen.
  • Alternativ text - Det här alternativet används för att ange texten som ger ett kort och beskrivande textalternativ för bilden, som beskriver bilden för användare med nedsatt syn.

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

Designdialogruta design-dialog

Designdialogrutan används för att definiera och hantera CSS-format för bildkomponenten.

Fliken Format styles-tab

Fliken används för att definiera och hantera CSS-format för en komponent. Den adaptiva Forms Image Core-komponenten stöder AEM Style System.

Designdialogrutan

  • Standard-CSS-klasser: Du kan ange en standard-CSS-klass för den adaptiva Forms Image 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: bold". Du kan använda eller tillämpa dessa format på ett adaptivt formulär i en anpassad Forms-redigerare. Om du vill använda ett format väljer du den komponent du vill använda formatet på i Adaptiv Forms-redigerare, navigerar till egenskapsdialogrutan och väljer önskat format i listrutan Format. Om du behöver uppdatera eller ändra formaten går du tillbaka till designdialogrutan, uppdaterar formaten på formatfliken och sparar ändringarna.

Anpassade egenskaper

Dialogrutan Anpassade egenskaper

Med anpassade egenskaper kan du koppla anpassade attribut (nyckelvärdepar) till en anpassad formulärets kärnkomponent med hjälp av formulärmallen. De anpassade egenskaperna återspeglas i egenskapsavsnittet i den headless-renderingen av komponenten. Det gör att du kan skapa dynamiskt formulärbeteende som anpassas baserat på anpassade attributvärden. Utvecklare kan till exempel utforma olika renderingar av en Headless Forms-komponent för mobiler, datorer eller webbplattformar, vilket avsevärt förbättrar användarupplevelsen på en mängd olika enheter.

  • Gruppnamn: Du kan ange ett namn som identifierar den anpassade egenskapsgruppen. Du kan lägga till, ta bort eller ordna om flera anpassade egenskapsgrupper. När du har lagt till den anpassade egenskapsgruppen kan du se följande alternativ:

    • Nyckelvärdepar: Du kan lägga till flera anpassade egenskapsnamn och anpassade egenskapsvärden genom att klicka på knappen Lägg till för varje anpassad egenskapsgrupp.

    • Ta bort: Tryck eller klicka för att ta bort det anpassade egenskapsnamnet och det anpassade egenskapsvärdet.

    • Ordna om: Tryck eller klicka och dra för att ändra ordningen på det anpassade egenskapsnamnet och det anpassade egenskapsvärdet.

Se även see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c