XPages Data Views – Part 7: Customizing the Summary Section

The ability to customize the summary section allows you take the interface of the Data View to another level. You’re not limited to just a link based on the summary column — you can take full control over the layout and add more information.

Data View Series

Custom Summary Examples

For the sake of comparison, here’s a data view with just a summaryColumn defined:

DataView7_1

Let’s take a look at a few examples of Data Views with customized summary sections.

Here’s an example from the second NotesIn9 video I did on the Data View control. It’s nothing fancy, but you can see the concept of adding more information to the summary. Additional information can still be included in the collapsible detail section.

DataView7_2

Here’s an example from IBM Domino Developer wiki. This summary includes graphics and 3 lines’ worth of information.

DataView7_3

Here’s an example from an application that I recently worked on with Kathy Brown, master of icons. The images are used to convey information without requiring labels that would repeat on every row.

DataView7_RAIN_Sample

The possibilities are endless.

Customizing the Summary

All you have to do to customize the summary section is to drag and drop a container control (panel or div) into the summary facet of the data view, then put whatever you want inside that container.

You’ll need to use the Data View variable (var property) to access information in the view entry.

Creating Your Own Link

One thing to keep in mind is that you will have to manually add the link to open the document if you create a custom summary.

In order to pick up the same styling as the default summary column data view link, use a Computed Field control, set it’s Content type to HTML and output the link as an <a> tag within an <h4> tag.
You’ll then need to build link to open the document.

Here’s an example, assuming the var property of the data view is set to rowHandle.

return "<h4><a href='PageName.xsp?openDocument&documentId=" + rowHandle.getUniversalID() + "'>" + rowHandle.getDocument().getItemValueString('FieldName') + "</a></h4>";
Advertisements

2 responses to “XPages Data Views – Part 7: Customizing the Summary Section”

  1. Jason says :

    Hi,

    Would this summary customization be possible on version 8.5.2

    I tried following your article , I got lost on this one. There is no facet on summarycolumn

    Thanks

    • Brad Balassaitis says :

      If you drop a Data View control onto an XPage or custom control, you’ll see a facet named “summary” with a green circle surrounded by a dotted line to the right of it. You can drag and drop a div control onto that green circle to add the container to the summary facet.

      Are you sure that you’re using the Data View control and not the View Panel control? In 8.5.2, it would not be there by default; you would need to install the Extension Library on your client and on the server in order for the Data View control to be available. (In the controls palette, the Data View control would be under “Extension Library” and not the one under “Container Controls”).

      As of version 8.5.3 or later, a subset of the Extension Library (including the Data View control) is built directly into the server and Domino Designer and would be available automatically.

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: