リストデータを一覧表示した各行に↑／↓のアイコンを表示し、クリックすると対象行を1行上／下に移動させるWidgetです。
RichWidgetに含まれています。
ただし、部品には、リストデータ内で該当行の位置を変更する処理は含まれていません。そこは自分で実装することになります。
動作確認環境
Platform Version：11.0.212.0
Service Studio Version：11.0.527.0
では、実装方法を見ていきます。
Table of Contents
List_Move Widgetを配置する
TableRecordsに1列追加して、List_Moveをドラッグ＆ドロップして配置します。
Input Parameterが4つありますが、TableRecords Widgetの同名のパラメータを設定します。
List_Moveのクリック時の処理を実装する
配置したList_Move WidgetのOn NotifyのDestinationに設定したScreen Actionに以下の処理を実装。
クリックされたアイコンの方向を確認する
アイコンには上向きと下向きがあるため、どちらがクリックされたか判断する必要があります。
List_Move_Down()/List_Move_Up()：RichWidgetsに含まれるFunction。それぞれ、上向きアイコン／下向きアイコンクリック時に通知されるメッセージを返します(試してみたところ、DOWN/UPでした)。
よって、Notifyされるメッセージを取得（System/Deprecated_NotifyGetMessage)して上記Function結果と比較すれば、クリックされたアイコンの向きがわかります。
以下の例では、上向きアイコンクリック時にTrueの分岐、下向きアイコンならFalseの分岐。
境界値チェック
リストの先頭要素をさらに上へ移動したり、最後の要素を下に移動したりはできないので、CurrentRowNumber<＝StartIndex かつ アイコンが上向きであれば、エラー
CurrentRowNumber>=LineCount – 1 かつ アイコンが下向きであれば、エラー
とします。設定が正しければ、本来発生しない操作ですが、異常ケースに備えてチェックをします。
リスト内の位置を実際に入れ替える
ここは部品のカバーがないので自分で実装です。
例として上向きアイコンクリックの場合。
N行目がクリックされたとき、
- NとN行目のレコードを一時変数に保存
- N行目をリストから削除
- 保存しておいたレコードをN-1行目に挿入
- テーブルの端の行の場合、アイコンが片方しか表示されないため、端の行の移動時に備えて、アイコン表示を更新しておきます。Ajax Refreshで、両方の行を更新します。
として実現しています。
他にも、EntityのAttributeの中に、表示順を示すものがあれば、それをUpdateかけてテーブル表示を更新する方法もあります。
こちらは、Rich Widgets SampleというForgeの部品で示されています。