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

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

関連記事

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

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

no image

スクリプト開発でのストアドプロシージャの実行方法

intra-mart Accel Platform 2017 Winter(8.0.18) より SharedDatabase, TenantDatabase に executeCallable AP …

no image

グリッドテーブルの列タイプ「カスタム」を利用した場合にマルチセレクトがトグルされないようにする方法

このCookBookでは、グリッドテーブルの列タイプ「カスタム」を利用した場合に、マルチセレクトがトグルされないようにする方法を説明します。 グリッドテーブルでは、行内で参照表示となっている部分をクリ …

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …

no image

フォーム内の入力値を案件名に自動入力する方法

このCookbookでは、IM-FormaDesignerで作成した申請画面から入力内容を案件名に設定する方法を紹介します。 この方法を利用するとIM-FormaDesignerの入力内容をIM-Wo …

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

RSSRSSRSSRSS