CookBook

画面にインジケータ(ロード中のアイコン)を表示する

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

任意の処理を行った際にインジケータを表示する方法をご紹介します。
インジケータは、アイコンを用いて任意の処理中であること(ロード中であること)を画面に表示します。
インジケータを利用することで、任意の処理中に画面を操作されないように制御できます。

インジケータの詳細についてはAPIドキュメントのimuiIndicatorをご参照ください。

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

完成イメージ

<操作方法>

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

完成サンプル

以下が完成サンプルです。ダウンロードしてご活用ください。
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. サンプルの登録フォームでの使用例
  4. まとめ

1. 画面の任意の要素にインジケータを表示する。

以下の処理を実行することで、インジケータを表示することができます。

上記はjQueryのId属性を指定して、登録ボタンに対してインジケータを表示しています。
要素の指定方法は任意の方法で問題ありませんが、jQueryオブジェクトである必要があります。

imuiIndicator()では引数に様々なオプションを設定することができます。
上記の例では、オプションに値を設定していません。
オプションが未指定の場合、デフォルトの設定が適応されます。
上記の例を実行すると「読み込み中...」という文字が表示されます。
これは、オプションのtext属性が未指定だったため、デフォルトの設定が適応された結果表示されました。
インジケータ表示中に文字を表示しない場合は以下のようにtext属性を設定することで実現できます。

今回は一例としてtext属性をご紹介しました。
その他のオプションについての詳細はAPIドキュメントのimuiIndicatorをご参照ください。

2. インジケータを非表示にする。

表示中のインジケータは、以下の処理を実行することで非表示にすることができます。

インジケータは明示的に非表示にしない限り表示され続けます。
任意の処理が終わったタイミングで、インジケータを非表示にすることを意識してください。

3. サンプルの登録フォームでの使用例

今回使用しているサンプルの登録フォームでは以下の流れでインジケータを表示しています。

  1. 登録確認ダイアログの決定ボタンクリック時に、画面全体に対してインジケータを表示する。
  2. Ajax処理が終了したコールバック関数で、インジケータを非表示にする。

実際のコードは以下です。
※サンプルのコードでは、インジケータを可視化するために、setTimeout()を利用して処理を1秒遅延させています。本来不要な処理ですので、ご注意ください。

4. まとめ

インジケータのメリットとしては、以下が挙げられます。

  • 任意の処理中に画面を操作されないようにできること。
  • ユーザが、処理中であることをグラフィカルに理解できること。

この記事を参考にimuiIndicator()をご活用してみてはいかがでしょうか。

-CookBook
-,

執筆者:


  1. […] 画面にインジケータ(ロード中のアイコン)を表示する […]

comment

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

関連記事

no image

IM-LogicDesigner「繰り返し」「分岐」EL式の定義例

このCookBookでは、IM-LogicDesignerの「条件分岐」「繰り返し」制御要素の条件で利用するEL式について定義例を紹介しています。 ここでは主に「 IM-LogicDesigner上で …

no image

IM-FormaDesignerで作成したフォーム内でIME入力モードを制御する方法【IE・EDGE】

このCookbookでは、IM-FormaDesignerで作成したフォーム内の 画面アイテム「文字列」と画面アイテム「グリッドテーブル」のIME入力モードを制御する方法を紹介します。 入力モードを制 …

no image

IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスク利用例

このCookBookでは、IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスクの利用例を紹介します。 IM-BISで作成したワークフローの案件終了処理で、画面項目 …

no image

祝日や会社の予定を設定したカレンダーを作成する

このCookbookでは、祝日や独自の予定を設定したカレンダーを活用する方法について紹介します。テナント管理者はカレンダーの作成、メンテナンスを行えます。また、テナントのデフォルトカレンダーを設定でき …

no image

ViewCreatorでIM-Workflowのフロー毎の取止め・差戻し案件件数を表示する。

このCookBookでは、ViewCreatorでIM-Workflowのフロー毎の取止め/差戻し案件件数を表示する方法を説明します。 検索条件を変更することで、IM-Workflowの特定の状況をモ …

RSSRSSRSSRSS