Hello,
I'm sure lots of people have encountered this problem before and have come up with different, and even the same, solutions to this. This is an account of how I did it...
Imagine having a form that allows people to pick their ethnicities. Since interracial marriages is a growing trend these days, you'll need to use checkbox controls instead of the old-school radio button controls:
[ ] African (field name = 'African')
[ ] Dominican Republican (field name = 'Domican_Republican')
[ ] Irish (field name = 'Irish')
[ ] Martian (field name = 'Martian')
When the form is published to SharePoint, you may want to have all of the checked values show up in one column instead of four individual columns. Since checkbox controls, unlike radio button controls, hold a collection of values instead of just one value, you'll need to do some coding in order to accomplish the simple feat of displaying multiple checkbox values in one SharePoint column.
One way to do it is to create a hidden field; let's call it origins. This field will contain a concatenated, comma-separated list of the checked values that will be displayed on SharePoint. In the Data Source panel, create a container (parent) group for these checkboxes; let's call it origins_group. The origins_group is optional, but is highly recommended unless you are masochistic and want to create an event handler for each checkbox control ;).
The next step is to create an OnAfterChange event handler for the origins_group group, leveraging the behavior that "bubbles" changes from the nested checkbox controls (children) to the parent origins_group. This function basically walks through the origins_group node and concatenates all of the values in its child nodes that are elements (nodeType = 1) and contain the "true" value (checked). There are a couple of regular expressions that convert underscores to spaces and removes the trailing comma in the concatenated string before it is ouputted to the origins field.
To prevent the origins_group OnAfterChange event from firing needlessly, you should introduce conditional criteria such as if (eventObj.Operation=='Insert') to ensure that the event is only triggered when a node is being inserted (every checkbox change results in the delete operation of the old value followed by a node insertion of the new value).
Here's the complete code:
var oOrigins = XDocument.DOM.selectSingleNode('my:myFields/my:origins');
var oOriginsGroup = XDocument.DOM.selectSingleNode('my:myFields/my:origins_group');
function msoxd_my_origins_group::OnAfterChange(eventObj) {
if (eventObj.IsUndoRedo) {
// An undo or redo operation has occurred and the DOM is read-only.
return;
}
// A field change has occurred and the DOM is writable. Write code here to respond to the changes.
if (eventObj.Operation=='Insert') {
var str = '';
var arr = oOriginsGroup.childNodes;
for (var i=0; i<arr.length; i++) {
if (arr[i].nodeType==1 && arr[i].text=='true') {
str += arr[i].nodeName.replace(/my:(\w+)/,'$1, ');
}
}
str = str.replace(/_/g,' ');
str = str.replace(/, $/,'');
oOrigins.text = str;
}
}
Cheers,
Tom