この記事を書くきっかけ
OutSystemsのReactiveWebでは2通りの方法で簡単にテーブルを実装することができる。
ただし、片方の方法で実装したテーブルにはソートが実装されているように見えるが実際には動作しないという罠が存在する。
その方法でテーブルを実装してしまい、ソートができないことに気が付かなかったということがあった。
この記事のゴール
ScreenにTableを配置してEntityを結びつけた場合、そのままではソートのUIがあるにもかかわらずソートが実装されていない状態になる。
そこからソートの処理を実装し、UIの期待通りに動作させる。
環境
OutSystems Service Studio 11
Reactive Web App
使用するEntity
画面の実装
テーブルの作成方法には主に二つのパターンがある。
- ScreenにEntityを配置してTableを作成
- ScreanにTableを配置してEntityを紐づける
前者の方法で実装した場合、0件の場合のメッセージ表示やページネーション、ソートが実装される。
ところが後者で実装した場合、それらが実装されない。
ここでは当時を再現するため、後者で実装する。
ソートのUIの確認
上記の方法でTableを作成するとヘッダのすべての項目に▲▼が表示される。また、クリックしてもソートされない。
ソートを実装するヘッダーセルにはSortAttributeが設定されていることを確認する。
ソートを実装しない項目への対応
ここではDescriptionにソートを実装する必要がないので、DescriptionのヘッダーセルのSortAttributeの空にする。
概要から▲▼が消えたことを確認する。
ソートの実装
TableウィジェットのPropertiesを確認する。EventsのOnSortに何も設定されていない。
ここに、「New On Sort Client Action」を設定する。
すると、該当のLocalVariableに「TableSort」「StartIndex」「MaxRecords」が追加され、ScreenActionに「OnSort」が追加される。
これをPublishして動作を確認する。
おわりに
簡単に実装できるが、残念ながらソートのたびにAggregateでデータ取得が発生してしまう。これはEntityをScreenに配置してTableを実装する場合も同じである。
データの再取得なしでソートする方法についても今後考えてみたい。
本記事のようなケースはめったに発生しないと思われるが、備忘のため記すこととした。