Tree view

From Resco's Wiki
Jump to navigation Jump to search
User interface components

Tree view is one of the building blocks of Resco mobile apps. This special view displays records from multiple entities organized in a tree-like fashion. For example, a list of accounts combined with their contacts.


Tree view was introduced in summer 2021 release (14.1). An updated Woodford is required for configuration, and an updated version of Resco mobile apps is required to display it.

Define a tree

Tree views are defined and configured in Woodford.

  1. Edit an app project and select Components > Tree from the Project menu.
  2. Click New and enter a name for your tree, then click OK.
  3. Select the parent Entity, such as Account, and choose which View should be used to display its records.
    Even if you have multiple row designs configured using the Next Wide parameter, the tree view ignores the settings and uses the default row style.
  4. Add another level to your tree. Do one of the following:
    • If you want to add a child entity, select a child relationship in the Child Level field.
    • If you want to add a parent entity, select a parent relationship in the Parent Level field.
    • If you want to add the same entity as parent or child, select the relationship in the Recursive Field field.
    In our example, we added a child entity, Contact.
  5. Select the newly added entity and choose the appropriate view for it.
  6. Add more entities as needed, then click Save & Close.

Create a new tree view

Add tree to home

You can define as many trees as you need, but before you can use them in the mobile app, you have to add them as an item to the home screen.

  1. Edit the home screen of your app project.
  2. Find your tree view on the Available Items pane in the Components section and add it to your home screen.
  3. Save changes and publish the app project.

Synchronize your app to see the new tree view.

tree view used in Resco mobile apps

Add tree to form

Since release 14.3, it is possible to add tree views to forms.

  1. Edit an entity form.
  2. From the Tabs pane, drag Tree View to the Designer pane.
  3. Save changes and publish the project.

Tip: add filter to match the behavior of associated lists

When you add an associated list to a form, for example, a list of orders to a contact form, you will automatically see orders related to the contact. This kind of implicit filtering is not available for trees. However, you can set up the filter manually. In this example, we're using orders and contacts.

  1. Create a new view (type: "associated list") for the order entity (maybe clone the default view). Add a filter with a link to the contact.
  2. Create a tree view for orders and order products that uses the new view for orders.
  3. Add the tree to your contact form.

configuration related to tree views

In the screenshot below, you can compare the associated list of orders with the tree listing.

compare tree view and list view


Tree view doesn't take into account search configuration of used views. It always searches using the StartsWith operator on primary fields.

Was this information helpful? How can we improve?