OutSystemsでツリービューを実現するコンポーネントとして、昔からあったzTreeコンポーネントのReactive版が、ZTree Reactive。
確認環境
Personal Environment(Version 11.14.0 (Build 33133))
Service Studio (Version 11.14.5)
zTree Reactive (Version 1.0.1)
コンポーネントの概要
オリジナルのjQuery pluginがzTree。
ただ、このモジュールでどのバージョンを使っているか不明（モジュールに組み込まれているJavaScriptファイルにはバージョン番号の記載なし）。
なお、Reactive Web AppではjQueryの使用は非推奨なのがちょっと気になるところ。
外部ライブラリのJavaScriptコードを使用する
OutSystemsでは、DOMを直接操作するjQueryなどのJavaScriptライブラリを使用しないことを推奨しています。これらのライブラリを使用すると、リアクティブアプリやモバイルアプリが破損する可能性や保守が難しくなる可能性があります。
この記事を書いている時点（2022/3/23)で確認できる最終リリースが2020/5/10とちょっと古い。
プロジェクトページのOverviewに貼ってあるリンクは無効だが、リンクのwww.の部分を消せば接続できる。
基本的な使い方
以下のようなツリーを表示する手順。
部品を参照する
Manage Dependenciesダイアログで、zTree Reactiveの全要素をチェックし、APPLYボタンをクリック。
データを準備する
必要なデータはzTreeData StructureのList。
zTreeData1つは、ツリービューの各ノードに該当する。
Attributeはたくさんあるが、最低限必要なのは、idとname。階層構造にしたい場合はこれにpIdが加わる。サンプルとして、以下のようなデータをExcelで作成。
- id: 各ノードを一意に特定する値（表示はされない）
- name: 各ノードに表示される文字列
- pId: 他のノードの子ノードにする場合のみ指定。親ノードのidを設定する
これをService Studioにインポートして、Entityを用意。
Databaseを右クリック → Import New Entities from Excel → 作成したExcelファイルを選択
データから、EntityとPublish時にExcelのデータをEntityに取り込むTimerが作成される。
テスト画面を作成する
DataActionを用意する
今回は、Entityから取得したデータを、zTreeDataのListに詰め替えたいのでData Actionを利用する（他にも、データをAggregateで取得し、On After Fetchイベントでデータを詰め替える方法もある）。
Data Actionの中身は、作成したEntityをAggregateで取得し、出力変数にAssignmentで詰め替えるだけ。データを設定した順番でツリービューに表示されるようなので、AggregateはSort (NodeId属性）を設定しておいたほうが良い。
Assignmentは以下の通り。
ScreenにBlockを配置
zTreeモジュールにあるzTree Blockを画面に配置。
配置したZTreeUL Placeholderには、デフォルトでHTML Elementが1つおいてある。
黄色の枠をつけたName属性が空になっているが、何らかの値を設定する必要がある。
もしこれをしないと、以下のようなエラーが発生するので注意。
ZTreeUL placeholder of the tree must have an HTML widget with tag value of 'ul' and it must have a name set
Blockのプロパティを設定する (Data ActionのOutput Parameterを設定する）
