Taming the jumpy categorized Views in XPages

I am not a fan of categorized views in web applications and have suggested alternative uses before. However beautiy is in the eye of the beholder, so categorized views are used. When a category is rendered it sits on its own tablerow (tr) in a tabletag (td) that has a colspan attribute. This effectively disables the column width settings for your view until you expand the category to show a full row of data resulting in some "screen jumping". While that won't sink the Titanic it is a little odd. Short of rolling your own rendering using a repeat control, there is a fix consisting of 2 JavaScript functions (one for the server, one for the client and a little addition in the source code panel. This works in all categorized views. However when you have a column with a column total rendering might be different since XPages doesn't render the colspan attribute then. Lets get started. Open your source pane and locate the view panel and the xp:this.facets. Here you insert a scriptBlock like this:

{xp:this.facets}
{xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager1"}
{/xp:pager}
{xp:scriptBlock xp:key="south" id="scriptBlock1"}
{xp:this.value} {![CDATA[#{javascript:return getClientJSforTableLayout("viewPanel1");} ] ] } {/xp:this.value}
{/xp:scriptBlock}
{/xp:this.facets}

(Replace { } with < and > except inside the CDATA section). Then you add 2 JavaScript libraries to your XPage: CatViewPatches.js and TableSupportFunctions.jss. They will fix the column width. One caveat: you have to specify the width for all columns otherwise the unspecified columns get 100/{number-of-columns}% width assigned.The ServerSide JS:

function getClientJSforTableLayout (tableID ) {
/**
* This code has as result JavaScript source code that is send down to the client]
*/
var curTable = getComponent ( "viewPanel1" ) ;
var curID = getClientId ( "viewPanel1" ) ;
var tablewidth = extractWidthFromStyle (curTable. viewStyle ) ;
var result = "fixCatTableWidth(\"" ; // This holds the JavaScript we return to the browser
result += curID + "\",\"" ;
// Here we compute the sizeString
var kids = curTable. getChildren ( ) ;
var defaultPercent = Math. floor ( 100 /kids. size ( ) ) + "% " ; // You have to love flexi data types
for ( var x in kids ) {
var styleCandidate = x. style ;
if (styleCandidate == null ) {
result += defaultPercent ;
} else {
var candidate2 = extractWidthFromStyle (styleCandidate ) ;
if (candidate2 == "" ) {
result += defaultPercent ;
} else {
result += candidate2 ;
}
}
result += " " ;
}
result += "\",\"" +tablewidth + "\");" ;
return result ;
}
function extractWidthFromStyle (styleCandidate ) {
var result = "" ;
var whereisWidth = styleCandidate. indexOf ( "width:" ) ;
if (whereisWidth < 0 ) {
result = "" ;
} else {
var workString = styleCandidate. substr (whereisWidth + 6 ) ;
var hasSemiColon = workString. indexOf ( ";" ) ;
if (hasSemiColon < 0 ) {
result = workString ;
} else {
result = workString. substr ( 0 ,hasSemiColon ) ;
}
}
return result ;
}

The Client Side JS:

function fixCatTableWidth (tableID , sizeString , tableSize ) {
// Reset the outer table width
var outer = dojo. byId (tableID + "_OUTER_TABLE" ) ;
if (tableSize == null || tableSize == "" ) {
outer. style. width = "100%" ;
} else {
outer. style. width = tableSize ;
}
var newWidth = sizeString. split ( " " ) ;
var max = newWidth. length ;
// Get the table and all header elements
var table = dojo. byId (tableID ) ;
var allHeaders = table. getElementsByTagName ( "th" ) ;
var maxHeaders = allHeaders. length ;
for (i = 0 ;i <maxHeaders ;i ++ ) {
var curWidth = (i > max ) ? newWidth [max ] : newWidth [i ] ;
allHeaders [i ]. style. width = curWidth ;
}
}

As usual: YMMV

Posted by Stephan H Wissel on 29 June 2010 | Comments (6) | categories: XPages

posted by Atin Palekar on Friday 02 July 2010 AD:
Hi Stephan,

Thanks for the workaround.

For a categorized view not containing totals, I have been able to resolve the jumpy behavior by carefully setting XPages viewpanel & viewcolumn properties as follows
1. Set viewpanel width to a 100%
2. Do not specify any width for the view column headers and set the disableTheme property to true
3. Specify the width for ALL view columns in percent so that the total adds up to 100%
4. Care needs to be taken so that width does not fall below the minimum needed to display contents (eg. icon/checkbox)
5. For categorized & view icon columns, set disableTheme to true for allowing width to be reduced as per need
6. For categorized columns, set white-space:nowrap in the style attributes to prevent wrapping of categories
The only problem here is that view icons do not display if width is specified for the concerned column. But for view icon columns, if I specify width as required in step 4 and then remove it, things seem to work fine. This method seems to be working in IE7 & 8 with most view display requirements at our end. It can also be adapted for total width other than 100% (or fixed width in pixels, etc) as long as the sum total of individual column widths adds up to the total width of the view panel. Would appreciate your expert opinion on whether there could be any loopholes where this method should fail.

My main problem was for categorized views with totals, where XPages does not seem to span the category values across columns, thus disturbing column width settings. Though the JS workaround did not work directly, I was able to apply the technique described to check which of the view columns are categorized (in SSJS), loop thru all view data rows, change their colspan as needed and remove interim columns (in CSJS).

Not sure if these workarounds are ready (in terms of different environments, browsers, etc) to be posted for re-use but in tandem they should provide the final pieces for developers looking to build Notes-client like views in XPages with exactly matching look-n-feel

Thanks again

posted by Stephan H. Wissel on Monday 05 July 2010 AD:
Setting the view panel parameters doesn't work for all browsers, so that's what this code is all about.
Views with Totals are a little more tricky. It can be solved. However you need to be very careful what you wish for (You might just get it). Your guideline for UI should not be " must look like Notes" - we had that in the R5 days. It better be " a modern web UI". There is a very good guideline available from IBM called the IBM OneUI. Looking at it I can't find a categorized view there. Going back to my original suggestions how to handle categorized views I can see the need for breadcrumbs, Tree controls, TableGrids or eventually a Dojo TreeGrid (check the original example). You would need to create a custom control once and then use that instead of the view control. There are also some very interesting things coming in 8.5.2 - but that's a story for another day.

As usual: YMMV

posted by Wayne Allen on Monday 22 November 2010 AD:
Stephan,

Could you post an example of how to append a button column to the end of a view. What I am aiming to achieve is to add a button to the end of every view row that lets users delete the document.

Cheers,
Wayne

posted by Sanjeet Uchil on Monday 03 September 2012 AD:
I have followed the instructions as mentioned. But it doesn't seem to work. What could be the issue? I have two category columns and I am working on 8.5.1

posted by Stephan H. Wissel on Monday 03 September 2012 AD:
@Sanjeet: what do you expect to happen, what did happen and what happens on a current version? I don't code for older versions