向窗体中添加自定义 JavaScript

  • 项目

备注

从 2022 年 10 月 12 日起，Power Apps 门户更名为 Power Pages。 详细信息请参阅：Microsoft Power Pages 现已正式发布（博客）
不久后我们将迁移 Power Apps 门户文档并将其与 Power Pages 文档合并在一起。

基本窗体和多步窗体步骤记录包含名为自定义 JavaScript 的字段，该字段可用于存储 JavaScript 代码，以允许您扩展或修改窗体的视觉显示或功能。

自定义 JavaScript 块将在关闭窗体标记元素前添加到页面底部。

窗体字段

表字段的 HTML 输入 ID 设置为属性的逻辑名称。 使用 jQuery 轻松选择字段、设置值或其他客户端操作。

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

重要

将选择项列添加到要在多步窗体步骤或基本窗体中使用的模型驱动窗体将作为下拉服务器控件出现在门户页面上。 使用自定义 JavaScript 向控件添加其他值会导致页面提交中出现“无效的回发或回拨参数”消息。

其他客户端字段验证

有时您可能需要自定义窗体上的字段验证。 此示例仅在“联系人的首选方法”的另一个字段设置为电子邮件时强制用户指定电子邮件。

备注

客户端字段验证在子网格中不受支持。

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));
}

常规验证

单击下一步/提交按钮之后，将执行名为 entityFormClientValidate 的函数。 您可扩展此方法来添加自定义验证逻辑。

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));
}

另请参见