Personalizzare il layout e il posizionamento dei messaggi di errore di un modulo adattivo

È possibile personalizzare il layout e il posizionamento dei messaggi di errore di un modulo adattivo. Puoi eseguire le seguenti personalizzazioni:

  • Personalizzare la posizione e il layout della didascalia di un campo senza apportare alcuna modifica alle proprietà CSS corrispondenti
  • Personalizzare la posizione dei messaggi di errore in linea
  • Personalizzare il contenuto dell’indicatore della guida dinamica
  • Personalizzare la posizione dei componenti campo (didascalie, widget, breve descrizione, descrizione lunga e componenti indicatore della guida) senza apportare alcuna modifica alle proprietà CSS corrispondenti

Personalizzare il layout dei campi

È possibile personalizzare il layout di un singolo campo o di tutti i campi per modificare la posizione della didascalia e dei messaggi di errore. Per applicare un layout personalizzato a un campo, effettua le seguenti operazioni:

Personalizzare il layout di un singolo campo

Per applicare un layout personalizzato a un singolo campo, effettua le seguenti operazioni:

  1. Apri il modulo in Stile modalità. Per aprire il modulo in modalità stile, nella barra degli strumenti della pagina tocca elenco a discesa canvas > Stile.

  2. Nella barra laterale, sotto Oggetti modulo, seleziona il campo e tocca il pulsante di modifica pulsante di modifica.

  3. Selezionare lo stato del campo da personalizzare e specificare lo stile dello stato.

    Specifica dello stile in linea di un campo

Personalizzare il layout di tutti i campi di un modulo

Con AEM Forms è ora possibile creare un tema e applicarlo al modulo. L’editor dei temi consente di specificare lo stile dei componenti modulo in un’unica posizione. Quando crei un tema, specifichi lo stile a livello di componente. Per ulteriori informazioni sui temi, vedi Temi in AEM Forms.

Creare un tema utilizzando l’Editor tema per personalizzare il layout di tutti i campi del modulo. Dopo aver creato un tema, eseguire i seguenti passaggi per applicarlo a un modulo:

  1. Apri il modulo in modalità di modifica.
  2. In modalità di modifica, seleziona un componente, quindi tocca a livello di campo > Contenitore di moduli adattivi, quindi tocca cmppr.
  3. Nella barra laterale, in Tema modulo adattivo, selezionare il tema creato utilizzando l’Editor tema.

Creare un layout di campo personalizzato

  1. Apri CRXDE lite. L’URL predefinito è https://'[server]:[porta]"/crx/de.

  2. Copia un layout di campo dal nodo /libs/fd/af/layouts/field (Ad esempio, defaultFieldLayout) al nodo /apps (ad esempio, /apps/af-field-layout).

  3. Rinominare il nodo copiato e il file defaultFieldLayout.jsp. Ad esempio, errorOnRight.jsp.

  4. Modifica il valore delle proprietà qtip e jcr:description del nodo copiato. Ad esempio, modifica il valore delle proprietà in Errore a destra

  5. Per aggiungere nuovi stili e comportamenti, crea una libreria client nel nodo /etc.

    Ad esempio, nel percorso /etc/af-field-layout-clientlib, crea il nodo client-library. Aggiungi la proprietà categories con il file af.field.errorOnRight e style.less con il seguente codice:

    .widgetErrorWrapper {

 height: 38px;
 margin: 5px;

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

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

}

  6. Per migliorare l'aspetto e il comportamento, includi la libreria client creata nel file di layout (errorOnRight.jsp).

  7. Apri la finestra di dialogo di modifica del campo e seleziona la Stile scheda . In Configura layout campo casella a discesa, seleziona il layout appena creato e fai clic su OK.

Il pacchetto ErrorOnRight.zip contiene codice per mostrare messaggi di errore sul lato destro dei campi.

Ottieni file

In questa pagina