Horizontal Radio Buttons in SharePoint

Scenario

You need to create a new item form for a multiple choice based list, where a visual scale is the most appropriate way of displaying the options. Something simple, very user-friendly, that also happens to be relatively easy to create with just a few tweaks to the standard SharePoint radio buttons.

This walk-through is split into two blogs; the first (this one) will cover the basic set up, and how to display your SharePoint radio buttons horizontally rather than vertically, and the second blog will cover the styling side using CSS.

Skills required:

• Creating custom lists in SharePoint
• Basic SharePoint Designer knowledge, mainly creating a New Item form
• CSS/CSS3 – at least to a basic standard, though largely explained throughout
• JavaScript & JQuery (you’ll need a JQuery library, but the script itself is explained)
• Basic HTML knowledge

Our end result, after following both walk-through blogs, should be similar to this:

This walk-through is intended as a simple guide and does not cover any cross-browser display fixes, responsive design, or particularly advanced coding. As such, for the purpose of following this guide, choose the browser your form will be viewed in (most), and design the form to be viewed in that browser only. You will need an up-to-date browser for this walk-through.

I am using Firefox.

Set Up

For this tutorial, you’ll need to have the standard JQuery library handy – I recommend keeping this within your site assets. You can download JQuery here: https://jquery.com/download/

First, you’ll need to create a new Custom List for this walk-through. Create a new ‘Choice’ column, with the choices being ‘Poor’, ‘Okay’ and ‘Good’. Empty the default choice value, and set to Display as ‘radio buttons’. Make 3-6 of these columns.  The default ‘Title’ column can be left as is or renamed to suit your form (I have renamed mine to ‘Reviewer Name’.)

In SharePoint Designer, select your new List and, in the Forms section, click ‘New’. Give it a file name (this forms the URL, so don’t add any spaces or special characters), make sure it is set to ‘New Items’ in the radio buttons selection below, and then set it as the default form for that type.

Open your newly created .aspx file in SharePoint Designer’s code editor and click the “Advanced Mode” button in the ribbon. This will allow full editing.

If you preview the current form, you’ll see that what you have now is the standard, basic form:

This means we’re ready to start editing our code!

Form Design: Horizontal Alignment for Radio Buttons

The first thing we need to change is the alignment of the radio buttons, making them display horizontally rather than vertically. This is where you’ll need your JQuery library.

In the code for your form, find “PlaceHolderMain” (mine is at line 14, seen below) and add the full URL to your JQuery library in the line directly underneath, in between <script> tags.

<script src="https://yoursitename.sharepoint.com/SiteAssets/jquery-1.12.4.js"></script>

Now our form is ready to handle JavaScript, but before writing a script, we first need to give it some HTML to reference.

SharePoint does not separate its radio buttons per question in the way that you’d expect, and so to tackle this, we’re going to add individual <span> ids to each question. This way, we can tell the script exactly where to find its information, which will aid faster loading times. I have named my ids to match the questions: “q1” for Question One, “q2” for Question Two, etc.

Place your spans around the “SharePoint:FormField” tags:

Once you’ve added ids to all your questions, scroll back up to where we inserted the JQuery library link. This is where we’re going to add the JavaScript – it’s good practise to write your scripts (and CSS) in external files and link to them if you’re going to be using them frequently and in various forms, but for the purpose of this walk-through, we’re adding everything into the main body.

Tip: JavaScript is generally added at the bottom of a page to aid loading times, but as the layout of the buttons is somewhat salient to the design of the form, this is being added to the top to load first.

Open a preview of your form, and use F12 to display the Inspector within your Developer tools, and click one of your radio buttons.

You will notice that is has the class name “ms-RadioText” – this, plus your span id names previously added, is what we will reference in the JavaScript code. This will tell the script exactly where to look.

Next, we’re going to write a function using ‘appendTo’. This will append the next radio button to the previous one, displaying them horizontally.

$(document).ready(function() {
var prevRadio = $("#q1 .ms-RadioText:eq(0)");
$("#q1 .ms-RadioText:gt(0)").appendTo($(prevRadio));
});

First, we define the variable for the initial radio button:

#q1 = the span id for your first question
.ms-RadioText = the class for the radio buttons within your span id
:eq(0) = ‘equal to’ (index value) – your 1^st radio button has an index value of 0

As with any JavaScript variable, you can name this whatever makes sense to you – my personal preferences are prevRadio and firstRadio.

Then, we need to tell the rest of the radio buttons to append to the one we just defined:

:gt(0) = ‘greater than’ (index number) – any radio button with an index value higher than 0
.appendTo($(prevRadio)) = append to the variable you just defined

This is the reason we use spans, because without them (just .ms-RadioText), the index numbers for the radio buttons would continue rather than resetting at each question, meaning the first radio button of question 2 would have an index value of 3, rather than beginning again at 0. Not using the span ids would result in all the radio buttons in the entire form appending to the first one, and it would no longer be set out separately for each question. Using the spans causes an index reset, as it is looking at the index value for that span only.

Repeat your code for each span, and preview:

You now have a horizontal display for the radio buttons in your SharePoint form, using one simple JavaScript function.

See my next walk-through for how to style the radio buttons to create the clickable scale bars using CSS3.

• 02 Aug
• Ian Wheeler
• SharePoint
•  2 Comments
•  Like

• CSS , JavaScript , Radio Buttons , SharePoint