SMARTTABLEでプロパティを設定すると実装できるgrowingをm.tableで実装するとつまったのでまとめました
はじめに
SAPUI5のSMARTTABLEでは、growingプロパティを使えば簡単に「もっと見る」形式のページング（Lazy Loading）が実装できます。
<SmartTable
id="smartTable"
entitySet="Products"
tableType="ResponsiveTable"
useExportToExcel="true"
useVariantManagement="true"
useTablePersonalisation="true"
header="Products"
showRowCount="true"
growing="true" />
このように、growing="true" をつけるだけでスクロールや「もっと見る」ボタンによるロードが可能です。
しかし、m.Tableで同様の挙動を実装しようとしたときに、思ったより手こずったので、その方法と詰まったポイントをまとめます。
前提
- UI5 バージョン: 1.108
- 使用コンポーネント:
sap.m.Table - データ取得方法: OData V2（
JSONModelでも応用可）
m.Tableでgrowingを実装する基本
まずは基本のm.Table定義
<Table
id="productTable"
growing="true"
growingScrollToLoad="true"
items="{
path: '/Products'
}">
<columns>
<Column>
<Text text="Product ID" />
</Column>
<Column>
<Text text="Name" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{ProductID}" />
<Text text="{Name}" />
</cells>
</ColumnListItem>
</items>
</Table>
ここで重要なのは以下の2つのプロパティ：
-
growing="true"：growing機能を有効にする -
growingScrollToLoad="true"：スクロールで自動ロード（falseの場合は「もっと見る」ボタン）
詰まったポイント
1. growingが効かない！
最初にgrowingを設定してもうまく機能せず…。
原因：
- バインディング先が静的データだった（growingは基本的にバックエンドとの連携で効果を発揮）
-
growingThresholdが設定されていなかった - Modelに設定したデータ量が少なすぎた（そもそもgrowingする必要がなかった）
対処：
- 適切なデータ件数（例：50件以上）を用意
-
growingThresholdを明示的に設定
growingThreshold="20"
2. テーブルが更新されない
スクロールしてもデータが増えない…。ロードのトリガーが発火しない。
原因：
- コントローラー側でデータの追加ロード処理を書いていなかった
- Modelに全部のデータを最初から読み込んでいた
対処：
- ODataの場合、
$topや$skipパラメータでサーバーから段階的に取得 -
onUpdateFinishedイベントなどで状態を確認
まとめ
-
SmartTableは非常に便利だが、自動で色々やってくれる分「ブラックボックス」的な部分もある。 -
m.Tableは手間はかかるけど、細かく制御したいときには柔軟。 -
growingを有効にするには、データの準備とバインディング方法が非常に重要。
おまけ：JSONModelでのgrowing例
onInit: function () {
var oData = {
Products: []
};
for (var i = 0; i < 100; i++) {
oData.Products.push({
ProductID: i + 1,
Name: "Product " + (i + 1)
});
}
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
}
これでスクロールに応じて読み込みが行われるようになります。
さいごに
m.Tableでgrowingを使うには、いくつかハマりどころがありますが、仕組みがわかればSmartTableよりも柔軟に使える場面が増えます。
この記事が誰かの「ハマりポイント回避」に役立てば幸いです！