DokumentationAEM 6.5Användarhandbok

Anpassa layout och placering av felmeddelanden i ett anpassat formulär customize-layout-and-positioning-of-error-messages-of-an-adaptive-form

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Användare
  • Utvecklare

Du kan anpassa layout och placering av felmeddelanden i ett anpassat formulär. Du kan utföra följande anpassningar:

  • Anpassa plats och layout för bildtexten i ett fält utan att ändra motsvarande CSS-egenskaper
  • Anpassa positionen för infogade felmeddelanden
  • Anpassa innehållet i indikatorn för dynamisk hjälp
  • Anpassa placeringen av fältkomponenterna (bildtext, widget, kort beskrivning, lång beskrivning och hjälpindikatorkomponenter) utan att ändra motsvarande CSS-egenskaper

Anpassa fältlayout customize-layout-of-fields

Du kan anpassa layouten för ett enskilt fält eller för alla fält för att ändra positionen för bildtexter och felmeddelanden.

Så här använder du en anpassad layout för ett fält:

Anpassa layouten för ett enskilt fält customize-layout-of-a-single-field

  1. Öppna formuläret i läget Format. Om du vill öppna formuläret i formatläge väljer du arbetsytelistrutan > Format i sidverktygsfältet.

  2. Markera fältet under Formulärobjekt i sidofältet och välj redigeringsknappen redigera-knapp .

  3. Markera läget för det fält som du vill anpassa och ange formatet för det läget.

    Ange infogad formatering för ett fält

Anpassa layout för alla fält i ett formulär customize-layout-of-all-the-fields-of-a-form

Med AEM Forms kan du nu skapa ett tema och använda det i ditt formulär. Med temaredigeraren kan du ange formaten för formulärkomponenterna på ett och samma ställe. När du skapar ett tema anger du en stil på komponentnivå. Mer information om teman finns i Teman i AEM Forms.

Skapa ett tema med hjälp av temaredigeraren för att anpassa layouten för alla fält i formuläret. När du har skapat ett tema utför du följande steg för att tillämpa det på ett formulär:

  1. Öppna formuläret i redigeringsläge.
  2. Markera en komponent i redigeringsläget, välj fältnivå > Adaptiv formulärbehållare och välj sedan cmpr .
  3. I sidlisten, under Adaptivt formulärtema, väljer du det tema du har skapat med hjälp av Theme Editor.

Skapa en anpassad fältlayout create-a-custom-field-layout

  1. Öppna CRXDE Lite. Standardwebbadressen är https://'[server]:[port]/crx/de.

  2. Kopiera en fältlayout från noden /libs/fd/af/layouts/field (till exempel defaultFieldLayout) till noden /apps (till exempel /apps/af-field-layout).

  3. Byt namn på den kopierade noden och filen defaultFieldLayout.jsp. Till exempel errorOnRight.jsp.

  4. Ändra värdet för egenskaperna qtip och jcr:description för den kopierade noden. Ändra till exempel värdet för egenskaperna till Fel till höger

  5. Om du vill lägga till nya format och beteenden skapar du ett klientbibliotek i noden /etc.

    Skapa till exempel nodens klientbibliotek på platsen /etc/af-field-layout-clientlib. Lägg till egenskapen categories med värdet af.field.errorOnRight och style.less i följande kod:

    code language-css 
    .widgetErrorWrapper {

 height: 38px;
 margin: 5px;

 .guideFieldWidget{
 width: 60%;
 float: left;
 }

 .guideFieldError{
 overflow:hidden;
 width:40%;
 }

}

  6. Om du vill förbättra utseendet och beteendet inkluderar du klientbiblioteket som skapades i layoutfilen (errorOnRight.jsp).

  7. Öppna redigeringsdialogrutan för fältet och välj fliken Format. Markera den nyskapade layouten i listrutan Konfigurera fältlayout och klicka på OK.

Paketet ErrorOnRight.zip innehåller kod som visar felmeddelanden till höger om fält.

Hämta fil

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2