Show Menu
ARGOMENTI×

Personalizzazione dei messaggi di errore per i moduli HTML5

Nei moduli HTML5, i messaggi di errore e gli avvisi hanno un aspetto e una posizione fissi (font e colore), l'errore viene visualizzato solo per un campo selezionato e viene visualizzato un solo errore.
L’articolo fornisce i passaggi necessari per personalizzare i messaggi di errore dei moduli HTML5,
  • modificare l'aspetto e la posizione dei messaggi di errore. È possibile visualizzare un errore in alto, in basso e a destra di qualsiasi campo.
  • visualizzare messaggi di errore per più campi in un dato momento.
  • visualizza l'errore indipendentemente dal fatto che sia selezionato o meno un campo.

Personalizzazione dei messaggi di errore

Prima di personalizzare i messaggi di errore, scaricate ed estraete il pacchetto allegato (CustomErrorManager-1.0-SNAPSHOT.zip).
Dopo aver estratto il pacchetto, aprite la cartella CustomErrorManager-1.0-SNAPSHOT. Contiene le cartelle jcr_root e META-INF. Queste cartelle contengono i file CSS e JS richiesti per personalizzare il messaggio di errore.

Personalizzazione della posizione dei messaggi di errore

Per personalizzare la posizione del messaggio di errore, aggiungere il tag <div> per ciascun campo di errore e di avviso, posizionare il tag <div> a sinistra o a destra e applicare gli stili css al tag <div>. Per i passaggi dettagliati, consulta la procedura seguente:
  1. Individuate la CustomErrorManager-1.0-SNAPSHOT``etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript cartella e apritela.
  2. Open the customErrorManager.js file for editing. La markError funzione nel file accetta i seguenti parametri:
    jqWidget
    jqWidget è la maniglia del widget.
    msg
    contiene il messaggio di errore
    tipo
    indica se si tratta di un errore o di un avviso
  3. All'esterno dell'implementazione, a destra del campo viene visualizzato un messaggio di errore. Per visualizzare i messaggi di errore nella parte superiore, utilizzate il seguente codice.
    markError: function (jqWidget, msg, type) {
                var element = jqWidget.element,                                //Gives the div containing widget
                    pos = $(element).offset(),                          //Calculates the position of the div in the view port
                                                                    msgHeight = xfalib.view.util.TextMetrics.measureExtent(msg).height + 5;  //Calculating the height of the Error Message
                    styles = {};
                    styles.left = pos.left + "px";         // Assign the desired left position using pos.left. Here it is calculated for exact left of the field 
                    styles.top = pos.top - msgHeight + "px";  // Assign the desired top position using pos.top. Here it is calculated for top of the field 
                if (type != "warning") {
                    if(!jqWidget.errorDiv){
                                                                                    //Adding the warning div if it is not present already
                        jqWidget.errorDiv=$("<div id='customError'></div>").appendTo('body');
                    }
                    jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the warning div
                    jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
                } else {
                    if(!jqWidget.errorDiv){
                                                                                    //Adding the error div if it is not present already
                        jqWidget.errorDiv=$("<div id='customWarning'></div>").appendTo('body');
                    }
                    jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the error div
                    jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
                }
    
            },
    
    
  4. Salvate e chiudete il file.
  5. Andate alla CustomErrorManager-1.0-SNAPSHOT cartella e create un archivio delle cartelle jcr_root e META-INF. Rinominare l'archivio in CustomErrorManager-1.0-SNAPSHOT.zip.
  6. Utilizzate il gestore pacchetti per caricare e installare il pacchetto.

Visualizza messaggi di errore per più campi

Usate il pacchetto allegato per visualizzare simultaneamente messaggi di errore per tutti i campi. Per visualizzare un singolo messaggio di errore, utilizzare il profilo predefinito.

Personalizzazione dell'aspetto dei messaggi di errore. 

  1. Andate alla directory etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css folder.
  2. Aprite il file sample.css per la modifica. Il file css contiene 2 ID - #customError, #customWarning. Potete utilizzare questi ID per modificare diverse proprietà quali il colore, la dimensione del font e così via.
    Utilizzare il codice seguente per modificare la dimensione del font e il colore dei messaggi di errore/avviso.
    #customError {
    color: #0000FF; // it changes the color of Error Message
    display:none;
    position:absolute;
    opacity:0.85;
    font-size: 24px;  // it changes the font size of Error Message
    z-index:5;
    }
    
    #customWarning {
    color: #00FF00;  // it changes the color of Warning Message
    display:none;
    position:absolute;
    opacity:0.85;
    font-size: 18px;   // it changes the font size of Warning Message
    z-index:5;
    }
    
    Save the changes.
    
    
  3. Salvate e chiudete il file.
  4. Andate alla cartella CustomErrorManager-1.0-SNAPSHOT e create un archivio delle cartelle jcr_root e META-INF. Rinominare l'archivio in CustomErrorManager-1.0-SNAPSHOT.zip.
  5. Utilizzate il gestore pacchetti per caricare e installare il pacchetto.

Eseguire il rendering del modulo con il nuovo profilo. 

I moduli HTML5 utilizzano un profilo predefinito: https://<server>/content/xfaforms/profiles/default.html?contentRoot=<percorso xdp>&template=<nome dell'xdp>
Per visualizzare un modulo con messaggi di errore personalizzati, eseguire il rendering del modulo con il profilo di errore: https://<server>/content/xfaforms/profiles/error.html?contentRoot=<percorso xdp>&template=<nome dell'xdp>
Il pacchetto allegato installa il profilo di errore.