• open dock
  • Home
  • Professional Services
    • Business Improvement
    • Data Optimisation Services
  • Our Approach
    • maBI
    • Data-Driven Decision Model
  • Portfolio
    • Case Studies and Portfolio
    • Timeline
  • Contact Us
Change this Limited
  • Home
  • Professional Services
    • Business Improvement
    • Data Optimisation Services
  • Our Approach
    • maBI
    • Data-Driven Decision Model
  • Portfolio
    • Case Studies and Portfolio
    • Timeline
  • Contact Us

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:

SharePoint_RadioButtons_20

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:

SharePoint_RadioButtons_02
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>

SharePoint_RadioButtons_03
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:

SharePoint_RadioButtons_04
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.

SharePoint_RadioButtons_07
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 1st 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.

SharePoint_RadioButtons_05
Repeat your code for each span, and preview:

SharePoint_RadioButtons_06
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

Share This

Celebrating 10 years in business →← Viewing Interactive HTML5 Dashboards on Edge
2

Comments

  1. Creating A Scale Using CSS Styles | Change This Limited
    5th September 2016 at 10:04 am

    […] our last SharePoint walk-through Horizontal Radio Buttons in SharePoint (Part One), we used JQuery to align the radio buttons […]

    Reply
  2. Creating a Coloured Scale using CSS Styles - Change this Limited
    13th December 2016 at 3:27 pm

    […] our last SharePoint walk-through Horizontal Radio Buttons in SharePoint (Part One), we used JQuery to align the radio buttons […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Recent Posts

    • Change this Christmas Dash-er-board
    • Expo round-up and prize draw answers
    • Change this at Birmingham Business Expo – 14 Nov 2017
    • Power BI Custom Visual – Play Axis – Review
    • File Naming Conventions and Best Practice
  • Archives

    • December 2018
    • November 2017
    • June 2017
    • March 2017
    • February 2017
    • January 2017
    • December 2016
    • November 2016
    • September 2016
    • August 2016
    • July 2016
    • May 2016
    • April 2016
    • March 2016
    • February 2016
    • January 2016
    • December 2015
    • September 2015
    • June 2015
    • May 2015
    • April 2015
  • Categories

    • Case Studies
    • Excel
    • Insight
    • News
    • Portfolio
    • Power BI
    • SAP Dashboards
    • SharePoint
  • Search our site

  • Social

  • Recent Blog Posts

    • Change this Christmas Dash-er-board
    • Expo round-up and prize draw answers
    • Change this at Birmingham Business Expo – 14 Nov 2017
    • Power BI Custom Visual – Play Axis – Review
    • File Naming Conventions and Best Practice
  • © 2016 Change this Limited
    Website by Change this
    Standard Terms of Business
    Privacy Policy

    Delivering the difference

This website uses some cookies to improve your experience within the website.


We also use cookies to understand how visitors use our website Accept


To find out what cookies we use and for more information, Read More.
Privacy & Cookies Policy

Necessary Always Enabled

Non-necessary