Power AppsのポータルではJavaScriptを使用してバリデーションをかけることができる。
そのバリデーションのかけ方が少し複雑だったので、その方法をメモ。
ポータルのバリデーション
Power Appsポータルのバリデーション処理(JavaScript)は
- エンティティフォーム(基本フォーム)全体
- Webフォーム(詳細フォーム)全体
- 列単位(エンティティフォーム、Webフォーム共通)
に対して設定することができる。
さらに、エンティティフォームとWebフォームはそれぞれJavaScriptを書ける場所が複数あって、
- エンティティフォームを載せる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ページに設定する場合、
「Information -> 詳細設定」じゃだめで、「Content Page -> 詳細設定」に設定する必要がある。
たぶん日本語でポータルを作っているから、ローカライズされたページの方に設定しなきゃいけないんだと思われ。
エンティティフォームに設定する場合
続いてエンティティフォーム自体に設定する場合。
Webフォーム(詳細フォーム)のバリデーション
Webフォーム全体のバリデーションには「webFormClientValidate」を使用する。
コードはこんな感じ。
if (window.jQuery) { (function ($) { webFormClientValidate = function() { // ここでバリデーション処理 if(...){ return true; }else{ return false; } }; }(window.jQuery)); }
これを「Webフォームを載せるWebページ」または「Webフォームの各ステップ」に設定する。
Webページに設定する場合
Webページに設定する場合はエンティティフォームと同じ場所にJavaScriptを書く。
ステップごとに設定する場合
続いてWebフォームの各ステップごとに設定する場合。
こっちで設定すると、そのステップだけでバリデーションが適用される。
列ごとのバリデーション
最後はフォームの列ごとにバリデーションを追加したい場合。
※内部のalertはデバッグのために入れただけなので不要。
エラーメッセージが必要
今回紹介した方法だと、「列ごとのバリデーション」のサンプル以外はエラーメッセージが表示されない。
どの項目がエラーか?をユーザーに示すためには、別途エラーメッセージの実装が必要。
おまけ: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)); }
どうもこれが動かない。。。
コメント