Overview
The Collapsible Section and Category View builders perform some nice automation for you, but sometimes you want more control and/or the ability to work around limitations in these builders. It turns out that building a collapse/expand UI using base Portlet Factory builders is pretty easy, and doing so can allow you to add features not present in the higher-level builders.
General Approach
The basic approach to building an expandible display includes the following:
- maintaining a data structure to track which sections are expanded
- assigning a unique ID to each section
- inserting an icon which will change depending on the expansion state of the associated section
- using Visibility Setters to hide collapsed section contents; alternatively, the CSS display attribute can be used for a pure-client approach
- adding a Link builder to connect the icon and section header to a "toggle visibility" action that updates the data structure and refreshes the page, or part thereof
"Only One Expanded Section" Example
Sometimes one would like to have a series of expandable sections where expanding one section would collapse all other expanded ones. This is not directly possible using Collapsible Section or Category view, but a manual approach is straightforward. In particular, the "data structure" from the general approach can just be a single item variable. The "ManualCollapse_OnlyOneExpanded" example shows this implmentation in action:
You can download this sample here.
Multiple-Level Expand/Collapse
Collapsible Section does not always work smoothly with multi-level, repeated data, where some expandible sections are contained inside others. The attached example shows how to use some of the basic techniques from the previous example to build a hierarchical expandable display. The general approach above can be used to enable multiple levels of expand/collapse regions, using a Java Set object to hold the list of expanded sections. The "ManualCollapse_NestedRepeats" sample demonstrates one way to implement this requirement.
This model uses a base model which it pulls in using Imported Model; this base model is responsible for creating the basic outline or hierarchical display, using three nested Repeated Regions, while the ManualCollapse_NestedRepeats model adds the necessary builder calls to create the expand/collapse display.
You can download this sample
here.
Manual Category View
Building a model that behaves like Category View without Category View is a bit more difficult, but still quite doable. The basic approach above applies, but is made a bit more complex by the necessity to maintain a page automation tabular structure while adding category rows with specific visibility. The ManualCategoryView sample builds a UI that works similar to that made by Category View, while adding the ability to do partial-page refresh.
This sample can be downloaded
here.