Tag: SPList

Export SharePoint List to Excel, Word, JSON, XML, SQL, CSV, TXT or PDF

Using JQuery we can export SharePoint list to Excel, Word, JSON, XML, SQL, CSV, TXT or PDF. Here I’m going to explain step by step explanation to implement this same in your environment. This will work for SharePoint 2013, 2016 and SharePoint online.

You can download complete source code from the below URL

zip_iconhttps://code.msdn.microsoft.com/Export-SharePoint-List-to-a802fd93

2016-02-17_23-46-38

Create “App for SharePoint” project in visual studio, in the new project creation wizard is select options based on your requirement. After project created rename your SharePoint App page, which is located under Pages folder, here I renamed as JQueryExport.aspx

Double click AppManifest.xml file and select SharePoint list view permission, because here we are just going read data from a SharePoint list, I’ve selected “Documents” list. List name and column name are hard coded  in the App.js file,


'use strict';

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage() {
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var hostweburl;
var appweburl;
var appContextSite;
var list;
var listItems;
var web;
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
getUrl();
});

// This function get the URL informations
function getUrl() {
hostweburl = getQueryStringParameter("SPHostUrl");
appweburl = getQueryStringParameter("SPAppWebUrl");
hostweburl = decodeURIComponent(hostweburl);
appweburl = decodeURIComponent(appweburl).toString().replace("#","");
var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.RequestExecutor.js", execOperation);
}

// This function get list data from SharePoint
function execOperation() {
var factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
context.set_webRequestExecutorFactory(factory);
appContextSite = new SP.AppContextSite(context, hostweburl);
web = appContextSite.get_web();
context.load(web);
var camlQuery = new SP.CamlQuery();
list = web.get_lists().getByTitle("Documents");
listItems = list.getItems(camlQuery);
context.load(list);
context.load(listItems);
context.executeQueryAsync(onGetSPListSuccess, onGetSPListFail);
}
// This function is executed if the above call is successful
function onGetSPListSuccess() {
$("#DivSPGrid").empty();
var listInfo = '';
var listEnumerator = listItems.getEnumerator();
listInfo += "
<table id='SPTable' class='display'>
<thead>
<tr>" +
"
<th>Id</th>
" +
"
<th>Title</th>
" +
"
<th>Colour</th>
" +
"
<th>Modified By</th>
" +
"
<th>Modified date</th>
" +
"</tr>
</thead>
<tbody>";
while (listEnumerator.moveNext()) {
var listItem = listEnumerator.get_current();
listInfo += '
<tr>
<td>' + listItem.get_item('ID') + '</td>
'
+ '
<td>' + listItem.get_item('FileLeafRef') + '</td>
'
+ '
<td>' + listItem.get_item('Colour') + '</td>
'
+ '
<td>' + listItem.get_item('Editor').get_lookupValue() + '</td>
'
+ '
<td>' + listItem.get_item('Modified').format('dd MMM yyyy, hh:ss') + '</td>
'
+ '</tr>
';
}
listInfo += '</tbody>
</table>
';
$("#DivSPGrid").html(listInfo);
$('#SPTable').dataTable();
}

// This function is executed if the above call fails
function onGetSPListFail(sender, args) {
alert('Failed to get list data. Error:' + args.get_message());
}

//This function split the url and trim the App and Host web URLs
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
}
<pre><!-- End --></pre>

Add CSS files into the ASPX


<!-- Add your CSS styles to the following file -->
	<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
	<link href="../Content/ionicons.min.css" type="text/css" rel="stylesheet" />
	<link href="../Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="../Content/jquery.dataTables.css" type="text/css" rel="stylesheet" />

Add set of JS files as reference in your ASPX page


<!-- Add your JavaScript to the following file -->
 <!--our custom js file-->
 <script type="text/javascript" src="../Scripts/App.js"></script>

<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
 <!--For export PDF file-->
 <script type="text/javascript" src="../Scripts/jspdf/libs/base64.js"></script>
 <script type="text/javascript" src="../Scripts/jspdf/libs/sprintf.js"></script>
 <script type="text/javascript" src="../Scripts/jspdf/jspdf.js"></script>
 <!--For export PNG file-->
 <script type="text/javascript" src="../Scripts/html2canvas.js"></script>
 <!--For export all other formats-->
 <script type="text/javascript" src="../Scripts/tableExport.js"></script>
 <script type="text/javascript" src="../Scripts/jquery.base64.js"></script>
 <!--For HTML Table format-->
 <script type="text/javascript" src="../Scripts/jquery.dataTables.js"></script>

I have used bootstrap drop down for listing export options,

<div class="dropdown">
<button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i>Export Table Data</button>
<ul class="dropdown-menu " role="menu">
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'json',escape:'false'});">
<img src="../Images/json.png" width='24px' />
JSON</a></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'json',escape:'false',ignoreColumn:'[0]'});">
<img src='../Images/json.png' width='24px' />
JSON (ignoreColumn)</a></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'json',escape:'true'});">
<img src='../Images/json.png' width='24px' />
JSON (with Escape)</a></li>
	<li class="divider"></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'xml',escape:'false'});">
<img src='../Images/xml.png' width='24px' />
XML</a></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'sql'});">
<img src='../Images/sql.png' width='24px' />
SQL</a></li>
	<li class="divider"></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'csv',escape:'false'});">
<img src='../Images/csv.png' width='24px' />
CSV</a></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'txt',escape:'false'});">
<img src='../Images/txt.png' width='24px' />
TXT</a></li>
	<li class="divider"></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'excel',escape:'false'});">
<img src='../Images/xls.png' width='24px' />
XLS</a></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'doc',escape:'false'});">
<img src='../Images/word.png' width='24px' />
Word</a></li>
	<li class="divider"></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'png',escape:'false'});">
<img src='../Images/png.png' width='24px' />
PNG</a></li>
	<li><a href="#" onclick="$('#SPTable').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">
<img src='../Images/pdf.png' width='24px' />
PDF</a></li>
</ul>
</div>
<div id="DivSPGrid">
</div>
<script type="text/javascript">
 $(document).ready(function () {
 $('.dropdown-toggle').dropdown();
 });
 </script>

Let me know if you have any queries,

zip_iconhttps://code.msdn.microsoft.com/Export-SharePoint-List-to-a802fd93

SharePoint List to JQuery Table

We have lot of benefits using JQuery Table in SharePoint such as quick search, selecting of number of items in view, shorting and footer navigation. In this SharePoint Add-in, I’m retrieving SharePoint list data and building HTML table, then the HTML table mapped with JQuery Table script. Read further for detailed step by step instruction to develop this SharePoint Add-In.

2016-02-08_22-11-19

Create a new project in visual studio and select “App for SharePoint” project Template, in the new project wizard select SharePoint Hosted and select SharePoint environment type.

After the project is created, open Solution explorer, in that open App.js under Scripts folder and remove all default code which is generated by visual studio and paste the below Java script code into that page.


var context;
var hostweburl;
var appweburl;
var appContextSite;
var list;
var listItems;
var web;

$(document).ready(function () {
//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getUrl);
getUrl();
});

function getUrl() {
hostweburl = getQueryStringParameter("SPHostUrl");
appweburl = getQueryStringParameter("SPAppWebUrl");
hostweburl = decodeURIComponent(hostweburl);
appweburl = decodeURIComponent(appweburl);
var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.Runtime.js",
function () {
$.getScript(scriptbase + "SP.js",
function () { $.getScript(scriptbase + "SP.RequestExecutor.js", execOperation); }
);
}
);
event.preventDefault();
}

function execOperation() {
context = new SP.ClientContext(appweburl);
var factory =
new SP.ProxyWebRequestExecutorFactory(
appweburl
);
context.set_webRequestExecutorFactory(factory);
appContextSite = new SP.AppContextSite(context, hostweburl);
web = appContextSite.get_web();
context.load(web);
var camlQuery = new SP.CamlQuery();
list = web.get_lists().getByTitle("Documents");
listItems = list.getItems(camlQuery);
context.load(list);
context.load(listItems);
context.executeQueryAsync(onGetSPListSuccess, onGetSPListFail);
}
function onGetSPListSuccess() {
$("#DivSPGrid").empty();
var listInfo = '';
var listEnumerator = listItems.getEnumerator();
listInfo += "
<table id='SPTable' class='display'>
<thead>
<tr>" +
"
<th>Id</th>
" +
"
<th>Title</th>
" +
"
<th>Modified By</th>
" +
"
<th>Modified date</th>
" +
"</tr>
</thead>
<tbody>";
while (listEnumerator.moveNext()) {
var listItem = listEnumerator.get_current();
listInfo += '
<tr>
<td>' + listItem.get_item('ID') + '</td>
'
+ '
<td>' + listItem.get_item('FileLeafRef') + '</td>
'
+ '
<td>' + listItem.get_item('Editor').get_lookupValue() + '</td>
'
+ '
<td>' + listItem.get_item('Modified').format('dd MMM yyyy, hh:ss') + '</td>
'
+ '</tr>
';
}
listInfo += '</tbody>
</table>
';
$("#DivSPGrid").html(listInfo);
$('#SPTable').dataTable();
}

// This function is executed if the above call fails
function onGetSPListFail(sender, args) {
alert('Failed to get SP List. Error:' + args.get_message());
}
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}

Rename default.aspx page, which is located under pages folder based on your requirement here I have changed as JQueryTable.aspx.

Double click AppManifest.xml file and select List Read permission under Permissions tab.

Add JS file, CSS file and Images into respective folders, for reference see the below image. You can find the link to download the Full project at the end of this post.

2016-02-08_22-35-22

Add newly added JS and CSS files reference in the JQueryTable.aspx and add a new element of Div with id as DivSPGrid refer the below code for more detail.


<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
 <SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
 <meta name="WebPartPageExpansion" content="full" />

<!-- Add your CSS styles to the following file -->
 	<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
 	<link href="../Content/jquery.dataTables.css" rel="stylesheet" />
 <!-- Add your JavaScript to the following file -->
 <script type="text/javascript" src="../Scripts/App.js"></script>
<script type="text/javascript" src="../Scripts/jquery.dataTables.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
SharePoint List to JQuery Table
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div id="DivSPGrid">

</div>
</asp:Content>

Its time to review our SharePoint Add-in output, build and deploy the project and select “Document” in the SharePoint permission request page, you can change different list from the app.js file code as per your requirement.

Feel free to contact me thru comments if you face any issues.

Good Luck on building your code!!!

Output of our JQuery Table in SharePoint

2016-02-08_22-51-37

Actual SharePoint List for your reference

2016-02-08_22-53-22

zip_iconhttps://code.msdn.microsoft.com/SharePoint-List-to-JQuery-97dcee17