Geeks With Blogs

News These postings are provided "AS IS" with no warranties, and confers no rights.
Locations of visitors to this page virtusa corp sharepoint virtusa.com shehan peruma
Shehan Peruma

 

Here’s the scenario:

You have a handful of images which you need people to rate. Unlike SharePoint 2010, 2007 does not offer a rating control so you’ll either have to purchase a commercial product or install the open source alternative or even develop something custom. All these are possible if the server ‘belongs’ to your team/department. But (like me) if the SharePoint farm is owned by some other team and is utilized by the whole company for day-to-day activates then admins would frown on such requests.

Here how you do it with any code or installs (you don't even need designer):

  1. Download the jQuery library and store it on your site.
  2. Create a normal SharePoint Survey
  3. For the ‘Question’ textbox type something like ‘Please rate the below pictures’
  4. Next, select ‘Rating Scale (a matrix of choices or a Likert scale)’ as the type of answer
  5. In the subquestion textbox type the url’s of all the pictures you want to be shown
  6. The ‘Number Range’ is the rating scale. Adjust it to suit your needs.
  7. Remove the text in ‘Range Text’
  8. Uncheck ‘Show N/A option’
  9. Click Finish

image

The Survey is now created. Next navigate to the ‘Respond to this Survey’ screen

  1. Append the url with the following: &PageView=Shared&ToolPaneView=2
  2. This will cause the ‘Add Web Part’ tool pane to show up.
  3. Add  a CEWP to the page
  4. Go to the webpart properties and click the source button
  5. Add the following:
// make sure this points to the correct place where the jQuery file is stored on the server
<script type="text/javascript" src="http://serverX/documents/jquery-1.4.2.min.js"></script>

<script>
$(document).ready(function() {
    $("th.ms-gridT1").each(function(index) {  
   var imgHtml = "<div><img width='200'  src='" + $(this).text() +"'/>";

  $(this).html(imgHtml);
  });


});
</script>

 

you should be all set now…

Good Luck!

 

Technorati Tags: ,,,
Posted on Saturday, July 17, 2010 6:57 AM MOSS , WSS , Customization , jQuery | Back to top


Comments on this post: Rate pictures using a Survey and jQuery

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
I am unable to paste '&PageView=Shared&ToolPaneView=2' at the end of my url to bring up the web part ribbon menu. I am appending it at the url of the page that show the Survey Name/Description/time created/nbr of responses. Any help would be appreciated!

Thanks
Left by Michelle on Oct 11, 2010 1:40 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
hi, This is just what I am looking for but I cant get the images to display in the survey I only see the url string to the image?
Left by Nelesh on Oct 12, 2010 3:36 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
@michelle - that's not the page url you should update. Instead, click on the 'Respond to this survey' button that appears on top of the Survey Name row. The page that loads when you click this button is the url that you need to append to.

@nelesh - you need to make sure that the script link pointing to the jquery file is correct
Left by Shehan on Oct 12, 2010 3:52 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Hi Shehan,

Excellent got it working a treat !! Ihad to change the following in the script
th.ms-gridT1 I changed to TD.ms-gridtext, and now the images are displayed. This is just what I need.

Nelesh Thank you
Left by Nelesh on Oct 12, 2010 4:55 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
glad to hear that you got it to work, nelesh!
Left by Shehan on Oct 12, 2010 5:02 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Hi,

Thanks for the article, it was really helpful.

just have few more queries, can we categories the pictures ( like folder architecture),

also, can we show the file name below picture ?

Thanks
Left by Ashish on Oct 12, 2010 3:37 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
@Ashish - i'm not sure as to what you mean by 'categories the pictures'
As for displaying the file name, try this (note I haven't tried this so I cant guarantee it would work :) ):
<script>
$(document).ready(function() {
$("th.ms-gridT1").each(function(index) {
var fileName = $(this).text().substring( $(this).text().lastIndexOf('/') + 1, $(this).text().length);
var imgHtml = "<div><img width='200' src='" + $(this).text() +"'/><br />Filename: "+fileName+"</div>";

$(this).html(imgHtml);
});

});
</script>
Left by Shehan on Oct 13, 2010 4:53 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Hi Shehan.

We do not want to use the rate option, we want users to just make one selection, but the problem I have now is the one option survey button is displayed on the left and image not the right? is there a way to make the survey button to display on the right of the image? i also tried your script in the last post and it worked for me; but is there a way to display the picture description instead ??















Left by Nelesh on Oct 14, 2010 4:44 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Great solution. it was very helpful!

How to solve it after clicking on the image to open full picture? (The images are uploaded to the gallery.)

Unfortunately I am not a web developer. :(
Left by Stealth on Oct 21, 2010 7:00 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
I forgot: in a new window.

(How to solve it after clicking on the image to open full picture in a new window)

Thank you!
Left by Stealth on Oct 21, 2010 7:38 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Thanks is brilliant!! I have neen looking for something exactly like this! :) Shehan you are genius! thanks again for this
Left by Lisa G on Oct 27, 2010 7:02 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
hey,

thanks for following up !!

one last question, is there a way i can restrict the user to upload more then lets say 4 pics for one perticular sub -site , one picture library ??

i can see that most of the fuction is taken care by upload.aspx, but we cannot edit that.

please please please help !

once again thanks for you help.

regards.
Ashish J.
Left by Ashish on Nov 02, 2010 11:57 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
This worked for me when i was rating images but I dont want to rate. I want to have radio buttons and the user will choose only one image. Can you please help.
Left by npaul on Nov 08, 2010 9:33 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Awesome! Thanks for sharing the clear steps.

I tried to add URLs for my pictures in the "Choice" type of SP question, but it did not work. Is there a different command that needs to be used in the javascript to work under the "Choice" type rather thank "Rating Scale"?

I would also like to use the pictures as a choice rather than a rank
Left by rco on Nov 17, 2010 10:54 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
I am not a programmer, but I played with the script and "Choice" option. When I typed "span.ms-RadioText", it inserted the pictures instead of the text for the choices, but it got rid of the radio buttons also.

An additional question with the script: is there a way to only have the script run on a certain question on a page? If I have other ranking questions that require text and not images, then the text is replaced with blank images...

Thanks.
Left by rco on Nov 17, 2010 11:12 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Thanks, this is great! Just one question: displaying the file name with the addiitional script works great, but how to exclude the extension? So instead of 'picture.jpg' only 'picture' will be displayed? Thanks!
Left by Claudia on Dec 02, 2010 8:55 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
hi,

mate ! thanks a lot for this one !

i have one more requirment to create wall of fame find of thing from list !

e.g http://blog.frankovic.net/wall-of-fame/

any idea can we do that ?

regards,
Ashish J.

Left by Ashish on Dec 07, 2010 9:45 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Hi All,

I am new to development. Is it possible to show new picture for each question of survey ? thanx in advance. pl help me.

Regards,
Prashant
Left by Prashant on Mar 01, 2011 7:15 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
How are you calling the jquery on the page? or storing it in the site? I've added it to a document library, but that doesn't seem right. I'm missing something, please help
Left by y3rt on Apr 01, 2011 1:29 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
hi,
Where can I download the jQuery library and how could I store it on my site.
I am a true fresher in this field, please help.
Thank you.
Left by Jim on May 19, 2011 11:55 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Hello,

Thanks for the great tip.
But after I set img width='400', i found the survey picture displayed is too low in resolution, while the original picture in URL is high.
Is there any way to change the Pic resolution display in source?

thank you,
Left by Jo on Jul 05, 2011 1:05 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Terrific - Just what i needed :) thank you for posting!
Left by Dae on Jul 11, 2011 11:53 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
thannk you very much.
Left by davetiye on Feb 28, 2012 7:04 AM

# Rate pictures using a Survey and jQuery
Requesting Gravatar...
I think it works better with "Choice" answer.

$(document).ready(function() {
$("span.ms-RadioText").each(function(index) {
$(this).children("input").css("float", "left");
$(this).children("label").css("float", "left");
var imgHtml = "<div><img src='" + $(this).attr("title") +"'/>";

$(this).children("label").html(imgHtml);
});
});
Left by Manuel Gs on Apr 24, 2012 8:44 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
hello sir,would always follow your web site I wonder if you would very Takir Can I write here is some information on my own website and thank for sharing
Left by ukash on Feb 16, 2013 5:42 PM

# Read HTML in survey question
Requesting Gravatar...
In 2007 sharepoint I simply added this line to the editform/newform.aspx:
document.getElementsByTagName('ms-formtable').item(0).outerHTML=document.getElementsByTagName('ms-formtable').item(0).outerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>');
(within the script tag of PlaceHolderTitleAreaClass)
This enabled me to type HTML directly into the question including the <img> tag for pictures.

This does not seem to work in 2010, I think because of the layout change from tables to divs?? Any ideas?
Left by Holly on Apr 18, 2013 11:13 AM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
How do i add text next to each image? All images are coming up fine but I would like people to be able to identify the name of each item. Thanks in advance.
Left by Mary Lower on Jun 24, 2013 8:48 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Hi,
Greate post ,
But i want to add a picure list instead of the picture links.
How can i do this? kindly help .


Thanks & Regards,


Nishigandha

Left by nishigandha on Sep 05, 2013 6:35 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
Thank you. I used the JQuery that Mauel Gs wrote for use on a survey choice field and it worked great.
Left by Harry on Sep 20, 2013 9:13 PM

# re: Rate pictures using a Survey and jQuery
Requesting Gravatar...
This was really helpful. I want to do something else on that page but the trick was fantastic!
Left by Suleiman-Oba on Mar 03, 2014 7:49 PM

Your comment:
 (will show your gravatar)


Copyright © shehan | Powered by: GeeksWithBlogs.net