CookBook

画面に確認ダイアログ(コンファーム)を表示する

投稿日:2015-12-15 更新日:

画面に確認ダイアログ(imuiConfirm)を表示する方法をご紹介します。
確認ダイアログとは以下の画像のように、ユーザが選択した操作を本当に実行するかどうか確認するための機能です。
109006_imuiConfirm
確認ダイアログを利用することによって、ユーザが誤った操作を行ったとしても操作をキャンセルすることができます。

確認ダイアログの詳細についてはAPIドキュメントのimuiConfirm、および、UIデザインガイドラインを併せてご参照ください。

今回は例として、こちらのCookBookで作成した登録フォーム画面を利用します。

完成イメージ

<操作方法>

1. 商品名に任意の文字を入力します。
2. 金額に任意の数値を入力します。
3. 登録ボタンをクリックします。
4. 確認ダイアログを表示することが確認できます。

完成サンプル

以下が完成サンプルです。ダウンロードしてご活用ください。
e builder プロジェクト : im_cookbook_109004.zip
imm ファイル : im_cookbook_109004-1.0.0.imm

お手元の環境で表示させる場合は以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/109004/edit
なお、ベースURLである以下の部分は環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. 確認ダイアログの表示方法
  2. 登録ボタンに確認ダイアログを表示する
  3. その他のダイアログについて

1. 確認ダイアログの表示方法

以下の処理を実行することで、確認ダイアログを表示することができます。

  • 第一引数には、確認ダイアログ内に表示するメッセージを設定してください。必須入力です。
  • 第二引数には、確認ダイアログのタイトルに表示するメッセージを設定してください。オプション入力です。省略した場合はデフォルトの「確認」が表示されます。
  • 第三引数には、「決定」ボタンをクリックした場合の処理を設定してください。オプション入力です。省略した場合は何も行いません。
  • 第四引数には、「取り消し」ボタンをクリックした場合の処理を設定してください。オプション入力です。省略した場合は何も行いません。
  • 第五引数には、メッセージをエスケープするかどうかのフラグを設定してください。オプション入力です。省略した場合はデフォルトの「true」が設定されます。

第三引数と第四引数を省略した場合は何も行われませんので、「決定」ボタンや「取り消し」ボタンクリック時に任意の処理を実行したい場合は、用途に合わせて関数を設定してください。
今回のサンプルでは「決定」ボタンクリック時にAjax通信を行うように処理を設定しています。

2. 登録ボタンに確認ダイアログを表示する

今回のサンプルでは、以下の処理を実行しています。

imuiConfirm()については、ご紹介した内容の通りです。
この機能を、登録ボタンをクリックした際のイベントに登録することで実現しています。
※登録ボタンをクリックした際のイベントについては、上記の例通りではなくても問題ありません。あくまで一例です。

3. その他のダイアログについて

今回は確認ダイアログをご紹介しましたが、その他にも、警告ダイアログやmessageDialogがあります。

お客様の用途に合わせてダイアログをご活用してみてはいかがでしょうか。

-CookBook
-,

執筆者:


  1. […] 画面に確認ダイアログ(コンファーム)を表示する 293 views […]

  2. […] 画面に確認ダイアログ(コンファーム)を表示する […]

スクリプト開発で登録フォームを作成する | intra-mart Developer Site にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

IM-BISで複数のセレクトボックスを連動させて利用する方法

このCookBookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-BIS導入環境で利用することができます。IM-FormaDes …

no image

AWS 上に Accel Platform を構築する方法

  この CookBook では、AWS の仮想マシン機能(Amazon EC2)を用いて、スタンドアローンで intra-mart Accel Platform を構築する方法について紹介 …

IM-Wiki

Wiki機能の活用例

このCookbookでは、intra-mart Accel Platform 2018 Springから利用可能なWiki機能(IM-Wiki)の活用例について紹介します。 今回の記事では実際にWik …

no image

imuiListTableで行の背景色を動的に変更する方法

このCookBookでは、imuiListTableで行の背景色を動的に変更する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してください。 [imu …

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …

まだデータがありません。

RSSRSSRSSRSS