Enhancing the Survey Data View Webpart

A few years ago, my company purchased a third-party survey webpart for SharePoint. We never bought enough licenses for it and the farm admin back then never got it to work. So when I saw this post on the excellent EndUser SharePoint website, I decided to give it a try. The linked article shows you how you can use a data view webpart to pull in the form for a survey into a webpart which you can then add to a page, allowing users to view the survey and answer it on the same page.

The second part of the article referred to another article on another site for revealing the survey results. Those directions didn’t make much sense to me so I looked for different ways to trick out the webpart. The rest of this post describes how I further customized the survey webpart created from the EndUser SharePoint tutorial. So follow the directions on the article first and then try out my modifications below.

Modifications

The first thing that I wanted to fix was that there was no indication to the user that something happened when they answered the survey. I didn’t want the user to just keep clicking the vote button, so I created a hidden div with "Thanks for voting" in it and added code to the input onclick to show the div upon clicking the button. The next issue was that the webpart causes an auto refresh right after the user clicks Vote, wiping out the "thank you" text. So our programmer wrote another javascript snippet that created a pause before the refresh, giving the user a few seconds to see the "Thank you for voting" text before the refresh wiped it out.

Below is the code applied to the Vote button:

<strong>&lt;input type=&quot;button&quot; value=&quot;Save&quot; name=&quot;btnSave&quot; <br />onclick=&quot;javascript: document.getElementById('thanks').style.display = 'block'; <br />window.setTimeout({ddwrt:GenFireServerEvent('__commit')}, 900000);&quot; /&gt;</strong>

The number that displays above, 900000, is the number of milliseconds that I have the refresh paused at-you can set this number to whatever you like.

I named the div that has my "Thank you" text "thanks" and I set its visibility to hidden directly on the div and used the javascript to set its display to block upon clicking the vote button. I also added a direct link to the survey’s results page which is displays automatically:

<strong>&lt;div style=&quot;display:none;background-color:#eef0d8;&quot; id=&quot;thanks&quot;&gt;Thanks for voting!&lt;br/&gt;&lt;/div&gt;<br />&amp;gt;&amp;gt; &lt;a href=&quot; https:/mywebsite.com/Lists/Holidays/summary.aspx &quot;&gt;View Results&lt;/a&gt;
</strong>

Finally, to add some extra style to the webpart, I changed the color of the Survey text and added a div around the survey table that renders a dotted line after the survey:

Survey text:

<strong>&lt;span style=&quot;color:#8f5321;&quot;&gt;</strong>&lt;b&gt;Which holiday do you wish Stewart gave employees off for?:&lt;/b&gt;<strong>&lt;/span&gt;</strong>

Dotted line:

&lt;div style=&quot;border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999;&quot;&gt;<br />
&lt;table border=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;<br />
&lt;tr&gt;<br />
&lt;td width=&quot;25%&quot; class=&quot;ms-vb&quot; style=&quot;width: 100%&quot;&gt;<br />
&lt;span style=&quot;color:#8f5321;&quot;&gt;&lt;b&gt;Which holiday do you wish Stewart gave employees off for?:&lt;/b&gt;&lt;/span&gt;&lt;SharePoint:FormField runat=&quot;server&quot; id=&quot;ff1{$Pos}&quot; ControlMode=&quot;New&quot; FieldName=&quot;Which_x0020_holiday_x0020_do_x00&quot; __designer:bind=&quot;{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Which_x0020_holiday_x0020_do_x00')}&quot; /&gt;&lt;SharePoint:FieldDescription runat=&quot;server&quot; id=&quot;ff1description{$Pos}&quot; FieldName=&quot;Which_x0020_holiday_x0020_do_x00&quot; ControlMode=&quot;Edit&quot; /&gt;&lt;/td&gt;<br />
<br />
&lt;/tr&gt;<br />
&lt;xsl:if test=&quot;$dvt_1_automode = '1'&quot; ddwrt:cf_ignore=&quot;1&quot;&gt;<br />
&lt;tr&gt;<br />
&lt;td colspan=&quot;99&quot; class=&quot;ms-vb&quot;&gt;<br />
&lt;span ddwrt:amkeyfield=&quot;ID&quot; ddwrt:amkeyvalue=&quot;ddwrt:EscapeDelims(string(@ID))&quot; ddwrt:ammode=&quot;insert&quot;&gt;&lt;/span&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/xsl:if&gt;<br />
&lt;/table&gt;&lt;/div&gt;<br />

Here is what the survey webpart looks like after it has been exported and added to a page:

and here is what it looks like once the user clicks the Vote (or in this case the Save button because I forgot to change its value, doh!) button:

References:

Advertisements

One thought on “Enhancing the Survey Data View Webpart

  1. Thanks for this tutorial – it’d be great if both this post and the endusersharepoint one could be updated for 2010.

    I know how to add a Data View webpart in SPD2010 but I can’t seem to find a way to change the ‘view’ of the data view to NewItem.aspx…. Any help gratefully received.

    Congrats on the blog BTW!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s