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よりも柔軟に使える場面が増えます。
この記事が誰かの「ハマりポイント回避」に役立てば幸いです！