Aggiungere JavaScript a un modulo

  • Articolo

Nota

A partire dal 12 ottobre 2022, i portali Power Apps sono denominati Power Pages. Altre informazioni: Microsoft Power Pages è ora generalmente disponibile (blog)
A breve verrà eseguita la migrazione e l'unione della documentazione dei portali Power Apps con la documentazione di Power Pages.

I record di passaggio modulo di base e modulo con più passaggi contiene un campo denominato JavaScript personalizzato che può essere utilizzato per archiviare codice JavaScript e consentire l'estensione o la modifica della visualizzazione o della funzione visiva del modulo.

Il blocco personalizzato di JavaScript verrà aggiunto in fondo alla pagina prima dell'elemento del tag del modulo di chiusura.

Campi del modulo

L'id di input HTML di un campo di tabella è impostato sul nome logico dell'attributo. La selezione di un campo, l'impostazione di valori o altre manipolazioni lato client con jQuery.

$(document).ready(function() {
   $("#address1_stateorprovince").val("Saskatchewan");
});

Importante

L'aggiunta di una colonna di scelta al modulo basato su modello da utilizzare in un passaggio di un modulo con più passaggi o in un modulo di base verrà visualizzata nella pagina del portale come controllo del server a discesa. L'utilizzo di JavaScript personalizzato per aggiungere valori al controllo risulterà in un messaggio "Postback o argomento di richiamata non valido" all'invio della pagina.

Convalida dei campi lato client aggiuntiva

A volte potrebbe essere necessaria la convalida dei campi nel modulo. Questo esempio forza l'utente a specificare un'e-mail solo se l'altro campo per il metodo preferito del contatto viene impostato su "E-mail".

Nota

La convalida del campo sul lato client non è supportata in un griglia secondaria.

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         // Create new validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "emailaddress1Validator";
         newValidator.controltovalidate = "emailaddress1";
         newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript:scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email is a required field.</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var contactMethod = $("#preferredcontactmethodcode").val();
            if (contactMethod != 2) return true; // check if contact method is not 'Email'.
            // only require email address if preferred contact method is email.
            var value = $("#emailaddress1").val();
            if (value == null || value == "") {
            return false;
            } else {
               return true;
            }
         };

         // Add the new validator to the page validators array:
         Page_Validators.push(newValidator);

      });
   }(window.jQuery));
}

Convalida generale

Facendo clic sul pulsante Avanti/Invia viene eseguita una funzione denominata entityFormClientValidate. Puoi estendere questo metodo per aggiungere una logica di convalida personalizzata.

if (window.jQuery) {
   (function ($) {
      if (typeof (entityFormClientValidate) != 'undefined') {
         var originalValidationFunction = entityFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            entityFormClientValidate = function() {
               originalValidationFunction.apply(this, arguments);
               // do your custom validation here
               // return false; // to prevent the form submit you need to return false
               // end custom validation.
               return true;
            };
         }
      }
   }(window.jQuery));
}

Vedi anche