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

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …

no image

ワークスペースとスケジュール機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のスケジュー …

no image

Docker Compose で Accel Platform 環境を構築する。

この CookBook では、Docker Compose を利用して Accel Platform 環境を構築する手順について紹介しています。 この CookBook では、以下の記事で作成した D …

no image

テナント環境セットアップ時にテーブルが作成されるよう設定する

e Builderを利用して作成したアプリケーションにおいて、テナント環境セットアップ時に自動でテーブルが作成されるように設定する手順を紹介します。 今回は例として、CookBook:フォームに入力し …

no image

ViewCreatorとIM-FormaDesignerを利用して、既存テーブルのデータを表示する。

このCookBookでは、ViewCreatorとForma画面を利用して、既存テーブルのデータを表示する方法を説明します。 ViewCreatorでテーブルデータの一覧を表示し、IM-FormaDe …

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

RSSRSSRSSRSS