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

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する方法について紹介しています。 完了案件でも、確認対象者が確認することはできます …

no image

スクリプト開発でのCSRF対策(formタグ編)

Cross Site Request Forgery(CSRF)とは、閲覧者に不正にHTTPリクエストを送信させ、攻撃者の意図した処理を実行させる攻撃手法です。 このCookBookでは、スクリプト開 …

no image

IM-BloomMaker Modifier の使い方

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。 modifier は、同じく 2020 Summer …

no image

スクリプト開発で利用できる close 関数のご紹介

この CookBook では、スクリプト開発で利用できる close 関数について紹介します。 スクリプト開発では作成した js ファイルの中に init と言う名前の関数を定義すると思いますが、この …