How To Use Tree List - XMPRO App Designer

In this video, you’ll learn how to configure a tree list in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to support@xmpro.com

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

hello and welcome to another training

video from xmp pro

today we will be looking at how to use

the treelist component

as a prerequisite you should have

already gone through the video on how to

create and use data sources

if not then i recommend doing that first

the treelist component can be found in

the basic blocks section

to get the treelist working you will

need to add a data source

and then bind the data source columns

display is what you will see and i will

set this to

position id is the

id of the row

and parent id is the id of the parent

as this is a tree list there will be a

hierarchy

like uh like in the icon

note that there must be a row that has

parent id null and this will be the root

item

so we can save this and then launch it

so this is how the tree list works you

can

expand rows and

for instance the hr manager would have

parent id

as the id of coo and co

would have parent id as the id of the

ceo

and ceo would have null as the

parent id now we can go back

and there are some behavior options here

in the blog properties

we have visible which is

self-explanatory disabled

self-explanatory

tooltip which if you add something here

then that will show up when you hover

over the item

search enabled which will allow you to

search by

the display column

and select multiple which will allow you

to select multiple

rows so if i save that and then launch

again

so as you can see there's now a search

bar

and we can search by the display column

and also because we checked the select

multiple they're in our check boxes

how they work is that if you select one

item the parent gets a

square and if you select all the items

the parent gets

a a tick if you select a parent item it

also selects the

child the children and if you unselect

a parent item it unselects all the

children

this has been how to use the treelist

component

Last updated