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:

I’m Still Alive…

Sorry for the long break in posts. I have been involved in a records management project at my job for the past 6 months and it has eaten up all my time. I will be adding posts soon about how we went about creating a records management solution, plus some other things I’ve figured out how to do..

I also attended the inaugural meeting of the Greater New Orleans SharePoint Users Group, so I am hoping that will prove to be a great resource in time. Stay tuned.