Function

$().SPServices.SPArrangeChoices

Certification

Certified for SharePoint 2007 Certified for SharePoint 2010

Functionality

The SPArrangeChoices rearranges radio buttons or checkboxes in a form from vertical to horizontal display to save page real estate. If the column has "Allow 'Fill-in' choices:" set to 'Yes', the fill-in option will always remain at the bottom of the controls.

Important notes:

  • In versions prior to v0.5.8, SPArrangeChoices did not work with Survey questions. If you want to use this function with Surveys, please upgrade to v0.5.8 or greater.
  • If you are working with a customized form, you'll need to use a little trick to get this function to work. (Thanks to alexlee797 for pointing this out.) You'll need to add the following line:
    <xsl:comment>FieldName="Display Name"</xsl:comment>
    just above the <SharePoint:FormField> in the XSL of the custom form. You should replace 'Display Name' with the same value you supply for columnName in the function call.
    This is a little kludgy, but SharePoint doesn't render anything else for us to "hook into" for the radio button or checkbox columns. In an uncustomized form, this comment is already in the page; when you customize the form you need to add it manually.

Syntax

$().SPServices.SPArrangeChoices({
	listName: "",
	columnName: "",
	perRow: 99,
	randomize: false
}); 

listName
If specified, this list will be used to look up the column's attributes. By default, this is set at runtime to the list name for the current form's context based on the form's URL. You will not generally need to specify this value.

columnName
The DisplayName of the Choice column in the form. This function works with both radio buttons and checkboxes.

perRow
The maximum number of choices to show per row.

randomize
If true, randomize the order of the options.

Examples

The screen snips below show the before and after views of columns with checkboxes (Lead Source) and radio buttons (Radio Buttons) when the following calls to SPArrangeChoices are in place.

$().SPServices.SPArrangeChoices({
	columnName: "Lead Source",
	perRow: 2
});
$().SPServices.SPArrangeChoices({
	columnName: "Radio Buttons",
	perRow: 7
});

Lead Source before:

Lead Source after:


Radio Buttons before:

Radio Buttons after:

Last edited Nov 15, 2010 at 2:42 AM by sympmarc, version 11

Comments

logintoreality Apr 3 at 2:37 AM 
this is great little script!! wonder how to pass in multiple columnName values instead of redoing the script!

photogeorge Jun 13, 2013 at 6:29 PM 
Marc, this information is great. I'm new to programing though. I have a custom form with about 40 questions with radio options for 1-5. Where do I need to place this code in this form? Also, if I am understanding properly, this code would need to be placed in every single spot it is needed, is there a place or code that could do it all from one location rather than re-listing the code so many times? Thank you once again. George

peoniessmiles Apr 3, 2013 at 3:18 PM 
I ahve a SharePoint 2007 site, but the radio buttons have not changed their direction.

sathyaseelan Jan 31, 2013 at 6:54 AM 
Its really wonderful.........................thanks man

pmbaokhanh Aug 1, 2012 at 7:03 AM 
<xsl:comment>FieldName="Something"</xsl:comment> make this field failed to save. I have a choice field with about 40 options. Can that be the problem?

cepes Apr 7, 2012 at 1:48 PM 
Fabulous Marc. Thanks for this.
Charlie Epes

rrediska Nov 7, 2011 at 8:18 AM 
hi,
i was wondering if it's possible to dissplay by columns a long list of sources on SP Advanced search OOB WP?

sympmarc Jun 13, 2011 at 4:01 AM 
Awrex: Please post your questions in the Discussions. You can change the display using CSS. Since many people have custom CSS applied to their sites, I don't try to predict what the output will look like; I simply structure it cleanly. M.

Awrex Jun 10, 2011 at 5:14 PM 
Sorry sent the wrong link... http://i.imgur.com/CAPwp.png

Awrex Jun 10, 2011 at 5:13 PM 
This is awesome, it's working as displayed. The only question I have is can I clean up the formatting on how the fields are displayed?

Example - http://i.imgur.com/EfInD.png

iOnline247 Jun 8, 2011 at 9:48 PM 
@parriwg This function works great in 2007. I'd suggest posting the problem you are facing in the Discussions forum. Most of these comments are rarely seen and are very limited in what you can post. Feel free to start a thread in the Discussions and we'll look at it.

parriwg Jun 8, 2011 at 8:20 PM 
I'm thinking this is what I should have... is that correct?

<script type="text/javascript" src="http://MYSITENAME/SharePoint/PowerUsers/CodeLibrary/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="http://MYSITENAME/SharePoint/PowerUsers/CodeLibrary/jquery.SPServices-0.6.1.min.js"></script>

<script type="text/javascript">
$().SPServices.SPArrangeChoices({
columnName: "Lead Source",
perRow: 2
});
</script>

iOnline247 Mar 24, 2011 at 2:49 PM 
@ironman99 This function works great in 2007. I'd suggest posting the problem you are facing in the Discussions forum. Most of these comments are rarely seen and are very limited in what you can post. Feel free to start a thread in the Discussions and we'll look at it.

ironman99 Mar 24, 2011 at 2:24 PM 
Hi.
does this work with moss 2007? I've been trying to get this to work, but with no luck.
thanks,

ValliMarco Jun 4, 2010 at 8:29 AM 
This work with SharePoint 2010 in customized form and with the <xsl:comment> trick... Nice Job!!! :)