---
title: "Creating Tree View Format"
slug: "creating-tree-view-format"
updated: 2021-03-12T15:05:34Z
published: 2021-03-12T15:07:29Z
canonical: "documentation.decisions.com/creating-tree-view-format"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating Tree View Format

Example Lab ArticleWhile Example Lab projects are resources for public use, articles and assets are not actively maintained. Screenshots and features are from the specified version below. These references may become dated as new versions are released.

---

## Overview

| ## Example Lab Details |
| --- |
| **Version** | 6.9.2 |
| **Root Folder** | Example Lab - Tree View Format |
| **Modules** | None |
| **Dependencies** | None |

This Example Lab project demonstrates how to create a list displayed in tree view format.

---

## Explanation

This project works by gathering two lists as input from the user. The first list represents **companies** and the second represents the **managers** of those companies. There is a unit test provided in the debugger for ease of use.

Note: If the user decides to input their own lists it must follow this format. Only the company name in the companies list and the company name followed by the employee name in the managers list. ( 1st list - [company name] 2nd list [comapny name]: [manager name]) See the unit test for an example

These two lists are then run through two **ForEach steps**. The first loop iterates through the company names sending each company name individually to start the next ForEach loop which iterates through the list of managers. In order to ensure each manager is associated with the correct parent company the ForEach loop that iterates through the list of managers has a **R****ule** that checks if the current company name list item is contained in the manager name list item. Upon finding the matching manager list item for the current company list item that value is then passed into the **Merge to Plain String step**.

The Merge to Plain String step combines the company list item with the manager list item **separated by a "/" character**. This step is important because the tree view Form component requires the "/" character to separate the parent and child node. The output from the Merge to Plain String step is then passed into the **Add Item to List step**, where each item is added to the "New List".

Once the ForEach loops have cycled through the entirety of each list the "New List" created by the Add Item to List step is passed into the Tree View Form component. The "New List" data is then used to populate the Tree View component.

Reference Articles[Tree View Component](https://documentation.decisions.com/docs/tree-view-form-control)  
[ForEach Step](https://documentation.decisions.com/docs/processing-lists-of-items-with-the-foreach-step)  
[Building a List of Items](https://documentation.decisions.com/docs/23)  
[Using Rules](https://documentation.decisions.com/docs/using-rule-steps-in-a-flow)

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-641(1).png)

---

## Project Download

The examples attached were developed to be instructional and were not developed as officially supported components. For more information or to engage our service team to develop fully supported, production quality solutions, please contact services@decisions.com. Import the project below to a Decisions environment on version 6.9.2 or later using our [Importing/Exporting](https://documentation.decisions.com/docs/exporting-and-importing-overview) article.  
  
  
[ExampleLab[TreeViewFormat].zip](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ExampleLab%5BTreeViewFormat%5D.zip)

---