はじめに
Googleを代表とする検索エンジンを使うことは日常生活において一般的な行動になりました。わからないことがあったら、PCやスマホでまずは検索して、検索結果から目的の情報を探すことは日常の欠かせない行動です。仕事でも自身の有給休暇取得申請がどのような状態にあるか、過去に提出した見積はどんなだったかを探すなど、検索して結果一覧を見るという行動はシステムの基本的な動きです。
Web画面開発で使うSAPUI5では、検索結果一覧をどのように実現しているかを今回ご紹介していきます。
なお本記事は、下記シリーズ記事の一部で、他記事も参照されることをお勧めします。
第1回 Tech JAMリプレイ：統合プラットフォームとしてのHANA開発(SAPUI5, OData, PAL, HANA View)
第2回 Tech JAMリプレイ：HANAテキスト検索でのナレッジ管理効率化
第3回 Tech JAMリプレイ：SAPUI5 SmartTableを使った高度な一覧表示【本記事】
第4回 Tech JAMリプレイ：HANA PALを使った将来予測
第5回 Tech JAMリプレイ：HANAとLumira Desktopでの再発見
一覧表示画面は機能要件の山
一覧表示でよくある機能要件は以下のものがあります。
- ソート：昇順/降順ソート
- フィルタ：列の内容でフィルタ
- レイアウト変更：列順序、列長、列表示有無
- レイアウト保存：ソート、フィルタ、レイアウトの保存と再利用
- 一覧内容出力：一覧内容のEXCEL/CSVダウンロード
上記以外にも「ストライプ表示」や「小計表示」などたくさんの機能要件があります。Web開発のデファクトスタンダードとなっているjQueryでもそれらの機能を実装するためには、数多くの方法が乱立しています。Googleで検索するとプラグインがたくさんでてきます。Excelのような便利な表計算ソフトと類似の機能性をWebアプリケーションで実装することは、まだ簡単とは言えません。
[RELATED_POSTS]
SAPUI5における一覧画面表示
前記事の動画デモでは「課題ダッシュボード」画面で一覧表示をしています。デモコンテンツ(下図)にはソートとフィルタ、レイアウトを実装しています。ソートとフィルタ機能は部品のプロパティを設定するだけで、下図のように動きます。
もっと見る：【第1回】SAPUI5とSAP NetWeaver Gatewayによるマッシュアップ開発入門（序章）
最新のSAPUI5ではSmartTableという部品を使って、レイアウト保存と一覧内容出力が容易に実装できるようになりました。SmartTableは正式リリースされていませんが、「すぐにリリースする」とSDKに記載されており期待が高まります。このような流れを見ると、複雑な機能を盛り込みにくいWeb画面の世界もクライアントソフトの機能性にかなり近づいてきた感じがします。
さいごに
今回は、Smart Tableを使った一覧表示を通じてSAPUI5について解説しました。SAPUI5はリリースサイクルが非常に早い開発フレームワークです。最新の技術情報を抑えておくことは手間ではあります。しかし、それ以上に様々な機能を簡単に実装できるようになることは非常に魅力的です。Web技術は日進月歩で大きく進化しており、もう一度現在のシステムを想像し直す範囲が大きい分野だと感じました。今までは、「そんなことできない！」と思っていたことが、簡単にできるようになっていることも多いはずです。
