3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Tips】SAP Fiori(SAPUI5)画面でワイルドカードを使ったあいまい検索を表現したい

Last updated at Posted at 2025-01-05

概要・課題

受託開発企業で働く@fussasyです。SQLではワイルドカード( * )を付けてあいまい検索が可能です。SAP GUIの操作でも、ワイルドカード( * )を付けてあいまい検索が可能です。しかし、Fioriアプリケーションにおけるプレフィックスやサフィックスは、ただのアスタリスクとして認識されているようです。例えば、以下のサンプルでダイアログの検索フォームで確認してみてください。アスタリスクを含む文字列に対して部分一致検索が実行されています。
【Sample: Select Dialog】

「ote」と検索した場合、各Notebook~が検索結果として表示されます。
image.png

「Note*」とアスタリスクを付けて検索した場合、検索結果には何も表示されない。
image.png

SAPシステムに慣れている方にとって違和感を感じるみたいです。あいまい検索の機能について、該当する処理に少し修正を加えてあげる必要がありそうですね。

解決策

FioriモデルがJSONModelの場合、検索時の比較はフロントエンド側で実行されます。そしてそれを実現するSAPUI5ライブラリは「sap.ui.model.FilterOperator」となります。

デフォルトでは「FilterOperator.Contains」になっていることが多いです。

javascript.controller.js
		onSearch: function (oEvent) {
			var sValue = oEvent.getParameter("value");
			var oFilter = new Filter("Name", FilterOperator.Contains, sValue);
			var oBinding = oEvent.getParameter("itemsBinding");
			oBinding.filter([oFilter]);
		},

実現したいあいまい検索の仕様は以下の通りです。

①部分一致は、入力値がで開始および終了する場合
例:「bc」で検索すると「bc」「abc」「bcd」「abcd」が結果として表示される。
②前方一致は、入力値が
で終わっている場合
例:「ab*」で検索すると「ab」「abc」が結果として表示される。
③後方一致は、入力値が*で始まっている場合
例:「cd」で検索すると「bcd」「cd」が結果として表示される。
④完全一致は、入力値の先頭と末尾が
でない場合
例:「abc」で検索すると「abc」が結果として表示される。

上記を実現すると以下のようになります。(一例です)

javascript.controller.js
		onSearch: function (oEvent) {
          var sValue = oEvent.getParameter("value");
          var oFilter;
          if (sValue === "") {
            // 空文字の場合はフィルターを適用しない
            oFilter = []; 
          } else {
            // ①部分一致
            if (sValue.startsWith("*") && sValue.endsWith("*")) {
              sValue = sValue.substring(1, sValue.length - 1); // 前後の*を削除
              oFilter = new Filter("Name", sap.ui.model.FilterOperator.Contains, sValue);
            } 
            // ②前方一致
            else if (sValue.endsWith("*")) {
              sValue = sValue.substring(0, sValue.length - 1); // 後方の*を削除
              oFilter = new Filter("Name", sap.ui.model.FilterOperator.StartsWith, sValue);
            } 
            // ③後方一致
            else if (sValue.startsWith("*")) {
              sValue = sValue.substring(1, sValue.length); // 前方の*を削除
              oFilter = new Filter("Name", sap.ui.model.FilterOperator.EndsWith, sValue);
            } 
            // ④完全一致
            else {
              oFilter = new Filter("Name", sap.ui.model.FilterOperator.EQ, sValue);
            }
            oFilter = [oFilter]; // フィルターを配列で渡す
          }
          var oBinding = oEvent.getParameter("itemsBinding");
          oBinding.filter(oFilter);
		},

アスタリスクであいまい検索可能となりました!

image.png

個人的にはワイルドカードでのあいまい検索について、できない方が自然な動作に感じてしまいます。しかし、SAPシステムを使い慣れたユーザーにとっては、コチラの方が自然に感じることが多いそうで、要望としてあがることがあるみたいです。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?