In LightSwitch, you can create TreeView with data source using the custom control option in LightSwitch Screens Creation.
In TreeView control, you can use the data source option to load the data to the tree view. You can create a table that contains all the node details of the TreeView.
To create a table in LightSwitch, refer the given link:
The “BrowseTable1Items” table was created by referring the above link. This table contains the following fields. These fields are necessary to render the TreeView control.
Table 1: BrowseTable1Items
You can render the TreeView by loading the data from the data source table. While loading the data to TreeView, the data needs to be in JSON format. Here “contentItem.value.data” contains the created table data in the JSON format. We assign this JSON data to the dataSoure API, that is available in the Fields property of the TreeView control. Then, you can map the corresponding data source table fields with TreeView fields. Only then proper data is loaded to TreeView. Here node_ID, name, pid, hasChild, expanded are the table fields name of “BrowseTable1Items”. These fields need to be mapped with the corresponding TreeView fields like id, text, parentId, hasChild and expanded. Refer to the following code example.
A sample was prepared based on this and you can find it under the following location:
In the attached sample, the “TreeViewControl.lsml.js” file contains the above mentioned code example, that is used to render the TreeView control. Then “BrowseTable1Items.lsml” and “AddEditTable1Item.lsml” are used to add the TreeView node details in the data source table, “Table1Items.lsml”. To add data into table, run the sample by setting “BrowseTable1Items.lsml” as home screen.
Figure 1: Output
|Article ID:||Published Date:||Last Revised Date:||Platform:||Control:|