Difference between revisions of "Tree view"

From Resco's Wiki
Jump to navigation Jump to search
(Created page with "{{UI Components TOC}}{{WIP}} Tree view is one of the building blocks of Resco mobile apps. This special view displays records from multiple entities organized in a tree-li...")
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{UI Components TOC}}{{WIP}}
+
{{UI Components TOC}}
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 a list of contacts for each account.
+
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.
  
 
== Requirements ==
 
== Requirements ==
Line 7: Line 7:
 
== Define a tree ==
 
== Define a tree ==
 
# Edit an [[app project]] and select '''Components > Tree''' from the '''Project''' menu.
 
# Edit an [[app project]] and select '''Components > Tree''' from the '''Project''' menu.
 +
# Click '''New''' and enter a name for your tree, then click '''OK'''.
 +
# Select the parent '''Entity''', such as Account, and choose which '''View''' should be used to display its records.
 +
# 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.
 +
# Select the newly added entity and choose the appropriate view for it.
 +
# Add more entities as needed, then click '''Save & Close'''.
  
<!--
+
[[File:Create a new tree view.png|600px]]
# Click '''New''' and enter a name for your timeline, then click '''OK'''.
 
# Click '''Add Entity''' and choose an entity from the list. Related records from this entity will be displayed on the timeline.
 
# Configure which fields should be displayed on the timeline.
 
# Repeat steps 3 and 4 to add more entities as needed, then click '''Save & Close'''.
 
  
[[File:Configure tree.png]]
+
== Add tree to home ==
  
== Add tree to form ==
+
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.
# Edit a form.
 
# Click '''Add Timeline''' and select one that should be added to your form as a new form tab.
 
  
== Icons ==
+
# Edit the [[home screen]] of your app project.
 +
# Find your tree view on the '''Available Items''' pane in the '''Components''' section and add it to your home screen.
 +
# Save changes and publish the app project.
  
Timeline uses the icons from the "Home" directory of [[images]].
+
== Tree view in the app ==
  
== Timeline in the app ==
+
Synchronize your app to see the new tree view.
 +
 
 +
[[File:Tree view in action.png|600px]]
  
  
 
[[Category:Woodford]]
 
[[Category:Woodford]]

Revision as of 10:35, 2 July 2021

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.

Requirements

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

  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.
  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.png

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.

Tree view in the app

Synchronize your app to see the new tree view.

Tree view in action.png