Blogs & articles

Recently, we’ve come across a requirement to create a treeview of accounts in a Canvas App. There are multiple ways to realize this, but since we had some extra requirements… we had to get creative and thought it would be interesting to share. Some of the requirements are:

• Starting from a single record, show an unlimited number of levels down the hierarchy (children of children of children, etc.)
• The ability to edit data locally from the treeview (have the data in a single collection)
• The ability to expand/collapse the treeview
• No use of nested galleries, show everything in a single gallery

 This blog shows how we made it work. Please note: the functions described may require some Canvas App experience to fully understand.

SETUP

For illustration purposes, we created a “Family Members” table in DataVerse, with 2 fields:

1) Name
2) Parent (Lookup to Family Members table. This corresponds to the “Parent Account” field on the Accounts Table.)

Then, we entered some data for testing purposes through a Model-Driven App:

THE LOGIC

To collect our child records, child records of child records, and so on, we will need to create a structure to run a ForAll function a variable number of times. To illustrate the logic:

• Get great-grandmother’s children
• For all children, get their children
• For all these children, get their children
• And so until no more children are found.

 Create a loop structure using a toggle

To do this, we use a toggle switch. A toggle switch has a “Default” property, in which we can enter a Boolean (true/false) variable. By updating this variable, the toggle is switched automatically.

To make the toggle do something, we write our function in its “OnCheck” property. We need to run the same function multiple times, so the toggle needs to switch itself on and off a couple times. The Toggle’s “OnCheck” property looks something like this.

1. Uncheck the toggle
2. Add you function
3. Check if you’re done
   • If yes: Notify (or anything else)
   • If no: Check the toggle again

This logic will re-run until the condition to stop is met.

 Now, to actually get started. Some preliminary steps:

• Have your table (with parent lookup field) in place and some testing data
• Create a canvas app, and connect to your table
• Add a means of selecting the main (parent) record to your Canvas App. We use a ComboBox, with the “Allow Multiple Selection” property off.

4. Add a button and a toggle switch. The button will start the function, the toggle will loop through the hierarchy levels. Of course, the starting function could also be executed from another control, but to keep it as simple as possible we’ll use a button. Small note about the toggle switch: you may want to hide it, so a user cannot manually click it.

CONFIGURING THE BUTTON

 Our button, starting our function, will do the following:
1. Make sure the toggle is unchecked before starting
2. Create the first (top-level) record in the collection
     a) To keep it simple for illustration purposes, only relevant fields (Name, GUID, and parent’s GUID) are stored from our table.
     b) To structure our tree view, more fields (Level, Branch, and Visible) are added to our collection. More on this later.
3. Set a number variable to indicate for the toggle which hierarchy level to look for
4. Check the toggle

 The button’s “OnSelect” property will look like this:

CONFIGURING THE TOGGLE

Variable “varGetChildren” will trigger our toggle, so we must enter it in the toggle’s “Default” property.

The OnCheck property of our toggle will hold the functions to:

• Check for child records and store them
• Add branch and level fields
• Know when to keep running, and when to stop

The code will look as follows:

Now we have our button & toggle configured, we can run the process. To see what’s actually happening, let’s add a gallery. I’ve created a blank vertical gallery, with the following “Items” property:

 Sort(

    colFamilyMembers,

    Branch,

    SortOrder.Ascending

)

 In the gallery, I’ve added three labels, to show the following:

ThisItem.Name

ThisItem.Level

ThisItem.Branch

Let’s run it!

Note how the Branch allows for sorting in a manner that shows child records under their parent.

Make it a treeview

Now we have a list of family members, that looks pretty flat. To make it look like an actual treeview, we can use the level value to create indentations by manipulating the “X” property of the Name label in our gallery. By multiplying the level by a number, the label will position itself according to the Level value of the record. We can also create logic in the width property of the label to make sure the right side of every label stays vertically aligned.

The result:

ADDING EXPANDING/COLLAPSE BUTTON

Starting to look like something. Now, let’s make it collapsible.

Firstly, we change the Items property of the Gallery to only show the records where the “Visible” field is set to true.

Next, add an icon to the gallery, and set the following properties:

• X
  • I used a similar logic for placing the “Name” label, placing the icon next to the Name label.

• Icon
  • Based on if a record’s child records are expanded/collapsed, show an ChevronRight/ChevronDown

• Visible
  • Only show the icon if there are child records

• OnSelect
  • Update the “Visible” value of child records in the collection, making them show in the gallery or not. This variant expands/collapses all below records, so children, children of children, etc.

• With a little creativity, different expand/collapse logic is possible. A good example of this would be to only expand 1 level but collapse all levels below. 

See it in action again!

Just because we can, I’ve also added icons to expand/collapse based on level:

Expand Function:

Collapse function:

That’s it! At this point you can add whatever styling and functions you’d like to the app. I hope this blog gave you a little inspiration for your next Canvas App development project. Happy Making!