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.
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.
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:
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:
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.
