Archive | August 2013

Article Published in The VIEW: Streamline Deployment and Improve Usability of Editable View Columns in XPages with a Flexible Custom Control

My article on enhancing editable view columns has been published in The VIEW (subscription required). This article builds on the concepts introduced in the first part and shows how to create a reusable custom control that handles several data types and also provides an ‘undo’ feature for each edited value. These enhancements make it much easier to deploy editable columns in multiple places while only requiring one implementation of the logic.

Abstract

The first article of this series showed how to build editable columns, a feature that makes application usage more efficient for your users. This article will show not only how to enhance that functionality, but also to make the deployment and usage of editable columns much more efficient for you as the developer.

The following enhancements will be added:

  • Improve usability by providing a failsafe and giving the user the option to revert
  • Trigger the field update automatically when the user leaves the field
  • Create an editable column custom control to provide easy implementation and reuse
  • Handle multiple data types in order to further facilitate reuse
Advertisements

Looking Back at MWLUG

Check out my recap of MWLUG on SocialBizUG.org and add your memories!

Looking Forward to MWLUG

MWLUG is fast approaching and I’m looking forward to presenting two sessions on XPages development.

AD104: Living on the Grid – Unlock the Power of Dojo Data Grids

I’ll cover how to create a grid with the Dojo Data Grid control and take a look at the key features of the grid and grid columns. I’ll show how to convert it to an EnhancedGrid and add enhanced plugins for even greater functionality. Finally, I’ll demonstrate how to categorize grid data.

AD102: Just the Facets Ma’am

There’s a lot of great content in this demo-packed session that I’ll have the pleasure of co-presenting this session with Paul Della-Nebbia.

We’ll talk all about facets, including how you’re already using them in existing controls and how you can add them to your own custom controls. We’ll talk about some create controls that make heavy use of facets for customization. Last, but not least, we’ll talk about the important differences between the Switch Facet and Dynamic Content controls.

Hope to see you there.

XPages Data Views – Part 9: Multi-Column Layout

Another great feature of the Data View control is its ability to easily provide a multiple-column layout. In this post, I’ll show you can use that property to let the user dynamically determine the number of columns to display.

Data View Series

Multiple Column Layout

If your data lends itself to a multiple-column layout (e.g. a business card-style display), you can easily achieve this by setting the multiColumnCount property of the Data View. (All Properties > format > multiColumnCount)

DataView9_A

You can still expand/collapse detail sections when multiple columns are used.

Giving the user control

Taking this a step further, you can compute the property and give the user the ability to adjust the display as desired.

The steps are virtually the same as shown in the last post on sorting and filtering.

1) Put a combobox on the page with options for the number of columns to display. (You can event put it in one of the pager top facets of the data view to tie it in.)
2) Bind the combobox to a sessionScope variable
3) Set the onchange event of the combobox to trigger a partial refresh on the data view
4) Compute the Sort column property to return that sessionScope variable

XPages Data Views – Part 8: Sorting and Filtering

There are several properties available for searching and filtering a data view. In this post, I’ll show how to use them.

The Data View properties make a few of these features prominently available.

DataView8_A

Data View Series

Sort column

The Sort column property allows you to choose a column on which the data view should be sorted. The combobox will give you a list of all columns in the underlying view.

However, you need to be aware that the underlying view column must have that sort option available (“click oncolumn header to sort”) or it won’t work.

The data view will be sorted the way the underlying view is sorted by default. You can choose an existing column, but you can also compute the value.

To add even more flexibility to your view, you can provide links or a combobox to let the user choose the sort option.

Here’s how you can make it happen:

1) Put a combobox on the page with a list of columns that are viable sort options for the view. (You can event put it in one of the pager top facets of the data view to tie it in.)
2) Bind the combobox to a sessionScope variable
3) Set the onchange event of the combobox to trigger a partial refresh on the data view
4) Compute the Sort column property to return that sessionScope variable

Filter by column value

The Filter by column value property sets the keys property of the data source (which is also available on other view data sources).

You can enter or compute a value here that will set the ‘keys’ property and filter out the data based on the sorted column in the view, which is the default sorted column or the column defined in the Sort column property.

Just like with a search field, you can provide the user a field to type and filter the data. You can provide a highly flexible experience for the user if you allow them to choose both the sort column and the filter to apply to that column.

Search in view results

Searching and category filtering work the same as view data sources in several other data display controls. For an example of how to implement searching, take a look at this post I wrote about searching with the View Panel control.

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>";