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. […] 画面に確認ダイアログ(コンファーム)を表示する […]

comment

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

関連記事

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローの一括承認画面を作成する

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローの一括承認画面を作成する方法を紹介します。 完成イメージ ① 承認を実施するフローとノードを設定 …

no image

IM-BloomMaker 変数の代入値が変更された時にアクションを実行するサンプル

この CookBook では、変数の代入値が変更された時にアクションを実行するサンプルを紹介しています。 何らかの非同期処理(例:ポップアップ画面から値を受け取る)で変数の代入値が更新された時に、アク …

IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

はじめに IM-BloomMaker と IM-LogicDesigner で「リモートワークの報告メールを送信するアプリ」を作成したので、公開します。 新型コロナウィルスによる緊急事態宣言を受けて、 …

処理モーダルで差戻先ノードを固定する

このCookBookでは、ボタンアイテム(処理モーダル)において、差戻先ノードを固定する方法を紹介します。 完成イメージ ノード「approve2」の差戻先ノードをノード「apply」に固定する。 処 …