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

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

関連記事

結合処理で「多数決」承認機能を実現する

このCookBookでは、「多数決」承認機能を実現する方法について紹介しています。 完成イメージ 以下の完成サンプルをダウンロードしてご活用ください。 im_logicdesigner-data-14 …

no image

IM-LogicDesignerで、Redmineカスタムクエリのチケット一覧を取得する方法

このCookBookでは、IM-LogicDesignerを使用してRedmineのチケット (issues) 一覧を取得する方法を紹介します。 Redmineは、外部からチケット一覧を取得するための …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(単一アイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。 SpreadJSライブラリはクライアントサイドで動作するため、サーバ …

no image

e Builder から Payara を起動する方法

この CookBook では、e Builder から Payara を起動する方法について紹介しています。 レシピ External Tools を表示します。 Program を追加します。 Pr …

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

RSSRSSRSSRSS