カスタム 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));
}

参照