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

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

3. Selezionate lo stato del campo da personalizzare e specificate lo stile per tale stato.

   

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 > Contenitore modulo adattivo, quindi toccate .
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]:[porta]'/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