DocumentatieAEM 6.5Handboek

De indeling en positie van foutberichten van een adaptief formulier aanpassen customize-layout-and-positioning-of-error-messages-of-an-adaptive-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Gebruiker
  • Ontwikkelaar

U kunt de indeling en de positie van de foutberichten van een adaptief formulier aanpassen. U kunt de volgende aanpassingen uitvoeren:

  • De locatie en lay-out van het bijschrift van een veld aanpassen zonder de bijbehorende CSS-eigenschappen te wijzigen
  • De positie van inline-foutberichten aanpassen
  • Inhoud van dynamische Help-indicator aanpassen
  • De positie van de veldcomponenten (bijschrift, widget, korte beschrijving, lange beschrijving en Help-indicatorcomponenten) aanpassen zonder de bijbehorende CSS-eigenschappen te wijzigen

Lay-out van velden aanpassen customize-layout-of-fields

U kunt de indeling van één veld of van alle velden aanpassen om de positie van bijschrift en foutberichten te wijzigen.

Ga als volgt te werk om een aangepaste indeling toe te passen op een veld:

Lay-out van één veld aanpassen customize-layout-of-a-single-field

  1. Open de vorm op wijze van de Stijl. Om de vorm op stijlwijze te openen, op de paginaboolbar selecteren canvas-drop-down > Stijl.

  2. In sidebar, onder Objecten van de Vorm, selecteer het gebied en selecteer uitgeven knoop uitgeven-knoop .

  3. Selecteer de status van het veld dat u wilt aanpassen en geef de opmaak voor die status op.

    het specificeren van gealigneerde het stileren van een gebied

De indeling van alle velden van een formulier aanpassen customize-layout-of-all-the-fields-of-a-form

Met AEM Forms kunt u nu een thema maken en dit toepassen op uw formulier. Met de Thema-editor kunt u de opmaak van formuliercomponenten op één locatie opgeven. Wanneer u een thema maakt, geeft u de stijl op componentniveau op. Voor meer informatie over thema's, zie Thema's in AEM Forms.

Maak een thema met de Thema-editor om de indeling van alle velden in het formulier aan te passen. Nadat u een thema hebt gemaakt, voert u de volgende stappen uit om het op een formulier toe te passen:

  1. Open het formulier in de bewerkingsmodus.
  2. Op geef wijze uit, selecteer een component, dan uitgezocht gebied-niveau > Aangepaste Container van de Vorm, en selecteer dan cmp .
  3. Selecteer in het zijpaneel onder Adaptief formulierthema het thema dat u hebt gemaakt met de Thema-editor.

Een aangepaste veldindeling maken create-a-custom-field-layout

  1. Open CRXDE Lite. Het gebrek URL is https://' [ server ]:[ haven ]'/crx/de.

  2. Kopieer een veldindeling van het knooppunt /libs/fd/af/layouts/field (bijvoorbeeld defaultFieldLayout) naar het knooppunt /apps (bijvoorbeeld /apps/af-field-layout).

  3. Wijzig de naam van het gekopieerde knooppunt en het bestand defaultFieldLayout.jsp. Bijvoorbeeld errorOnRight.jsp.

  4. Wijzig de waarde van de eigenschappen qtip en jcr:description van het gekopieerde knooppunt. Wijzig bijvoorbeeld de waarde van de eigenschappen in Fout rechts

  5. Om nieuwe stijlen en gedrag toe te voegen, creeer een cliëntbibliotheek in de /etc knoop.

    Maak bijvoorbeeld op de locatie /etc/af-field-layout-clientlib de client-library van het knooppunt. Voeg de eigenschap Categorieën toe met het bestand value.field.errorOnRight en style.less met de volgende code:

    code language-css 
    .widgetErrorWrapper {

 height: 38px;
 margin: 5px;

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

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

}

  6. Als u de weergave en het gedrag wilt verbeteren, neemt u de clientbibliotheek op die in het lay-outbestand is gemaakt (errorOnRight.jsp).

  7. Open uitgeven dialoogdoos van het gebied en selecteer het Stijlen tabel. In vorm de drop-down doos van de Lay-out van het Gebied, selecteer de pas gecreëerde lay-out, en klik O.K..

Het pakket ErrorOnRight.zip bevat code waarmee foutberichten aan de rechterkant van velden worden weergegeven.

Bestand ophalen

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