SharePoint 2020

The Vision for a Future of Clarity

Save list item as PDF file from Display Form using SWF buttons

This article explains how to add swf Flash buttons using TableTools to your List View and Default Display Form.

I’ve tested this in SharePoint 2010, using IE8. I have not tested this in SharePoint 2013 but it would work there too.

This is a pure front-end solution, using only SP Designer or notepad for those on a locked down intranet.

The only requirement is that your browser needs to be able to display Flash and SWF files.

The original post and code came from Danish Islam, which explains the how the code and buttons are linked to a List View.

Use jQuery Datatables for SharePoint List Webpart with export to CSV, EXCEL, PDF and Print features

The buttons contained in jQuery Datatable TableTools are:

Copy, CSV, Excel, PDF, Print.

buttons

This is the result of adding the script to the List View:

listTableTools

Note: The search box is live “Search as you type” filtering the list. The paging is Ajax and loads instantly.

All that you require are:

  • The files to be uploaded
  • Change the file paths in the the code
  • Change the file paths of the images in the CSS files.
  • Add a Content Editor Web Part to your List View or Display Form view.

If you place this script in a content editor web part above a list view, the full affect of Datatable Tabletools will be displayed.

Also, important note: Use the jQuery.js file that comes with the Datatables Zip Package.  Using jQuery v1.12 the buttons did NOT display and it took me a couple hours to determine it was the jQuery.js file.

<style type="text/css">
.even, .odd, .sorting_1 {
 background-color: transparent !important;
}
.dataTable THEAD TH {
 border: 0 !important;
}
</style>
<script type="text/javascript" src="/scripts/datatables/jquery.js"></script>
<script type="text/javascript" src="/scripts/datatables/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/jquery.dataTables.css">
<script type="text/javascript" src="/scripts/datatables/dataTables.tableTools.js"></script>
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/dataTables.tableTools.css">

<script type="text/javascript" >
 $(document).ready(function(){
 $(".ms-listviewtable").prepend($("<thead></thead>").append($(".ms-listviewtable").find("tr:first"))).DataTable({"sDom": 'T<"clear">lfrtip', 

 "tableTools": {
 "sSwfPath": "/scripts/datatables/copy_csv_xls_pdf.swf"
 // Change this path according to file location 

 } 

 });
 });
</script>

For a List Display Item, I removed the CSV and Excel buttons and also added an “Email Link” button.

displayform


<style type="text/css">
.even, .odd, .sorting_1 {
background-color: transparent !important;
}
.dataTable THEAD TH {
border: 0 !important;
}
</style>
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="/scripts/datatables/css/dataTables.tableTools.css">
<script type="text/javascript" src="/scripts/datatables/jquery.js"></script>
<script type="text/javascript" src="/scripts/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/scripts/datatables/dataTables.tableTools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ms-formtable").prepend($("<thead></thead>").append($(".ms-formtable").find("tr:first"))).DataTable({"sDom": 'T<"clear">rt',
"tableTools": {
"sSwfPath": "/scripts/datatables/copy_csv_xls_pdf.swf",

"aButtons": [

{

"sExtends": "copy",
"sButtonText": "Copy to clipboard"
},
{
"sExtends": "pdf",
"sButtonText": "Save as PDF",

"fnComplete": function ( nButton, oConfig, oFlash, sFlash ) {
SP.UI.Notify.addNotification('<img src="/_layouts/images/loadingcirclests16.gif" style="vertical-align: top;"/> PDF Exported to file ...',false);
}
},
{

"sExtends": "print",
"sButtonText": "Print this item"
},

{

"sExtends":    "text",
"sButtonText": "Email link",
"sButtonClass":  "DTTT_button_csv",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.location='mailto:?subject=' + document.title + '&body=' + window.location;
}
}
]
} // end of tabletools

});

});

</script>

The Saving to PDF button is the only front-end solution I have found that works without for IE8 and SharePoint 2010.

Any comments, questions, hit me up. Enjoy.

 

Advertisements

August 9, 2015 - Posted by | SharePoint 2010, SharePoint Designer 2010, SharePoint Javascript | , , ,

7 Comments »

  1. Hi, Did you use the 2nd code sample? Ensure that on line 16, you are using .ms-formtable, also check your script paths.
    I noticed you posted the same comment here: http://sharepoint.danishislam.com/Blog/Post/9/Use-jQuery-Datatables-for-SharePoint-List-Webpart-with-export-to-CSV,-EXCEL,-PDF-and-Print-features

    Comment by Brett | May 5, 2016 | Reply

    • Hi Brett,
      Thanks for your reply.I have tried the 2nd code example and i have changed the script path as well.
      It works fine for the Display form of the List.
      But its not working in List view web part.
      i.e i have page and added the list and on top of the list i have added content editor web part and referenced the .text file where in all these code resides and its not working.Just the button itself its not showing.
      Please let me know anything do i need change in the CSS or in the script.

      Comment by Sd Naag | May 5, 2016 | Reply

      • Hi Sd Naag, I will take a look at the List script and let you know what I find.
        Also ensure the SWF file is uploaded to your Library and path to it has been edited.

        Comment by Brett | May 5, 2016

      • I have debugged the code as well and i am getting an error in the Jquery.cs
        “Unable to set property ‘_DT_CellIndex’ of undefined or null reference”
        I have maintained the same column as shown in the screenshot as well.

        Comment by Sd Naag | May 6, 2016

      • Hi Sd Naag, Ensure you’re using the JQuery file that comes with Datatables. It took me a while to figure that one out.

        Comment by Brett | May 8, 2016

  2. I have tried this example its works for display form but not on the List view.
    On order to work on List View what should we have to do ?

    Comment by Sd Naag | May 4, 2016 | Reply

    • Hi Brett,
      I have used the same jquery.js that comes with Datatables only.I am trying in sharepoint 2013.
      Could you please try from your end by creating simple list and adding this script in CEWP.

      Comment by Sd Naag | May 9, 2016 | Reply


Post a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: