Quick Search
Social Sites
Lotus Community


« XPages Guru Webinar | Main | Lotusphere 2011 wrap-up »
Thursday
Apr282011

How to collapse a categorized view in an XPage

If you've got a categorized view and you want to display it in an XPage, that bit is simple, but what if you want to add buttons which allow the user to expand and collapse the view? This is one of those things which is unnecessarily complicated in XPages, there's no checkbox or simple command and there is a gotcha in the view design as well.

So the first step is to write the onClick code for the collapse button:

var viewPanel = getComponent("viewPanel1");
var model:com.ibm.xsp.model.domino.DominoViewDataModel = viewPanel.getDataModel();
var container:com.ibm.xsp.model.domino.DominoViewDataContainer = model.getDominoViewDataContainer();
container.collapseAll();

The same code can be used for the expand button, just replace the last line with "container.expandAll()".

So that's painful to write from scratch, but something which can be copied and pasted in future. But now for the problem.

If you click the collapse all button and all of the data in the view disappears then you'll need to go into your view design, go to the third tab of the view properties and make sure that the "Don't show empty categories" is *not* checked. This seems to be a bug which was introduced some time in the 8.5.1 / 8.5.2 timeframe. 

Reader Comments (2)

Hi Matt,

there seem to be some other gotcha - if you collapse all using this method, when having paged down to a page which does not exist when everything has been collapsed, you end with an empty view (which confuses the users, or at least me).

So my collapse all button has an additional "gotoFirstPage()" to avoid this behaviour:


var viewPanel:com.ibm.xsp.component.xp.XspViewPanel = getComponent("viewPanel1");
try {
viewPanel.gotoFirstPage(); // jump to the start, as we might be on a page which won't exist when everything is collapsed
} catch (e) {
// if this is not possible (i. e. there is only one page), just ignore this
}
var model = viewPanel.getDataModel();
model.getDominoViewDataContainer().collapseAll();

Hans-Peter

April 28, 2011 | Unregistered CommenterHans-Peter Kuessner

Good point Hans-Peter.

April 28, 2011 | Unregistered CommenterMatt White

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>