XPages Data Views – Part 3: Collapsible Details

In the last post we looked at how to create a Data View, compute the summary column and add extra columns and categorization. This post will demonstrate how to add what I believe is the killer feature of the Data View control — the collapsible detail section, which provides the ability to make more information available, yet not clutter the screen with it until the user requests it.

Data View Series

Adding Details

Starting with one of the examples from the last post, we’ll add the person’s full address to the Details section.

To add information to the Details section, simply drag and drop a Computed Field control onto the detail facet of the Data View (the green circle). Then set the value of the field.

DataView_3_A

In order to get information from the underlying view entry, you’ll need to set the var property of the data view in order to provide that handle to the view entry. (I’ve set my var property to dvEntry.) I also set the Content type of the computed field to HTML, since I want to insert break tags between the lines of the address.

Here’s the value of my computed field:

var address = dvEntry.getColumnValue('address') + '';
address += dvEntry.getColumnValue('city') + ', ';
address += dvEntry.getColumnValue('state') + ' ';
address += dvEntry.getColumnValue('zip') + '';
address += dvEntry.getColumnValue('country');
return address;

(As your details get more elaborate, you’ll want to drag a panel or div into the detail facet and add controls there.)

In order to see the details, you’ll need to set one of two Display Options properties of the data view — Show details by default or Can collapse details.

DataView_3_B

Show details by default

The Show details by default property will automatically show the details of every entry in the data view. (It’s the same property as All Properties > basics > expandedDetail.)
Here’s what it looks like if I set the property:

DataView_3_C

Can collapse details

The Can collapse details property will default all detail sections to being collapsed and will provide an expand/collapse link on the right-hand edge of each entry in the data view. When you click on that link, it will toggle the details section for that entry. (This is the same property as All Properties > format > collapsibleDetail)

Here’s what it looks like if I set this property:

DataView_3_D

This is a tremendous feature! You can add any amount of additional data in the details without cluttering up the screen. This provides user-driven interactivity. It can also help your views load faster because you don’t need to show the details until they are requested.

I’ve used this section to create repeat controls with documents related to the parent document. It can contain a form to enter new data. (Both of these techniques were demonstrated in Part 2 of my series on the Data View on NotesIn9.) The possibilities are endless.

detailsOnClient

By default, the detail sections are not loaded. The expand/collapse link will hit the server to request the details as they are needed. However, you have the option to pre-load all of the detail sections on the client with the detailsOnClient property. (All Properties > basics > detailsOnClient)

Here’s the source of the first entry (while still collapsed) in the data view when the detailsOnClient property is false (or not set):

<tr id="view:_id1:dataView1:0:_row" class="lotusFirst">
<td class="lotusFirstCell" style="width: 100%">
<div>
<h4 id="view:_id1:dataView1:0_sum" style="margin: 0px; opacity: 1;">
<a id="view:_id1:dataView1:0_sumLink" href="/DataViews.nsf/%24%24OpenDominoDocument.xsp?databaseName=Server/LocalDev!!DataViews.nsf&documentId=E48D147AD012645905257838007ABBEA&action=editDocument">Adam Gonzales</a>
</h4>
</div>
</td>
<td class="lotusMeta lotusNowrap">212-774-8218</td>
<td class="lotusMeta lotusNowrap">Feb 8, 1952</td>
<td class="lotusRight lotusLastCell">
</tr>

Lines 4-6 define the summary column and lines 9-10 show the extra columns.

Here’s the source of the first entry when it is expanded:

<tr id="view:_id1:dataView1:0:_row" class="lotusFirst">
<td class="lotusFirstCell" style="width: 100%">
<div>
<h4 id="view:_id1:dataView1:0_sum" style="margin: 0px; opacity: 1;">
<a id="view:_id1:dataView1:0_sumLink" href="/DataViews.nsf/%24%24OpenDominoDocument.xsp?databaseName=Server/LocalDev!!DataViews.nsf&documentId=E48D147AD012645905257838007ABBEA&action=editDocument">Adam Gonzales</a>
</h4>
<div id="view:_id1:dataView1:0_detail" style="opacity: 1;">
<span id="view:_id1:dataView1:0:computedField1" class="xspTextComputedField">
392 Shinn Street
<br>
New York, NY 10021
<br>
US
</span>
</div>
</div>
</td>
<td class="lotusMeta lotusNowrap">212-774-8218</td>
<td class="lotusMeta lotusNowrap">Feb 8, 1952</td>
<td class="lotusRight lotusLastCell">
</tr>

Lines 7-16 show the detail section that has been inserted.

Here’s what the collapsed first row looks like when the detailsOnClient property is set to true:

<tr id="view:_id1:dataView1:0:_row" class="lotusFirst">
<td class="lotusFirstCell" style="width: 100%">
<div>
<h4 id="view:_id1:dataView1:0_sum" style="margin: 0">
<a id="view:_id1:dataView1:0_sumLink" href="/DataViews.nsf/%24%24OpenDominoDocument.xsp?databaseName=StepanDev/LocalDev!!DataViews.nsf&documentId=E48D147AD012645905257838007ABBEA&action=editDocument">Adam Gonzales</a>
</h4>
<div id="view:_id1:dataView1:0_detail" style="display: none">
<span id="view:_id1:dataView1:0:computedField1" class="xspTextComputedField">
392 Shinn Street
<br>
New York, NY 10021
<br>
US
</span>
</div>
</div>
</td>
<td class="lotusMeta lotusNowrap">212-774-8218</td>
<td class="lotusMeta lotusNowrap">Feb 8, 1952</td>
<td class="lotusRight lotusLastCell">
</tr>

Lines 7-16 define the detail section, but notice line 7 specifically — the detail data is there, but its style is set to display: none; When the row is expanded, the style simply changes to display:block; opacity: 1;

There’s a tradeoff. Set it to true if you can wait longer to load, but want faster toggling. Set to false for faster initial load, but every expand/collapse hits the server.

disableHideRow

One more property related to detail sections is disableHideRow (All Properties > format > disableHideRow). This lets you compute whether the expand/collapse link should be displayed on a row-by-row basis.

Extra Columns and Details

I mentioned in the first post that the Data View is not intended for the display a lot of extra columns. This comes into play when you have both extra columns and a details section.

The most important thing to be aware of is that details cannot use the space underneath extra columns.

You can see it in the Data View layout (the first screen shot on this page); the detail section’s width stops where the extra columns start.

Up Next

In the next post, I’ll show how to add icons to the Data View.

Advertisements

6 responses to “XPages Data Views – Part 3: Collapsible Details”

  1. bryanschmiedeler says :

    Getting a ton out of this series. My error before was using the Extra Columns when I should have been using details. This has helped immensely.

    I have a view with two levels of categorization. I can only seem to get one level of categorization to work. Any way that I can do that?

    Bryan

    • Brad Balassaitis says :

      Thanks!

      I haven’t tried it with a view with multiple levels of categorization, but I know that you can add more than one categoryColumn to the data view. Click that same plus (+) icon next to the categoryColumn property to add a second one and use that for the second level category column.

  2. Christian says :

    Thank you very much for this serie. It saves me a lot of time.

    Everything works well but if I filter the view using the Data->Filter by category name or Data->Filter by column value property the sorting doesn’t work properly anymore.

    In my case when I sort by a column the grid content disappear!! And if I continue to sort (ascending, descending, both …) and come back to the original sorting the grid content appear again.

    Have you got experience about that?

    Christian

    • Brad Balassaitis says :

      I have not tried to do that, but it doesn’t surprise me because the underlying Notes view isn’t set up to support that — it just has a separate index to sort an entire column of data. If you need to control the order after filtering, then you may need to write your own code to get the filtered document collection, sort it, then return it as the data source for the data view.

      • Christian says :

        Hi Brad, thanks for your reply.

        Ok, but for doing that should intercept the click event on clickable column hearders?
        And how can I do that?

        Otherwise, another way might be to sort using a separate “sort-by” combobox.

        Christian

  3. Mohamed yassine says :

    Hi ! I’d like to thank for all your “free” courses and tutorials, it reall jelps a lot to understand Xpages tech. But, and unfortunatel, we don’t have a data base to work wth for following your examples. So i hope in the future (as soon as possible) to share with us a database to work with ans i will be gread, and i’ll be so greatfull. thx a gain and sorry for the bad english 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: