SAPUI5 Fioriで処理中にインジケータアイコンを表示する

8972 ワード
KYOSO SAP SAPUI5 Fiori SAP テキストリンク

はじめに

SAPUI5 Fioriにて、インジケータアイコンの実装を行う機会があり、その際に調査した内容と実装方法について、備忘録として記載します。

本記事で扱うインジケータは、「Busy Indicator」です。

実装環境
　・Neo環境
　・SAPUI5（1.87.0）

目次

1. Busy Indicatorの種類
2. 実装方法
参考

1. Busy Indicatorの種類

Busy Indicatorの種類には、「Global Busy Indicator」と「Control Busy Indicator」があります。

・Global Busy Indicator

インジケータアイコン表示時に、画面全体を操作不可状態とする方法です。
画面上のボタンやテーブルの全ての要素について操作が不可となります。
保存処理実行時など、画面遷移や保存ボタンの連続クリック対策に適しています。

・Control Busy Indicator

インジケータアイコン表示時に、特定の要素を操作不可状態とする方法です。
画面上のボタンやテーブルの指定箇所について操作が不可となります。
テーブルデータ取得時など、処理を行なっている箇所を示すことに適しています。

2. 実装方法

1. Busy Indicatorの種類 にて記載した「Global Busy Indicator」と「Control Busy Indicator」について、それぞれの実装方法を紹介します。

・Global Busy Indicator

インジケータを表示する。

GlobalBusyIndicator.controller.js
onSaveBtn: function(oEvent) {
  sap.ui.core.BusyIndicator.show(); // インジケータを表示
  // 保存処理など
}

インジケータを非表示にする。
保存処理完了後などに非表示としたい場合は、エラー発生時にも非表示とする必要がある。

GlobalBusyIndicator.controller.js
saveCallAjax: function (saveData) {
  new common()._setCSRFToken();
  jQuery.ajax({
    url: "/****.xsjs",
    method: "POST",
    async: false,
    data: saveData,
    success: function (response) {
      // 保存完了時の処理
      sap.ui.core.BusyIndicator.hide(); // インジケータを非表示
    },
    error: function (e) {
      // エラー時の処理
      sap.ui.core.BusyIndicator.hide(); // インジケータを非表示
    }
  });
}

・Control Busy Indicator

インジケータを表示する。

ControlBusyIndicator.controller.js
onSearchBtn: function(oEvent) {
  var _this = this;
  _this.getView().byId("TableId").setBusy(true); // インジケータを表示
  // データ取得処理など
}

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

ControlBusyIndicator.controller.js
getTableData: function () {
  var _this = this;
  oModel.read(
    "/vTableData", {
      "success": function (oData, oResponse) {  
        // データ取得時の処理                               
        _this.getView().setModel(new JSONModel(oData), "tableData");
        _this.getView().byId("TableId").setBusy(false); // インジケータを非表示
      }
    }
  );
}

参考

sap.ui.core.BusyIndicator - Samples - Demo Kit - SAPUI5 SDK
sap.ui.core.Control - Samples - Demo Kit - SAPUI5 SDK