クライアントAPIを使用した確認ダイアログの表示方法
こんにちは。
前回(クライアントAPIを使用したアラートの表示方法 - Tech Dynamics 365 (CRM))はクライアントAPIを使用してアラートを表示する方法をご紹介しましたが、今回はその応用編として確認ダイアログの表示方法をご紹介します。
確認ダイアログは、アラートと違って押したボタンによってその後の処理を分岐させることができます。
例えば、以下は保存時に取引先企業名フィールドに入力された企業名が正しいかどうかの確認ダイアログを表示して、[確認] ボタンがクリックされたら保存、[修正] ボタンがクリックされたら取引先企業名フィールドにフォーカスをあてるコードです。
var saveFlg = false; function ShowConfirmDialog(executionContext) { if (saveFlg == false) { // 実行コンテキストの取得 var formContext = executionContext.getFormContext(); var companyName = formContext.getAttribute("name").getValue(); var message = "企業名は " + companyName + " で間違いありませんか?"; var confirmStrings = { text: message, title: "企業名の最終確認", confirmButtonLabel: "確認", cancelButtonLabel: "修正" }; var confirmOptions = { height: 200, width: 450 }; // 保存処理を一時停止 executionContext.getEventArgs().preventDefault(); Xrm.Navigation.openConfirmDialog(confirmStrings, confirmOptions).then( function (success) { if (success.confirmed) { saveFlg = true; // レコードを保存 formContext.data.save(); } else { // 取引先企業名フィールドにフォーカス formContext.getControl("name").setFocus(); } } ); } else { return; } }
オブジェクト変数の属性説明
confirmStrings の属性
text:確認ダイアログに表示するメッセージを指定 (今回は変数で渡してみました)title:確認ダイアログのタイトルを指定
confirmButtonLabel:確認ボタンのラベルを指定 (指定がなければ [OK] となる)
cancelButtonLabel:キャンセルボタンのラベルを指定 (指定がなければ [キャンセル] となる)
confirmOptions の属性
height:ダイアログの高さを指定width:ダイアログの横幅を指定
上記のJavaScriptをOnSaveイベントに登録しておくと、保存時に確認ダイアログが表示されます。
[確認] ボタンを押すとそのまま保存されますが、[修正] ボタンを押すと下図のように取引先企業名フィールドにフォーカスが入ります。この部分の処理を追加してあげることで、ユーザビリティを高めることができます。
今回使用した「openConfirmDialog」の使用方法やパラメーターの詳細は以下から確認することができます。
docs.microsoft.com