Skip to content

Tree Pages

Tree pages are declared in the same way as IFS Cloud Web, this feature is now available on all platforms.

Tree page usage

Now that it's possible to specify if the tree dialog opens when the tree page loads, tree pages are more useful that ever! For this reason, it's recommended that if you're using a detail page that will then navigate to a tree structure page, to simply use a tree page in the first place. The dialog can be set to not open when the page loads but you have the benefit of a full tree page without a further navigation required. An example of this scenario can be seen in FndTstOffline on the Companies list page. Here clicking an item in the list will navigate straight to a tree page that contains the detail page.

A possible use case for tree pages is to display different relationships between entities, for example different structures. There is not a way in mobile app to change the current tree from within a tree page. However there is an acceptable workaround for this limitation - use related pages/actions on the detail page to navigate to other tree pages where relevant.

For example, an entity called part could be visible in a tree called location (that represents the current physical location of the part) and product (that represents a collection of parts that make up a product). The part detail page could have 2 commands, one that opens each tree and both using a filter to open the same part as well as using the visible property as outlined in the "Preventing related pages navigation 'loops'" section to ensure the navigation command for the currently viewed page is not shown.

Maximum displayed depth

Only 5 nodes ‘deep’ are shown at any one time. This means that if a node is already displaying at a depth of 5 and it has children then a ‘+ More’ placeholder row will be displayed. Clicking this node will set the parent node as the current root node (effectively navigating you down the tree structure) and enable more child nodes to display whilst maintaining a maximum displayed depth of 5.

Load more

If the entity of the node is available offline (I.e. is not set as ‘online only’) then child nodes will display automatically expended (to the maximum displayable depth).

If the entity is ‘online only’ then the node will display as collapsed by default. This means the ‘expand’ arrow icon on the left of the row must be clicked to show child nodes. Online only entities are handled in this way to improve performance and ensure the tree dialog loads immediately. The only exception to this rule is if the root node on loading the tree is an online only entity. In this case the immediate child nodes will be loaded if the client is online, or an error will be thrown stating that the data cannot be loaded.

In a normal tree page (not one that requires navigating to a node) the nodes can be any mixture of entities, they could be available online or offline.

When loading a set of online only entities, it is possible not all data will be loaded in one request. The data is paginated to improve performance and reduce wasted bandwidth and server processing time. For this reason, if there are more records to load a ‘Load mode...’ row is shown in the tree. Clicking this row will load the next set of records available, repeating the process.

Clicking the ‘pin’ icon at the right of a row will set that records as the current root of the tree. This will mean that only children of that node will display in the tree list and the ‘breadcrumb’ view will appear at the top of the tree dialog. The breadcrumbs allow easily navigating back up the tree through the last 5 parent nodes. If you're more than 5 levels deep in a tree, then you will have to ‘unpin’ the nodes until you reach the root node. This special breadcrumb has a purple circle as its icon and the label 'Top'.

By using the breadcrumbs and pin to root feature of nodes that have children it is always possible to navigate throughout the entire tree.

@alert warning This is a special feature that requires the tree to be declared in a certain way for it to work! @end

In mobile app, a tree that can be navigated to must only have one node - the root node. This should then have a single connection that points to itself. This ensures that only one entity can be used in the tree and thus the navigation filter(s) provided must relate to that entity type.

A navigation command can be used to navigate to a tree node using a filter (for example from a list). The tree page will load with the detail page loaded with the record found using the filter. Navigating up and down the tree will behave as normal for tree page dialogs.

Specify tree page dialog open state

It is possible to specify when navigating to a tree page if the tree dialog should show open or closed on load. The property 'openselector' in the tree navigation block (where the filter is specified) can be added to determine this using an expression.

@alert info The 'openselector' property will default to false if not specified. This means that by default, tree page dialogs will not open when the page loads. @end

execute {  
      navigate {  
         tree RecursiveCompanyTree {  
            filter(Company, Company);  
            openselector = [true];  
         }  
      }  
   }  

Define tree dialog main action

There is now an app parameter called 'TREE_STRUCTURE_MAIN_ACTION' that can be set to either 'PinNode' or 'OpenNode', this is editable in the same way as other app parameters in the IFS Cloud Web.

Setting this property to 'PinNode' means clicking the main area of a tree page dialog node pins the node as the root node if that is possible. It means the secondary action on the right of the row will show a right chevron icon and open the node's page and close the dialog.

Setting this property to 'OpenNode' reverses this, meaning clicking in the main area of the tree node will open the page for the node (and close the dialog) and the right action button will display the pin icon where available and set the node to be root.

As reported in TEOFF-2580, it is potentially possible to cause confusion (to the end user) by having a navigation command on a page that navigates to a tree page using a filter that then displays the same page but inside a tree page. In this case the same navigation command would display and, when pressed, load the same page again, meaning the user could just keep loading the same page again and again, filling their navigation stack with unwanted previous pages. Fortunately, similar situations were also considered by the IFS Cluod Web online team - http://techblogs/uxx/?p=4795. In offline capable apps the same ‘IsTreeOpened’ property can be used to determine if the command should be shown when on a tree page.

command OpenCompanyInRecursiveTree {  
   label = "Open in tree";  
   visible = [component.RecursiveCompanyTree.IsTreeOpened = null];  
   icon = "forest";  
   execute {  
      navigate {  
         tree RecursiveCompanyTree {  
            filter(Company, Company);  
         }  
      }  
   }  
}  

This command sets the visible property to true if the current component is not RecursiveCompanyTree. This allows the command to show in normal detail pages and even other tree pages but not the one specified.