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... 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
