Power Apps ポータル JavaScriptを使用した入力値チェック(バリデーション/Validation)

Power AppsのポータルではJavaScriptを使用してバリデーションをかけることができる。

そのバリデーションのかけ方が少し複雑だったので、その方法をメモ。

スポンサーリンク

ポータルのバリデーション

Power Appsポータルのバリデーション処理(JavaScript)は

  • エンティティフォーム(基本フォーム)全体
  • Webフォーム(詳細フォーム)全体
  • 列単位(エンティティフォーム、Webフォーム共通)

に対して設定することができる。

さらに、エンティティフォームとWebフォームはそれぞれJavaScriptを書ける場所が複数あって、

エンティティフォームは、

  • エンティティフォームを載せるWebページ
  • エンティティフォーム自体
Webフォームは

  • Webフォームを載せるWebページ
  • Webフォームの各ステップ

に書くことができる。

この時点で少しややこしいけど、さらにエンティティフォームとWebフォームでは、使用するJavaScriptの機能が異なっていてさらにややこしい。。。

※Webフォーム(詳細フォーム)についてはこちら
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/web-form-steps

エンティティフォーム(基本フォーム)のバリデーション

まずはエンティティフォーム全体のバリデーションについて。

エンティティフォームのバリデーションには「entityFormClientValidate」を使用する。

コードはこんな感じ。

 if (window.jQuery) {  
   (function ($) {  
     if (typeof (entityFormClientValidate) != 'undefined') {  
       var originalValidationFunction = entityFormClientValidate;  
       if (originalValidationFunction && typeof (originalValidationFunction) == "function") {  
         entityFormClientValidate = function ()   
          {  
             // ここでバリデーション処理
             if(...){
                 return true;
             }else{
                 return false;
             } 
         };  
       }  
     }  
   }(window.jQuery));  
 }  

これを「エンティティフォームを載せるWebページ」または「エンティティフォーム自体」に設定する。

Webページに設定する場合

Webページに設定する場合は、「ポータル管理」からエンティティフォームを載せるWebページの設定を開いて、「ローカライズされたコンテンツ」に移動、
「詳細設定タブ」の「カスタムJavaScript」に設定する。

※Webページに設定する場合、
「Information -> 詳細設定」じゃだめで、「Content Page -> 詳細設定」に設定する必要がある。

たぶん日本語でポータルを作っているから、ローカライズされたページの方に設定しなきゃいけないんだと思われ。

エンティティフォームに設定する場合

続いてエンティティフォーム自体に設定する場合。

「ポータル管理」から対象のエンティティフォームの設定に移動して、「追加設定」タブの下の方にある「カスタムJavaScript」にバリデーション処理を記入する。

Webフォーム(詳細フォーム)のバリデーション

Webフォーム全体のバリデーションには「webFormClientValidate」を使用する。

コードはこんな感じ。

if (window.jQuery) {
   (function ($) {
        webFormClientValidate = function() {
             // ここでバリデーション処理
             if(...){
                 return true;
             }else{
                 return false;
             } 
        };
   }(window.jQuery));
}

これを「Webフォームを載せるWebページ」または「Webフォームの各ステップ」に設定する。

※公式はこちら
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/add-custom-javascript#general-validation

Webページに設定する場合

Webページに設定する場合はエンティティフォームと同じ場所にJavaScriptを書く。

「Webページ」タブでWebフォームを載せるWebページの設定を開いて、「Content Page -> 詳細設定 -> カスタムJavaScript」に処理を書く。

ステップごとに設定する場合

続いてWebフォームの各ステップごとに設定する場合。

Webフォームの「Webフォームステップ」タブから、バリデーションを設定したいステップを選んで、
フォームステップの「フォームのオプション」タブの下の方にある「カスタムJavaScript」で設定。

こっちで設定すると、そのステップだけでバリデーションが適用される。

列ごとのバリデーション

最後はフォームの列ごとにバリデーションを追加したい場合。

例えばこの要素にバリデーションを追加したいとき、そのinput要素のidを控えておいて、
こんな感じで設定。※今回はWebページに設定
するとこんな感じでエラーメッセージが出る。 ※エラーメッセージは公式サンプルのまま。

※内部のalertはデバッグのために入れただけなので不要。

※公式はこちら
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/add-custom-javascript#additional-client-side-field-validation

エラーメッセージが必要

今回紹介した方法だと、「列ごとのバリデーション」のサンプル以外はエラーメッセージが表示されない。

どの項目がエラーか?をユーザーに示すためには、別途エラーメッセージの実装が必要。

おまけ:Webフォームのバリデーションの公式の情報について

公式にあるWebフォームのバリデーション処理がこれなんだけど、

if (window.jQuery) {
   (function ($) {
      if (typeof (webFormClientValidate) != 'undefined') {
         var originalValidationFunction = webFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            webFormClientValidate = 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));
}

どうもこれが動かない。。。

こちらのページによるとどうもバグらしくて、「webFormClientValidate」は自分で定義してあげる必要があるとのこと。
webform javascript validation
Hi! I'm trying to validate a field in my webform step where it checks if the email ends with the domain of their website...

関連記事

コメント

タイトルとURLをコピーしました