Freigeben über

Creating a button to export a SharePoint 2010 data view webpart

  • Artikel

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>

Comments

  • Anonymous
    December 19, 2013
    Hi, I have exported list view webpart to excel on button click using the same method as above (list id & view id), here I have used some calculated columns in current view . After exporting list view , the excel sheet showing all the fields in current view as well as dependency columns that are used in calculated fields. I need to avoid those fields that are not in current view. How do I can solve the issue? Please let me know. Thanks in Advance, MBKrishna.

  • Anonymous
    January 01, 2014
    The comment has been removed

  • Anonymous
    September 18, 2014
    hi, how can we achieve same result if the webpart has linked data source?

  • Anonymous
    September 28, 2014
    It still says unexpected error and changes cannot be saved.. how to solve this?

  • Anonymous
    February 22, 2016
    hi, how can we achieve same result if the webpart has linked data source?