In this post, I will introduce the tree view, a page property you don´t usually see in Business Central. To illustrate it I´ve built a sales panel with four different documents (Orders, Quotes, Invoices, and Credit Memos), a tool you might find interesting.
The panel will display the header of the documents and they can be expanded to see their lines. This way you don´t need to open each document to know what´s inside.
You can find the tool on my GitHub:
The basic of the tree view is that it needs an indentation number for each row. That is the number from which it can be collapsed. This means we must give an indentation number for each row to make it work.
In this example, we will use the new ‘Tabletype’ property and will use a temporary table to insert our records. All the documents will be inserted here.
The idea is simple, we need to achieve something like the following in which the headers are level 0 and the lines are level 1.
You can keep adding numbers for further indentation, just keep in mind that it has to grow in ascending order being 0 the highest level of indentation:
We will hide the indentation column once we have achieved the objective:
For each document type, we will have a ListPart page and on the repeater´s property section we will set up two of them, ‘IndentationColumn’ and ‘ShowAsTree’.
‘ShowAsTree’ is only needed if you wish to expand and collapse:
Now it is time to add some logic. My procedures will insert a level 0 for each header and a level 1 for each line:
I try to keep the post as short as possible so for further understanding download the tool on my GitHub :
The final result will look like this. You can have a general view of your sales documents. You might want to add some filtering/fields to suit your needs :
You can play with some properties like ‘HideValue’ and ‘StyleExpr’ to give the final touch.
From here you can add any functionality you might need. I´ve added some actions in order to open the document and the customer. Here´s the video test:
That´s all. Hope you find it helpful.