Collapsible Operations
Collapsible operations are a technique which allows the user to adjust the amount of data which is visible at any one
time. Collapsing an operation set frees up “screen real estate” and can result in a less cluttered look for your application.
Here is an example of a page which is using an execution group to display results from two different operations at once.
Figure 1:1
A default execution group containing two operations which are not collapsible.
Next is the same page, with collapsible operations enabled. The bottom operation has been collapsed.
Figure 1:2
The bottom operation is collapsed.
When the user clicks on the title of a collapsible operation, that operation’s data is collapsed and is no longer displayed as the image above shows.
Clicking on the title of a collapsed operation will cause that operation to be expanded and the data will become visible once again.
Creating Collapsible Operations
Making an operation collapsible takes only a single step. Adding the “collapsible: true;” property to the TableDisplay{}
property group in your operation will make that operation’s results table collapsible:
TableDisplay {
collapsible: true;
}
The DetailDisplay{} property group has an identical property for controlling whether or not the details display is
collapsible:
DetailDisplay {
collapsible: true;
}
The two settings in the TableDisplay{} and DetailDisplay{} property groups are independent. Whether or not the details
are collapsible has no bearing on whether the results table is collapsible.
There is an additional true/false property available in both the TableDisplay{} and DetailDisplay{} property groups:
the collapsed property specifies if the operation’s results or details should be in a collapsed state when they are initially
rendered.
TableDisplay {
collapsed: true;
}
DetailDisplay {
collapsed: true;
}
Normally titles are only shown with a results table, and not with a row’s details; however whenever a details screen is
collapsible, that details section will be displayed with a title.
Showing the title for the row details gives the user information about the contents of a collapsed details section. If you
want to display a different title for the details than the operation’s main title, you can use the title property of the
DetailDisplay{} property group to specify a title which will only be used for the details.
DetailDisplay {
collapsible: true;
title: Branch Details;
}