{"id":31941,"date":"2025-09-10T05:00:00","date_gmt":"2025-09-10T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=31941"},"modified":"2025-08-11T14:55:09","modified_gmt":"2025-08-11T12:55:09","slug":"hierarchy-view-in-canvas-apps","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/hierarchy-view-in-canvas-apps\/","title":{"rendered":"Hierarchy view in Canvas apps"},"content":{"rendered":"\n

Data hierarchy is popular in business applications \u2013 product catalogs, company organizational structures, and project or task management often require multi-level representation. Application users need tools for clear and intuitive navigation through nested structures. Presenting data in a readable, multi-level, hierarchical view is one of the biggest challenges that Canvas Apps developers face<\/strong>.<\/p>\n\n\n\n

End users expect functional and intuitive interfaces that allow for quick understanding and navigation of data. Presenting information as a multi-level list can significantly improve readability and work efficiency. Hierarchy allows the user to better understand the context, dependencies, and level of detail. Unfortunately, despite the multitude of ready-made components, Canvas Apps do not offer a ready-made solution for flexible data visualization in this form.<\/strong><\/p>\n\n\n\n

Therefore, you need to create your own solutions, which you can learn more about in this article.<\/p>\n\n\n\n

Methods of visualizing data in a hierarchy<\/strong><\/strong><\/h2>\n\n\n\n

The most popular method of visualizing data in a hierarchy is using nested galleries. This relatively easy-to-implement solution allows for the presentation of a 2-level data structure.<\/p>\n\n\n\n

Example of use:<\/strong><\/p>\n\n\n\n

The main gallery shows departments, and each record contains a sub-gallery with specific department employees.<\/p>\n\n\n\n

\"Nested
Fig. 1 Nested gallery<\/figcaption><\/figure>\n\n\n\n

Sub-gallery data source:<\/p>\n\n\n\n

\"Sub-gallery<\/figure>\n\n\n\n

By making the visibility of nested galleries dependent, for example, on the value of the parent record (group), which is updated after clicking the icon, you can also relatively easily implement expanding\/collapsing sections.<\/p>\n\n\n\n

\"Expanding\/collapsing
Fig. 2 Expanding\/collapsing sections<\/figcaption><\/figure>\n\n\n\n

Sub-gallery visibility:<\/p>\n\n\n\n

\"Sub-gallery<\/figure>\n\n\n\n

Action on selecting an icon:<\/p>\n\n\n\n

\"Action<\/figure>\n\n\n\n

Icon type:<\/p>\n\n\n\n

\"Icon<\/figure>\n\n\n\n

Due to its low complexity, this solution is very popular and often used. This type of visualization can be a good solution for a two-level hierarchy structure and an optimal amount of data.<\/p>\n\n\n\n

Disadvantages of the solution<\/strong><\/strong><\/h3>\n\n\n\n

However, it is associated with limitations and problems, such as low efficiency and a lack of flexibility<\/strong>. The internal gallery loads data separately, which significantly affects the system’s efficiency and speed. Attempting to create additional data nesting will only intensify this effect and slow down the application even more.<\/p>\n\n\n\n

Another, this time less obvious, disadvantage of this solution is the height limit<\/strong> of a single gallery record. Because each of the nested galleries is part of the records of the parent gallery, it is subject to a height limit of 5000. This is especially important when displaying a larger number of records with data.<\/p>\n\n\n\n

A hierarchical view in a single gallery<\/strong><\/strong><\/h2>\n\n\n\n

Implementing a hierarchical view in a single gallery, using a key that allows for dynamic filtering and arranging data in a multi-level structure, can be a workaround for most of the above-mentioned limitations and problems.<\/p>\n\n\n\n

Defining keys<\/strong><\/strong><\/h3>\n\n\n\n

The most important element of creating this type of view is the correct construction of the key, based on which data in the gallery will be sorted. Defining the level of nested records with data in the context of the entire multi-level structure may also be helpful. It is best to build the key with unique information within a specific data instance. GUID may be the best choice<\/strong>, because in addition to uniqueness, it has an additional advantage that is very helpful in this case – a static number of characters.<\/p>\n\n\n\n

Defining keys for individual records can be done in several ways.<\/p>\n\n\n\n

One of them is to use a loop that will rotate until all records have been processed. Since Canvas Apps do not have a built-in function similar to those in popular programming languages \u200b\u200b(e.g., ‘ do until’ or ‘while’), a workaround is to use the self-triggering ‘toggle’ control. This trick can be used in this situation and any other situation, e.g., when we would like to use the logic of a loop that executes until a certain condition is met.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

The task table contains relationships between data records from the same table. Task creators can define the order of their execution in this way, split them into specific implementation stages, group them, etc. Each record has a unique identifier (GUID) stored in the ‘InternalId’ column. The ‘ParentInternalId’ column can also optionally define the identifier of the parent task.<\/p>\n\n\n\n

This is an example of the presentation of data relationships reflected in many data instances and business cases.<\/p>\n\n\n\n

\"Part
Fig. 3 Part of the data table<\/figcaption><\/figure>\n\n\n\n

Due to the lack of a defined number of data nesting levels and the number of records located at these levels, we will use the ‘toggle’ control to generate the key. To implement easy and controlled action to trigger the code, we can use a variable that should be used in the default value of the toggle and the appropriate place (e.g. ‘OnVisible’ of the screen) define its value to ‘true’ (call), and then to ‘false’ (deactivation and waiting for the next call).<\/p>\n\n\n\n

Setting the value of a variable:<\/p>\n\n\n\n

\"Setting<\/figure>\n\n\n\n

Default toggle value:<\/p>\n\n\n\n

\"Default<\/figure>\n\n\n\n

The code executed during the toggle operation should be defined in the control’s OnCheck property. The idea is to update the values \u200b\u200bin the columns with each record’s key and nesting level.<\/p>\n\n\n\n

The sequence of value updates will occur from the highest level (items without a defined parent) and downwards (the most nested items). For this purpose, a collection with the data subject to update is created at each loop rotation. The number of loop rotations (toggle code calls) equals the number of data nesting levels in the hierarchy structure. After that, the key value and nesting level are updated.<\/p>\n\n\n\n

The key value is created from the identifiers of the parent records, the processed record, and optionally from a value that allows for the implementation of additional sorting (in this case, the start date). The nesting level value is a numeric value, where 0 means a non-nested record. An increase in these values \u200b\u200bmeans a greater degree of data nesting.<\/p>\n\n\n\n

Finally, a check is made to see if there is still unprocessed data<\/strong>. If the condition is met, the toggle is reactivated. A negative value of this condition means the end of code execution<\/strong>.<\/p>\n\n\n\n

Code executed during toggle activation:<\/p>\n\n\n\n

\"Code<\/figure>\n\n\n\n

Optionally, suppose the order of displayed records within the same instance is important (same level + same parent) when defining the key. In that case, you can include the column value by which the sorting is to occur.<\/p>\n\n\n\n

It should be mentioned that the target sorting that will be implemented in the gallery is alphabetical. This is especially important when we expect sorting by a column with numeric values \u200b\u200bor dates. Regarding dates, it is a good idea to include the appropriate format (e.g., ‘yyyy-mm-dd’), as in the example above.<\/p>\n\n\n\n

Numeric data may prove more problematic, but you can also create a solution for this type of information. You only need to estimate the maximum number of characters of the largest values. In the example below, it is 3 (i.e., the maximum estimated value is 999). You can increase this value by a margin to maintain a safety buffer.<\/p>\n\n\n\n

\"code\"<\/figure>\n\n\n\n

In the gallery data source, you should refer to the prepared collection and consider alphabetical sorting by the key column.<\/p>\n\n\n\n

\"code\"<\/figure>\n\n\n\n

To visualize the levels of record nesting in the gallery, you can, for example, use the value from the ‘LevelInHierarchy’ column and depend on it for the text offset and background color.<\/p>\n\n\n\n

\"The
Fig. 4 The levels of record nesting in the gallery\u00a0 visualization<\/figcaption><\/figure>\n\n\n\n

Text offset:<\/p>\n\n\n\n

\"Text<\/figure>\n\n\n\n

Background fill color:<\/p>\n\n\n\n

\"Background<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"job<\/a><\/figure>\n\n\n\n

Summary<\/strong><\/strong><\/h2>\n\n\n\n

The solution presented above enables the visualization of a multi-level data hierarchy without specifying the number of levels in advance. Due to its flexibility, it can be used in many scenarios<\/strong>. The solution also does not exclude the option of implementing expandable sections and filters.<\/p>\n\n\n\n

It is important to remember to ensure an intuitive distinction between individual data instances<\/strong>, so that individual hierarchical structures do not randomly combine in the view. However, this visual aspect can be handled in many ways, depending on preferences.<\/p>\n\n\n

\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n 5\/5 ( votes: 3) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

Data hierarchy is popular in business applications \u2013 product catalogs, company organizational structures, and project or task management often require … Continued<\/a><\/p>\n","protected":false},"author":733,"featured_media":31939,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1320],"tags":[2859,1590,1526],"class_list":["post-31941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hard-development","tag-canvas-apps-en","tag-tools","tag-guidebook"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/08\/Computer_2.jpg","category_names":["Hard development"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/31941"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/users\/733"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/comments?post=31941"}],"version-history":[{"count":1,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/31941\/revisions"}],"predecessor-version":[{"id":31945,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/31941\/revisions\/31945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media\/31939"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media?parent=31941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/categories?post=31941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/tags?post=31941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}