Tech JAMリプレイ:SAPUI5 SmartTableを使った高度な一覧表示

 2015.06.02  リアルテックジャパン

はじめに

Googleを代表とする検索エンジンを使うことは日常生活において一般的な行動になりました。わからないことがあったら、PCやスマホでまずは検索して、検索結果から目的の情報を探すことは日常の欠かせない行動です。仕事でも自身の有給休暇取得申請がどのような状態にあるか、過去に提出した見積はどんなだったかを探すなど、検索して結果一覧を見るという行動はシステムの基本的な動きです。
Web画面開発で使うSAPUI5では、検索結果一覧をどのように実現しているかを今回ご紹介していきます。

 

なお本記事は、下記シリーズ記事の一部で、他記事も参照されることをお勧めします。

SAPデータコピーツール Data Sync Manager
SAPユーザー必見!テスト・トレーニング・データ移行時に機密データを守る方法は?

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リプレイ:HANALumira Desktopでの再発見

一覧表示画面は機能要件の山

一覧表示でよくある機能要件は以下のものがあります。

  • ソート:昇順/降順ソート
  • フィルタ:列の内容でフィルタ
  • レイアウト変更:列順序、列長、列表示有無
  • レイアウト保存:ソート、フィルタ、レイアウトの保存と再利用
  • 一覧内容出力:一覧内容のEXCEL/CSVダウンロード

上記以外にも「ストライプ表示」や「小計表示」などたくさんの機能要件があります。Web開発のデファクトスタンダードとなっているjQueryでもそれらの機能を実装するためには、数多くの方法が乱立しています。Googleで検索するとプラグインがたくさんでてきます。Excelのような便利な表計算ソフトと類似の機能性をWebアプリケーションで実装することは、まだ簡単とは言えません。

[RELATED_POSTS]

SAPUI5における一覧画面表示

前記事の動画デモでは「課題ダッシュボード」画面で一覧表示をしています。デモコンテンツ(下図)にはソートとフィルタ、レイアウトを実装しています。ソートとフィルタ機能は部品のプロパティを設定するだけで、下図のように動きます。

SAPUI5_Table.jpg

もっと見る:【第1回】SAPUI5とSAP NetWeaver Gatewayによるマッシュアップ開発入門(序章)

最新のSAPUI5ではSmartTableという部品を使って、レイアウト保存と一覧内容出力が容易に実装できるようになりました。SmartTableは正式リリースされていませんが、「すぐにリリースする」とSDKに記載されており期待が高まります。このような流れを見ると、複雑な機能を盛り込みにくいWeb画面の世界もクライアントソフトの機能性にかなり近づいてきた感じがします。

SAPUI5_SmartTable.jpg

さいごに

今回は、Smart Tableを使った一覧表示を通じてSAPUI5について解説しました。SAPUI5はリリースサイクルが非常に早い開発フレームワークです。最新の技術情報を抑えておくことは手間ではあります。しかし、それ以上に様々な機能を簡単に実装できるようになることは非常に魅力的です。Web技術は日進月歩で大きく進化しており、もう一度現在のシステムを想像し直す範囲が大きい分野だと感じました。今までは、「そんなことできない!」と思っていたことが、簡単にできるようになっていることも多いはずです。


RECENT POST「S/4HANA」の最新記事


S/4HANA

SAP S/4HANAとは?サポート期限切れが迫る中移行するメリットをご紹介

S/4HANA

SAPが目指す「ビジネスプロセスの最適化」とは?

S/4HANA

SAPデータ移行に必要な環境調査について

S/4HANA

SAP S/4HANAの選択的データ移行

Tech JAMリプレイ:SAPUI5 SmartTableを使った高度な一覧表示
New Call-to-action

RECENT POST 最新記事

RANKING人気記事ランキング

ブログ購読のお申込み