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. Potete eseguire le seguenti personalizzazioni:

  • Personalizzare la posizione e il layout della didascalia di un campo senza apportare alcuna modifica alle proprietà CSS corrispondenti
  • Personalizzazione della posizione dei messaggi di errore in linea
  • Personalizzazione del contenuto dell’indicatore della guida dinamica
  • Personalizzare la posizione dei componenti del campo (didascalie, widget, descrizione breve, descrizione lunga e componenti degli indicatori 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 di didascalie e messaggi di errore. Per applicare un layout personalizzato a un campo, effettuare le operazioni seguenti:

Personalizzare il layout di un singolo campo

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

  1. Aprire il modulo in modalità Stile. Per aprire il modulo in modalità stile, nella barra degli strumenti della pagina toccare a discesa quadro > Stile.

  2. Nella barra laterale, in Oggetti modulo, selezionare il campo e toccare il pulsante di modifica edit-button.

  3. Selezionate lo stato del campo da personalizzare e specificate lo stile per tale 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 di temi consente di specificare lo stile dei componenti modulo in un’unica posizione. Quando create un tema, specificate lo stile a livello di componente. Per ulteriori informazioni sui temi, vedere 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, effettuare le seguenti operazioni per applicarlo a un modulo:

  1. Aprire il modulo in modalità di modifica.
  2. In modalità di modifica, selezionate un componente, quindi toccate livello campo > Contenitore modulo adattivo, quindi toccate cmppr.
  3. Nella barra laterale, in Tema modulo adattivo, selezionare il tema creato utilizzando l'Editor tema.

Creare un layout di campo personalizzato

  1. Aprire CRXDE lite. L'URL predefinito è https://[Server]:[Port]/crx/de.

  2. Copiate 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. Modificate il valore delle proprietà qtip e jcr:description del nodo copiato. Ad esempio, modificare il valore delle proprietà in Errore a destra

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

    Ad esempio, nel percorso /etc/af-field-layout-clientlib, creare il nodo client-library. Aggiungete la proprietà category 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, includete la libreria client creata nel file di layout (errorOnRight.jsp).

  7. Aprire la finestra di dialogo di modifica del campo e selezionare la scheda Attribuzione stile. Nella casella a discesa Configura layout campo, selezionare il layout appena creato e fare clic su OK.

Il pacchetto ErrorOnRight.zip contiene codice che mostra i messaggi di errore sul lato destro dei campi.

Ottieni file

In questa pagina