viewPanelHelper - To keep selection of documents in a view

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:viewPanel id="viewPanel1">
		<xp:this.facets>
			<xp:pager partialRefresh="true" layout="Previous Group Next"
				xp:key="footerPager" id="pager1">
			</xp:pager>
			<xp:scriptBlock id="scriptBlockViewPanel" xp:key="south">
				<xp:this.value>
					<![CDATA[
						dojo.addOnLoad( function(){
							dojo.query(".xspCheckBoxViewColumn").connect('onclick', function() {
							    viewPanelHelper.addDoc( this.id, this.checked, this.value ); 
							    viewPanelHelper.updateDataField('#{id:viewPanelSelectedIds}');
							});
							viewPanelHelper.rebuildDocSelection();   
							viewPanelHelper.updateDataField('#{id:viewPanelSelectedIds}');
						});
					]]></xp:this.value>
			</xp:scriptBlock>
			<xp:inputHidden id="viewPanelSelectedIds" xp:key="southEast" />
		</xp:this.facets>
		<xp:this.data>
			<xp:dominoView var="view1" viewName="All"></xp:dominoView>
		</xp:this.data>	
		<xp:viewColumn columnName="DocUNID" id="viewColumn1" showCheckbox="true">
			<xp:viewColumnHeader value="DocUNIDs" id="viewColumnHeader1" />
		</xp:viewColumn>
	</xp:viewPanel>
		
	<xp:scriptBlock id="scriptBlockViewPanelHelper">
		<xp:this.value>
			<![CDATA[			
			/**
			 * viewPanelHelper
			 *
			 * keeps selection of a view panel
			 * stores data in hidden input field
			 * @author Sven Hasselbach
			 * @category CSJS
			 * @category Helper
			 * @version 1.3
			 */
			viewPanelHelper = {
				selDocs: function(){ new Array() },
				
				addDoc: function( id, checked, noteId ){
					viewPanelHelper.selDocs[ noteId ] = { 'id': id, 'checked': checked , 'noteId': noteId }; 
				},
				rebuildDocSelection: function (){ 	
					dojo.query(".xspCheckBoxViewColumn").forEach(
    					function( obj ){
        					if( viewPanelHelper.selDocs[obj.value] )
        						obj.checked = viewPanelHelper.selDocs[obj.value].checked;
    					}
					)
   
				},
				getSelectedNoteIds: function(){
					var list = "";
					for( e in viewPanelHelper.selDocs ){
						if( viewPanelHelper.selDocs[e].checked === true ){
							if( list !== "" ) list +=",";
							list += viewPanelHelper.selDocs[e].noteId;
						}
					}
					return list
				},
				updateDataField: function(id){
					dojo.byId(id).value = viewPanelHelper.getSelectedNoteIds();
				}
				
			}
			]]>
		</xp:this.value>
	</xp:scriptBlock>

	<xp:button value="Test" id="buttonTest">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete">
			<xp:this.action>
				<![CDATA[#{javascript:
					var value = getComponent("viewPanelSelectedIds").value;
					_dump( value )}]]>
			</xp:this.action>
		</xp:eventHandler>
	</xp:button>
	
</xp:view>





This snippet helps to keep the selection of documents in a view panel. Works with pagination and categorization.
It is not required to modify the view: Only the script and the hidden field must be added to the facets section
of the panel and the CSJS class "viewPanelHelper" must be added to the XPage (the class is loaded only once and
can be stored in a separate CSJS resource file).

The selected documents are stored in the hidden field "viewPanelSelectedIds".

The view used in this example ('All') has a single coulmn named "DocUNID".
The button demonstrates how to access the selected documents.

To use other facets of the view panel, here is a available list: http://hasselba.ch/blog/?p=793

XPages
Sven Hasselbach
November 28, 2012 4:09 AM
Rating
328

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



4 comment(s)Login first to comment...
Steven Rieger
(at 22:10 on 10.10.2015)
I can not seem to get this code to work. I've double checked everything is added as you said to but as soon as I collapse a category it unchecks all the boxes.
Can I send you my code to look at ?
Ryan Case
(at 18:17 on 01.10.2015)
Ok, I solved it. I had to utilize info from Brad Balassaitis ( http://xcellerant.net/2013/01/14/viewpanel_onclientload/ ) to move the csjs from the facet to a non-supported onClientLoad event of the viewPanel. The caveat of this, as he mentions, is that you now can only edit that custom control via the package explorer by opening in the XML editor, but that's not hard. If you try the normal XSP editor, it will just hang.
Ryan Case
(at 14:35 on 30.09.2015)
This seems to work except for re-checking the checkboxes after you return to a page you already selected documents on. I'm trying to find/fix the issues but haven't been able to yet. It's firing the rebuildDocSelection function but not executing something correctly in there. It works if you call that function from the test button however. Also, you must put the scriptBlockViewPanelHelper scriptblock ahead of the viewPanel (or in an included script libary) to avoid errors upon loading.
Naseer Mohammed
(at 10:19 on 24.03.2013)
Hi, thanks for this excellent snippet, I have placed this in my Custom Control and it is working great, the only issue I have is that the view panel is not getting 100% width.

Regards,