Show Menu
ARGOMENTI×

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 toccate > Stile .
  2. Nella barra laterale, in Oggetti ​modulo, selezionare il campo e toccare il pulsante Modifica 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 puoi 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, consultate 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, selezionare un componente, quindi toccare il livello campo > Contenitore modulo adattivo, quindi toccare .
  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://' #: #'/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 Stile . Nel menu a discesa Configura layout campo, selezionate il layout appena creato e fate clic su OK .
Il pacchetto ErrorOnRight.zip contiene codice che mostra i messaggi di errore sul lato destro dei campi.