Fancy Check Boxes and Radio Buttons for SharePoint
Saturday, I saw this tweet from my pal Michael Greene (@webdes03):
I usually look at what Michael retweets, and this one was intriguing. The link took me to Fancy checkboxes and radio buttons by Marko Dugonjić, a web professional from Velika Gorica, Croatia. In the article, Marko showed a deceptively simple, but very nice looking, way to show fancy check boxes and radio buttons using either JavaScript or jQuery.
That led me to retweet:
As you can see, Bil Simser wasn’t going to let me get away with saying it would make SharePoint look nicer without putting my money where my mouth is. I took that as a challenge, and here is the resulting live demo.
Here’s what it looks like in IE8:
And in Firefox. Note that it looks much better in Firefox because you get the rounded corners “for free” with border-radius: 10px;. The script is also a *lot* peppier in Firefox, at least on my monster laptop.
Rather than starting from scratch (and since the point was that this could work pretty much the same way in SharePoint), I just borrowed the jQuery and CSS from Marko’s article, and tweaked it a bit to make it work on my demo site. The trickiest part (if there was one), was to rearrange the elements in the DOM a bit to match Marko’s structure so that the CSS would apply. (If I *were* to start from scratch, I would just lay out the CSS differently.) What I did was to add the following jQuery up front to structure things correctly:
// There's no easy way to find one of these columns; we'll look for the comment with the column name "Request"
var searchText = RegExp("FieldName=\"Request\"", "gi");
// Loop through all of the ms-formbody table cells
$("td.ms-formbody").each(function() {
// Check for the right comment
if(searchText.test($(this).html())) {
// Wrap with the sizer div
$(this).wrap("<div id='sizer'></div>");
// Find all of the checkboxes, and for each...
$(this).find("span.ms-RadioText").each(function() {
// ...grab the current label for the checkbox...
var thisLabel = $(this).find("label").html();
// ...remove the current label...
$(this).find("label").remove();
// ...and wrap the input element with a label with the right class applied to it
$(this).find("input").wrap("<label class='label_check'>" + thisLabel + "</label>");
});
}
});
// There's no easy way to find one of these columns; we'll look for the comment with the column name "Options"
var searchText = RegExp("FieldName=\"Options\"", "gi");
// Loop through all of the ms-formbody table cells
$("td.ms-formbody").each(function() {
// Check for the right comment
if(searchText.test($(this).html())) {
// Wrap with the sizer div
$(this).wrap("<div id='sizer'></div>");
// Find all of the radio buttons, and for each...
$(this).find("span.ms-RadioText").each(function() {
// ...grab the current label for the radio button...
var thisLabel = $(this).find("label").html();
// ...remove the current label...
$(this).find("label").remove();
// ...and wrap the input element with a label with the right class applied to it
$(this).find("input").wrap("<label class='label_radio'>" + thisLabel + "</label>");
});
}
});
It’s not perfect. I’d probably rewrite the jQuery to handle changes to the two columns separately rather than having one change event, for instance. But all in all, doable, and pretty nice looking!
I am a beginner. Would it be possible to provide more detail for integrating this into a sharepoint form and more specific information on how to use the script. For example, does it need modifications, and if so where. Will the style for the all of the controls on the form change? Where does the css code go? What does it mean to //Check for the right comment ? At any rate, I’m sure people who’ve been writing in jQuery for a while will not have any trouble understanding what you’ve posted but people getting started will likely need a little more explanation. Thanks in advance for your help. The styling and radio buttons and checkboxes look very nice!
Steve:
This was more of a proof of concept exercise than anything else, and I didn’t intend it to be the full instructions on how to accomplish something. In fact, since the article I started from was just showing checkboxes and radio buttons, the whole thing would need to be expanded to work for other column types reliably.
I guess my question back to you would be: What are you trying to accomplish? Do you just want to try this for fun, or do you have a real application in mind?
M.
Marc,
I understand. The application is real and what I’d like to accomplish is a little better looking form controls then the out-of-the-box rather plain looking ones provided by default. The sample you have above for the Title, Request and Options fields (textbox, check boxes, and radio buttons) looks pretty nice, a little fancier then the default. Like many people getting started, I understand the jQuery works in conjunction with an images folder and css file, and that when it runs on the client it searches for the form controls in order to modify the style, but don’t understand the details. By the way, I think I’ve heard that some controls (for example, multiline text that’s either not plain or that exceeds some number of lines end up with a client-side implementation that is unlike the other controls) and for me skipping exceptions like this would to keep the script simplier be fine. So I’ll hope you may have the time to change this to something more then a concept exercise – an instructive script for doing this would be great. Thanks.
Steve
Thanks for the additional details. Did you take a look at the script, CSS, and images on the demo page? You can download each there.
The problem with using this as is (as I mentioned) is that it isn’t really a “fully baked” solution for SharePoint. This is one of those questions which falls into the area between “I can help you with a few blog comments” and “I’m a consultant and I can do this work as a project for you”. (I’m not trying to be a “bait and switch” guy or anything, but I really just intended this post to be a “see what kind of thing you can do” post.) Might you need some help?
The control you may have heard about is probably the dropdown control. When there are fewer than 20 options, SharePoint renders as a simple select, and with 20 or more options, it renders as an input/select hybrid with some script behind it. Of course, multi-selects are a different thing altogether.
M.
Thanks for letting me know. For now I’ll just have to use the blogs. But I appreciate all the great work you’ve done putting out helpful information on for the community on your prolific blog. Many thanks! Steve
I’m happy to help with specific questions you have along the way!
M.
Ok, here are several questions, but please only comment if you think your wider audience can also benefit. Thanks!
What do these code comments mean:
// There’s no easy way to find one of these columns; we’ll look for the comment with the column name “Request”
//Check for the right comment
Based on your sample I assume there should be a code block for each control being used so that style is applied to those as well?
Would the code block for a multi-line (plan text) control or the datetime control be much different then the pattern for other controls?
The controls I’d want to handle are : single line text, multi line text (plain), check boxes, radio buttons, dropdown (under 20 choices), datetime, and people (both single and multi) .
In the out of the box SharePoint forms, there’s a comment above each column’s control on the page that looks something like this:
Some types of columns, like Single line of text columns, have a nice title value we can use to “find” them on the page with the jQuery selector:
Checkboxes and radio buttons don’t have this nice “hook” with the title that we can use, so we have to rely on the comment contents. I don’t like doing this because it’s a little tenuous, especially if you customize the form and change the control in any tangible way.
The key here is to use a DOM inspector to see how the different types of controls are rendered on the page so that you can find them reliably.
M.