Tuesday, June 23, 2009

Radio Button Custom Field Choice – Going from Vertical to Horizontal with Java Script

By Roi Kolbinger - SharePoint Consultant
KWizCom Professional Services – http://www.kwizcom.com/

Have you noticed that field choice only gives a vertical view?
But what if I want a horizontal view?
When you want to customize your view but don't know how it can be very frustrating but there is always a way, you just have to know how…

For example:
I want to use the field "Gender" with two choice options – male and female.
This is how such a field would normally look in MOSS:




But I don't want to waste so much screen space. It would be much better to have something like this:



With a little Java script it's not so hard to go from vertical to horizontal. Here's how you do it:
Simply add this code to the form (add it in the SPD to NewForm.aspx and EditForm.aspx for the list that includes the view you want to change):




That all – now we have our Male/Female options in the desired view layout!

+++++++++++++++++++++++++++++++++++++++

For more helpful tips and guidelines please visit: http://kwizcom.blogspot.com/
NEW – You can now follow KWizCom on Twitter:
https://twitter.com/KWizCom

18 comments:

JDR said...

This looks very promising, any chance we could get a text version of the code (instead of an image?)

Thanks.

Shai Petel said...

here goes:

var inputs = document.getElementsByTagName("INPUT");
var radios = new Array();
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "radio")
radios.push(inputs[i]);
}
var html = new String();
var openTable = "<TABLE cellSpacing='0' cellPadding='0' width='100%' border='0'><TR>";
var closeTable = "</TR></TABLE>";
for (var i = 0; i < radios.length-1; i++)
{
if (i == 0)
html = openTable;
var obj = radios[i];
while (true)
{
if (obj.tagName == "TD")
break;
else
obj = obj.parentElement;
}
html = html + "<TD>" + obj.innerHTML + "</TD>";
if (radios[i].name != radios[i+1].name)
{
html = html + closeTable;
var obj2 = obj;
while (true)
{
if (obj2.tagName == "SPAN")
break;
else
obj2 = obj2.parentElement;
}
obj2.innerHTML = html;
html = openTable;
}
if (i == radios.length-2)
{
obj = radios[i+1];
while (true)
{
if (obj.tagName == "TD")
break;
else
obj = obj.parentElement;
}
html = html + "<TD>" + obj.innerHTML + "</TD>";
html = html + closeTable;
var obj2 = obj;
while (true)
{
if (obj2.tagName == "SPAN")
break;
else
obj2 = obj2.parentElement;
}
obj2.innerHTML = html;
}
}

JDR said...

Thanks.

Surendra Singh said...

Where is put Java Script code New form.aspx

Please let me know which line bewlo

Roi kolbinger said...

All you need is to find script code and add it there..
ex:
If you have this code
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script id="onetidPageTitleAreaFrameScript">
document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
</script>
...

Add it after </script>. Don't forget to wrap the code in a script tag
<script language="javascript" type="text/javascript">
CODE
</script>

Unknown said...

I am working on j2ee Application and I am using smartclient.

I have radiogroup.
{ID:"AccrualSummaryFrequency",name:"summFrequency",title:"Accrual Frequency",type:"radioGroup",valueMap:["Daily","Monthly"]},

This displys in vertical.But I want it as Horizontal.How I can get it?

Shai Petel said...

Hi Binal,

J2EE is a bit out of our scope here, but the javascrtipt principal should be similar if you can inject javascript to the page.

Anonymous said...

Hello, Thanks for this script.

Nevertheless, i have a question. What happens if you have 10 radio buttons.

Do they stay on one row or are they arranged on several rows ?

I would need my radio buttons to be on 2 or 3 rows ?

Could you tell me how to fo it ?

Thanks !

Cedric

Anonymous said...

Thanks so much for this info, I've been looking everywhere to find this solution!!! Thanks also to Roi for telling where to put the script :-)

Unknown said...

Great Work !!!

This code will work for one column(Gender) is we have more than one?? Please advice.

Shai Petel said...

Hi Royal,

The code posted should run for all radio buttons, why would you say it only runs for one column named "Gender"?

I dont understand, do you want to limit it only to one column?
If that is what you mean, you will have to add custom conditions there that will only take radio buttons of the fields you want to change.

I'm afraid this code is provided as is, but it shouldnt be too hard to limit it.

Unknown said...

Dear Petel,

Sorry for the confusion.
Let me explain, I have a user and admin forms.The user form have two columns with two radio buttons with an option ‘Yes’ and ‘No’.
Likewise the Admin form have 4 columns with 4 radio buttons and all ‘Yes’ and ‘No’.
When I ran the java scripts it made the horizontal radio buttons but in the user form it displayed like this
Level1: Yes No
Level2: Yes Yes
And in the Admin form
Level1: Yes No
Level2: Yes No
Level3: Yes No
Level4: Yes Yes
Basically the last Radio button had some issue. The last TD is not appended to the innerHTML.
Somehow I have managed to write the jquery for this and now the issue has been resolved.
script language="JavaScript" src=".. /scripts/jquery-1.4.2.min.js" /script
$(document).ready(function()
{
Your code here…..
} var arr = $('input[type="radio"]'), last = arr[arr.length - 1],ref = radios[radios.length - 1];
$(last).attr('id',ref.id);
$(last).val(ref.value);
$(last).next().html('No').parent().attr('title','No');
}); /script

NOTE: The User and the Admin forms are the customized one from the New and Edit form.

Shai Petel said...

Oh, perhaps we have a bug in our script,

Glad to see you resolved it - thanks for posting your fix!

Abhay said...

Hi Nice post Thanks buddy it's help me a lot

Abhay said...

nice blog thanks buddy

Anonymous said...

Hello Shai,

I was looking for how to enable the "Gender" in the user properties so then he can have a choice.

Then I see that you have enable it ! How have you done that?! I'm stuck for this "feature".

Thomas said...

Hello,

how do you enable the gender choice in Sharepoint 2010 ?

I'm looking for this property for the user profile page ! But I dont found it.

Shai Petel said...

Hi Thomas,
This example is reffering to any list where you manually add a radio button choice field.

It is just an example, not something from the user profile.

If you do have a question about the user profile feel free to email me and I'll try to help.