※本記事は、2017年11月7日にAras Corporation CHRISTOPHER GILLISによって投稿された記事を和訳したものです。
1つのフォーム上のフィールドでは、ユーザーが使用できる完全な機能を提供するには不十分な場合があります。このような場合は、ユーザーにいくつかの追加情報を入力するように促すダイアログを表示するとよいかもしれません。
Aras Innovator 11.0は、ダイアログを開くための複数の異なる方法をサポートしています。Aras Innovator 11.0のすべてのバージョンでこれらの方法のすべてがサポートされているわけではありません。これら各方法のサポートされているバージョンには、必要に応じて記載されています。
ダイアログでフォームを開く
ダイアログの一般的な用途の1つは、カスタムフォームを開くことです。この例では、以下のような単純なフォームをさまざまな方法で開きます。
モーダルダイアログ
モーダルダイアログは、閉じられるまで周囲のjavascriptの実行を停止する点で特別です。Aras Innovatorの以前のバージョンでは、これらの種類のダイアログが頻繁に使用されていました。しかし、Google ChromeやMicrosoft Edgeなどの最新のブラウザでは、モーダルダイアログをサポートしていません。Modalダイアログは、Aras Innovator 11.0 SP7以前のInternet ExplorerとFirefoxで動作します。
モーダルダイアログから値を返す
ダイアログを開く前に、フォームのボタンの機能を指定する必要があります。具体的には、ユーザーが[OK]ボタンをクリックしたときにテキストボックスに入力する名前を返す方法が必要です。このフォームの[OK]ボタンのonClickフィールドイベントは以下のとおりです。
https://gist.github.com/cgillis-aras/68bc1be2dd17e9281e40fc304bbcb3ee#file-defaultmodal_return-js
Cancelボタンは戻り値を設定せず、単に window.close(); を呼び出します。
モーダルダイアログを開く
名前を返す方法があり、以下のサンプルコードを使い、モーダルダイアログを使用してこのフォームを開くことができます。https://gist.github.com/cgillis-aras/fa0704b43c15d5e479be5f2f30c0faf6#file-defaultmodal-js
モーダルダイアログの停止機能を示すために、フォームに入力された名前を使用するダイアログが開いた後に警告が表示されるようにしました。
ポップアップダイアログ
ポップアップダイアログは周囲のJavaScriptの実行を停止しないため、最新のブラウザではより一般的になってています。このブログがリリースされた時点（USの投稿日時）で、ポップアップダイアログはAras Innovator 11.0のすべてのバージョンで、Google Chromeを含むサポートされているブラウザを使用して動作します。
ポップアップから値を返す
ポップアップの戻り値を指定する方法は、モーダルダイアログとは異なります。これは下のサンプルで見ることができます。https://gist.github.com/cgillis-aras/1bd73a9be05c6328552da1bcd2958c4d#file-defaultpopup_return-js
同様に、Cancelボタンは戻り値なしで、単にparent.args.dialog.close();でウィンドウを閉じます。
ポップアップを開く
'DefaultPopup'オプションでmodalDialogHelperに渡すことで、'DefaultModal'の代わりにポップアップダイアログを開くことができます。https://gist.github.com/cgillis-aras/4ba88493409e5aca8edd37073f8d2399#file-defaultpopup-js
この例では、追加の "コールバック"引数を渡しています。このコールバック関数は、ダイアログが閉じられた後にのみ実行され、ポップアップを停止させないために必要です。
この非停止動作をさらに実証するために、呼び出し後にダイアログを開くときにアラートが表示されるようにしました。このアラートは、ダイアログが閉じられる前に呼び出されます。
このサンプルはAras Innovator 11.0の現在リリースされているすべてのバージョンで正しく機能するはずですが、modalDialogHelperAPIは段階的に廃止されています。Aras Innvoatorの新しいバージョンをご利用の場合は、最新のダイアログAPIを使用することをお勧めします。
ArasModules.Dialog
この新しいAPIは、ダイアログを開く方法と値を返す方法の両方を最適化します。ArasModules.Dialog APIは、すべてのサポートされているブラウザを使用してAras Innovoator 11.0 SP7以上で動作します。
ダイアログから値を返す
この新しいAPIで開かれたダイアログから値を返すこのサンプルでわかるように、ダイアログを閉じるプロセスは1つの関数にまとめられています。Cancelボタンは引数なしでparent.dialogArguments.dialog.close();を呼び出すので、何も返されません。
ダイアログを開く
以下のサンプルは、ArasModules.DialogAPI を使用してダイアログを開きます。引数はほぼ同じですが、使いやすさの点で最適化されていることがわかります。https://gist.github.com/cgillis-aras/8b5e8a2e0af06ec47eb462fe19c97045#file-arasmodulesdialog-js
この新しいAPIに関して注意すべき重要な点の1つは、コールバック関数が関数引数として渡されなくなったことです。代わりに、JavaScriptに組み込まれているPromise機能が使用されます。これは、Dialogが閉じられた後に関数を呼び出すのと同じ目的を果たします。
これらのすべてのサンプルで、'ShowFormAsADialog.html'ページが使用されていることにお気づきでしょう。これはAras Innovatorのデフォルトインストールに含まれているWebページで、渡されたIDに対応するフォームを表示するダイアログを表示します。
ただし、 'ShowFormAsADialog.html'を他のHTMLページに置き換えて表示することもできます。
ダイアログでHTMLページを開く
この例では、フォームに似た簡単なHTMLページを作成しました。
https://gist.github.com/cgillis-aras/78401065c73e2c42ae72bfe9d4e01150#file-test_page-html
私はこれを "test_page.html"という名称にし、Aras Innovator 11.0の標準インストールとは別に、コードツリーの/Client/customer/フォルダに配置しました。
あとはサンプルのコンテンツ引数をこの新しいHTMLページに置き換えるだけです 。
https://gist.github.com/cgillis-aras/f6b0b02b45c95cf6d0a5cb4a81edc0f1#file-testpagedialog-js
この例では、結果のダイアログのヘッダーを設定するために使用している「ヘッダー」パラメーターも追加しました。dialogArgumentsオブジェクトを使用して、任意の数のカスタムパラメータを追加してカスタムHTMLページから取得できます。
結論
ダイアログからフォームを開くためのダウンロード可能な例については、カスタムモーダルダイアログコミュニティプロジェクトを参照してください。このブログの記事の例についてご意見やご質問がある場合は、@ArasLabsで私たちをツイート、またはaraslabs @ aras.comにメールを送ってください。