Adding White Space to SharePoint Survery Rating (Likert) Scale

I get this question a LOT! The fix is quick and easy and doesn't even require access to SharePoint Designer (Though IMHO, it's easier and faster)

The thing is, SharePoint survey rating scales use the class 'ms-gridT1.' All you have to do is append a little CSS to the class and you're done!

How?
1. Add a Content Editor Web Part to the page.
2. Click 'Modify Shared Web Part' and choose 'Source Editor'
3. Add the following code...

<script type="text/javascript" type="text/javascript">
// This script can be used to add white space to a ratings scale on a survey form
// Place this script inside a Content Editor Web Part in Source Mode.
// © Copyright Chris Gannon 2012 chris@chrisgannon.com
// Feel free to distribute this around. But props and credit are appreciated!
$('TH.ms-gridT1').css({'padding-bottom':'5px'});
</script>

4. Under 'Layout' check the 'Hidden' box to hide the CEWP.

Have a look at the before-model...

Now, have a look at the after...

Better, huh?

I hope this helps!

CG

Re-enabling Form Fields and Form Validation

In my last post I showed you how to disable form fields and controls like the Submit button.

Well, that's not going to do you much good unless you can re-enable the button and submit the form. Using a little more jQuery, here's how to peform a little form validation and do just that.

Notice the field "Requested Tickets?" It's the only field on the form that you can actually modify. I'm going to attach some form validation to this field to make sure the user doesn't enter an invalid quantity.

If you'll notice, underneath the text "Requested Tickets" it tells you how many tickets are available- 4. (How I got this there is the subject of another post.) If the user requests 10 tickets then the form should (politely) let them know that it's not going to happen and the Submit button should stay disabled.

But if the user requests four or less tickets, then all should be right with the world and they should be allowed to submit their request.

To place validation on the "Requested Tickets" field, go into SPD and add an ID to the SharePoint:FormField's parent td. Something like id="tktsReq" should do.

BTW- Sometimes, SPD likes to add the mysterious {generate-id()} to ID fields that you add on your own. See Marc Anderson's blog post on how to get around this.

Now, go back to your content editor web part and add the following function to your script

function checkTktReq(){
var tktsAvailable = $("input[title='Available']").val(); // value taken from a hidden form field
var tktsRequested = $("input[title='Requested Tickets']").val();
if(tktsAvailable<tktsRequested){
$('#btnSubmit :input').attr('disabled','disabled');
$('.disableMe :input').attr('disabled','disabled');
alert('There are only ' +tktsAvailable+ ' tickets available for this event and you have asked for '+tktsRequested+'. Please modify the number of tickets you are requesting.' );
} else {
// Re-enable the Submit button
$('#btnSubmit :input').removeAttr('disabled');
// Re-enable the form fields. Otherwise, you'll get an error.
$('.disableMe :input').removeAttr('disabled');
}
}

and to the $(document).ready function, add...
$("#tktsReq").keyup(checkTktReq);

This little piece is going to listen for changes to the Ticket Request field and call the function checkTktReq() which compares the value entered to the number of tickets available and responds accordingly. You don't have to use the "keyup" event. You could use change, keydown, or a variety of others. Feel free to use whatever works best for your purposes.

So let's see it in action!
If there are 4 tickets available and I ask for 22 I get a nice error message and the form remains disabled.

But, if I ask for only 2 tickets, the value is valid and the submit button is re-enabled.

I hope this helps!

CG

Disabling Form Fields

There are times when you want to disable or hide certain form fields or controls in SharePoint. I've found that a little jQuery is your best friend here. You can either disable items by their ID or by using a class.

Put a content editor web part on your page and add the following code...

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// Disable form field/control using ID
$('#btnSubmit :input').attr('disabled','disabled');
// Disable multiple fields/controls using class
$('.disableMe :input').attr('disabled','disabled');
});
</script>

For individual items that you want to disable by ID, go into your customized form using SPD or Fiddler and get the ID's you need.

For multiple items that you want to disable by using class, go into your customized form and make sure to add "disableMe" to the class of the form field's parent table data tag ().

Note: You can't add it to the "SharePoint:FormField" control because it won't take a standard "class" attribute and the "CssClass" attribute won't work here. If you add the class to the parent 'td' tag, the script will apply that class to the first child of that tag.

Here's what you get...

This works in SPD2007 also.

Hope this helps!

CG

(BTW- I know that the form won't do you much good with a disabled submit button and I don't reference any validation or method of enabling the button again. That's a topic for the next post- Form validation using jQuery.)