Aracılığıyla paylaş

Creating a button to export a SharePoint 2010 data view webpart

  • Makale

Use case:

A SharePoint page has a data view list webpart on the page. You need a simple button on the page, that users can click to export the data (rather than clicking through the Sharepoint ribbons etc).

 

A Solution:

Getting the data:

you can use the owssvr.dll to export this data. IE:

{site name}/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={list ID}&View={View ID of the data view on the page}&CacheControl=1

Note, when you place a webpart on a SharePoint page, it generates a unique view ID. If you later remove this dataview webpart, your button will fail to work, until you update the ID.

 

Site:

https://mitchindustries/sites/testsite
List ID: 38DD0DC3-12E5-4A62-9603-2C6F3EDB755A

View ID: 7ECF2B79-AEA8-4CED-B404-0F57D5A7E2B0

You can obtain these ID's using F12, and using the HTML code inspector. If you hover just to the left of the dataview webpart, you'll see the blue box highlight.

Expand the results, and one of the nodes will have all the information you've after.

For our case, the final link will be:

https://mitchindustries/sites/testsite/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={38DD0DC3-12E5-4A62-9603-2C6F3EDB755A}&View={7ECF2B79-AEA8-4CED-B404-0F57D5A7E2B0}&CacheControl=1

To test your link, while on the page which has the datasheet list view webpart, place that in the URL and hit enter.

You should see the query.iqy popup at the bottom. If your link is correct, your data will display in a table within excel.

 

Creating the button:

To keep things basic, add the following code to a content editor webpart on the same page as your datasheet list view webpart:

 

 <style type="text/css"> 
 .box {
 MARGIN-BOTTOM: 2px;
 BORDER-TOP: #ffffff 1px solid;
 HEIGHT: 40px;
 BORDER-RIGHT: #ffffff 1px solid;
 WIDTH: 100px;
 VERTICAL-ALIGN: middle;
 BORDER-BOTTOM: #ffffff 1px solid;
 TEXT-ALIGN: center;
 FILTER: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#006600', startColorstr='#009900', gradientType='0'); BORDER-LEFT: #ffffff 1px solid;
 MARGIN-TOP: 2px;
 BACKGROUND-COLOR: #009900
 
 }
 .hoverbox {
 MARGIN-BOTTOM: 2px;
 CURSOR: pointer;
 BORDER-TOP: #ffffff 1px solid;
 HEIGHT: 40px;
 BORDER-RIGHT: #ffffff 1px solid;
 WIDTH: 100px;
 VERTICAL-ALIGN: middle;
 BORDER-BOTTOM: #ffffff 1px solid;
 TEXT-ALIGN: center;
 FILTER: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#003399', startColorstr='#000099', gradientType='0'); BORDER-LEFT: #ffffff 1px solid;
 MARGIN-TOP: 2px;
 BACKGROUND-COLOR: #000099
 }</style>
 
 
 <table class="table " style="width: 100px; height: 100px;"><tbody>
 <tr>
 
 <td class="box" onmouseover="this.className='hoverbox';" onmouseout="this.className=&#39;box&#39;" onclick="javascript:window.open('https://mitchindustries/sites/testsite/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={38DD0DC3-12E5-4A62-9603-2C6F3EDB755A}&View={7ECF2B79-AEA8-4CED-B404-0F57D5A7E2B0}&CacheControl=1');" style="width: 100px"><div class="divtop" id="top"><img width="20" height="20" class="icon" src="https://blogs.msdn.com/sites/testsite/SiteAssets/images/33.png" alt=""/>&#160;</div>
 <div class="boxtext" id="bottom">Export Visit Log</div></td>
 
 </tr></tbody></table>