This article describes how to create a Data View Web Part in SharePoint 2010 that displays a list item randomly with auto refresh. It will also cover up how to make the DVWP reusable over the site collection. This web part could be used as a Quote of the day, Tip of the day or randolmly display pictures from a libray.

In order to try this you will create a list with some items, a page, and a DVWP that you are going to modify a bit. You can also download this web part as it is.

Create the list, a column and some quotes

  • Use the browser and create a Custom List named Quote in the root site of the site collection.
  • Click at List Settings and the Title column. Rename this to Author and click OK.
  • Click at Create Column and type the name Quote. Click OK.
  • Go to the list and add at least four items in the list.

Create a page and the Data Form Web Part

  1. Open SharePoint Designer 2010 and open the root site (home). Click at the File tab, add Item, more pages. Select ASPX and click at the create button. Type QuoteWebPart and click OK twice.
  2. Select the Design View and select the Insert tab in the ribbon. Click at Display Item Form. Select the Quote list.
  3. In the option tab:

    1. Select Paging and then select Display All Items.
    2. Select Refresh Interval and set this to 15 Seconds.
    3. Select Add/Remove Columns. Remove the unwanted columns and add Quote and Author. Click OK.
    4. Select the Quote and the Author cells. In the Table tab in the ribbon, select Delete and Delete Cells.
  4. Use the code view
    1. Move the @Title after the @Quote. Remove the empty TR and use a DIV to wrap the quote and the title field like the images below. Later on you can replace all the table tags in the data view with markup as you prefer.

      Before

      After

    2. Add a a random variable and replace the for-each that render the rows with a random variable and a for-each that select this variable. Search for $Rows.
      Replace:

      <xsl:for-each select="$Rows">

      with

      <xsl:for-each select="$Rows[position()=$Random]">
<xsl:call-template name="dvt_1.rowview" />

      The body template should look like this:

      <xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:variable name="Random" select="ddwrt:Random(1,count($Rows))" /> 
<xsl:for-each select="$Rows[position()=$Random]">
<xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>
</xsl:template>

Save the page and click at the preview browser button on top of the ribbon to make sure everything works ok. In the following section we will make this web part ready for production.

Apply branding to the Web Part and delete parameters that we don’t need

  1. Put the CSS inline just below the <XSL> tag. To put the CSS classes inline is just for make this example a bit more easy. I would recommend you to put this three classes in a custom CSS. 
    2. <style type="text/css">
#quote { 
font-family: Arial, Helvetica, sans-serif; font-size: 13px; 
line-height: 18px; color: #373737; 
background-color:#fbffec;
background:url("/Style Library/MiscStyles/quote-mark.png");
background-position:6px 6px;
background-repeat:no-repeat ;
height:80px;
padding-left: 65px; 
padding-top:10px;
border: 1px solid #edffaf;
}
#quoteText {
text-align: left; 
font-family: Georgia, Times, serif;
width: 300px; 
margin-bottom:10px;
}
#quoteAuthor {
padding-left:10px;
font-style: normal; text-align: left; 
text-transform: uppercase; font-size: 10px; font-weight: bold; 
letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; 	
}
</style>
  2. Create a Quote image in the size of 48×44 px and download the image here to your folder for images, in this example /Style Library/MiscStyles/quote-mark.png
  3. Delete the insert, update and delete parameters in the Data View. We only need the SelectParameter.

Make the Web Part be ready to be reused in the site collection.

At this point you have to modify some of the XSLT in order to use the web part in sub sites. You don’t need to this if you only want to use this web part at a page in a folder at the top site and don’t upload the web part to the gallery.

  1. It is three parts in the XSLT you have to modify:
  2. DataFormWebPart : Set the Viewflag to zero
  3. SelectParameters: Change the Parameter and add one more
  4. ParameterBindings: Change the value and name

______________________________________________________
<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="True" FrameType="None" NoDefaultStyle="TRUE"  Title="Quote" 
PageType="PAGE_NORMALVIEW" ListName="{2E43057F-5A51-41D2-B250-051D41DF2652}" Default="FALSE" DisplayName="Quote" __markuptype="vsattributemarkup" 
__WebPartId="{D7B96070-41A4-485E-A9ED-7DDDFF56C3F7}" id="g_d7b96070_41a4_485e_a9ed_7dddff56c3f7" autorefresh="true" autorefreshinterval="15" 
ViewFlag="0" >
______________________________________________________
<DataSources>
	<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="&lt;View&gt;&lt;/View&gt;" id="Quote4">
		<SelectParameters>
			<WebPartPages:DataFormParameter Name="ListName" ParameterKey="ListName" PropertyName="ParameterValues" DefaultValue="Quote"/>
			<WebPartPages:DataFormParameter Name="WebURL"   ParameterKey="WebURL"   PropertyName="ParameterValues" DefaultValue="/"  />
		</SelectParameters>
	</SharePoint:SPDataSource>
</DataSources>
______________________________________________________
<ParameterBindings>
	<ParameterBinding Name="ListName" Location="None" DefaultValue="Quote"/>
	<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
</ParameterBindings>

  1. Save the page and switch to the design mode. Click at the Web Part, click at the Web Part tab in the ribbon and click at To Site Gallery. Type a name and a description and hit OK.
  2. Go to a page in the site collection to verify that everything works as expected.


Download the web part

You can download the web part here and try this out. This version does not use a background image. To get this working in your environment you have to create a custom list at the root site named Quote. Rename the Title column to Author and create a new column named Quote.

You can also download the DVWP as text file, if you need this a bit more readable.

Drop a comment if you have questions.
/ Christian