SharePoint 2013-Printing List Item Forms using jQuery and CSS

Author

Rod Stagg

* Add a print button to a SharePoint list item form.

* Displays a print icon linked to the custom print preview form.

* Tracks which list items were printed by the user. Works on both Office 365 and on-premises versions of SharePoint 2013.

printfeature

Capture

Solution Details

Solution designed to meet a requirement from a customer to allow users to easily print a list item from the primary SharePoint list view page in a layout that maximized the allowable printing real-estate while also removing most of the SharePoint toolbars etc. from the printed page.  Also, the customer requested that we track which items had been printed since this solution was part of a larger scheduling solution for SharePoint.   Since the customer is hosting their SharePoint on Office 365 in the cloud we opted to use jQuery and CSS directly on the list item form.  For layout we opted to use a custom list item display form and modify the XSL although this is not necessary to support the jQuery and CSS for printing the list item.

Steps: 

  • jQuery added to list item form with embedded jQuery and CSS overrides in a script editor web-part.
  • Calculated field with a print icon and link to list item form added to the list view.
  • Optional: Customized list item form layout using XSL.

Getting started…

Configure a SharePoint custom list:

  1. Create a SharePoint custom list and add some fields and items.
  2. Create a calculated field named “Print” for the print icon and link and add to the list.  Set the data-type to currency.
  3. Create a field named “Printed”.  Set the data-type to text and add to the list.  This field will be updated when the user selects the print button.

Example calculated field syntax:

=”<a class=’printitem’ href=”&”‘”&”http://mysharepoint.com/Lists/Schedule/print.aspx?ID=”&ID&”‘”&”><img src=”&”‘”&”http://mysharepoint/SiteAssets/Images/print-icon-2.jpg”&”‘”&”></img></a>&#8221;

*Remove the trailing &#8221; for some reason getting added by WordPress

Upload the print icon to a image library.  Update the image source in the Print calculated field if necessary to point to the image location.

Configure the SharePoint list item form:

  1. Place the list item into edit mode. Then from the list item page select edit page.
  2. Add a script editor web-part to the form (located in the media and content category in the gallery) to store the jQuery and CSS.
  3. Insert the jQuery and CSS for adding the print button(s), updating the list item when the print button was pressed, and opening the browser print preview window.
  4. Choose “Stop Editing” to save the form.

HINT: If you require re-ordering the fields, customizing the layout or formatting of individual fields use SharePoint Designer 2013 to create a custom display list item form on the SharePoint list in question.  This will allow you to customize the XSL of the list item form and create 2 or 3 column layouts etc.

Example jQuery/CSS 

<script src=”//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”/_layouts/15/sp.runtime.js”></script>
<script type=”text/javascript”  src=”/_layouts/15/sp.js”></script>
<script type=”text/javascript”>

// Program flow starts here.
var siteUrl = “SHAREPOINTSITEURL”;

//Function to update the list item printed field when user selects print button
//Accepts the list item id as a parameter that is obtained from the query string

function updateListItem(printListItemId) {

var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle(‘LISTNAME’);
//var oListItemId = getQueryStringParameter(“ID”) ;
var oListItemId = printListItemId;

this.oListItem = oList.getItemById(oListItemId);
oListItem.set_item(‘Printed’, ‘Yes’);
oListItem.update();

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
//alert(‘Item updated!’);
}

function onQueryFailed(sender, args) {
//alert(‘Request failed. ‘ + args.get_message() +
// ‘\n’ + args.get_stackTrace());
}

// Function to retrieve a query string value for the list item id
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split(“?”)[1].split(“&”);
var strParams = “”;
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split(“=”);
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}

</script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#8221; type=”text/javascript”></script>

<script>

$(document).ready(function() {

//Hide some fields we don’t want displayed on the printed page

$(“#printedItemId”).hide();
$(“#printedItemLabelId”).hide();

//Hide some built-in SharePoint O365 toolbars etc. we don’t want on the printed page

$(“.ms-descriptiontext”).hide();
$(“.ms-core-suiteLink”).hide();
$(“.ms-toolbar”).hide();
$(“.ms-core-deltaSuiteLinks”).hide();
$(“#suiteBarRight”).hide();

//Handle button click

$(‘.printMe’).click(function() {
$(“#printedId”).text(“Yes”);
$(“.printMe”).hide();
$(“.printMeDraft”).hide();

//obtains listitem id from a field place on the form

//in cases where the list item ID field is not reliable when passed in the querystring from the list created a simple SharePoint 2013 workflow to populate this field when items are added to the list

var printListItemId = $(“#printedItemId”).text();

//Update list item

updateListItem(printListItemId);

//Open browser print preview

window.print(); return false;

});

//Hide buttons to remove them from printed page

$(‘.printMeDraft’).click(function() {
$(“.printMeDraft”).hide();
$(“.printMe”).hide();

//Hide buttons to remove them from printed page

$(“#printedItemId”).hide();
$(“#printedItemLabelId”).hide();
window.print(); return false;

});

});

</script>

//CSS Styles
<style>
.printMe{
color:#666666;
font-weight:bold;
cursor:pointer;
min-width:150px;
}

.printMe:hover{
color:#333333;
font-weight:bold;
cursor:pointer;
}

printMeDraft{
color:#666666;
font-weight:bold;
cursor:pointer;
min-width:150px;
}

.printMeDraft:hover{
color:#333333;
font-weight:bold;
cursor:pointer;
}

.ms-standardheader{
font-size: 13px;

}

.ms-formbody{
font-size: 13px;

}

.ms-formlabel{
font-size: 13px;

}

</script>

</style>

<button class=”printMe”>Print for Crew</button>
<button class=”printMeDraft”>Draft Print</button>

Next Steps:

Package as a SharePoint app that can be added to any site.
Create a custom print template.
Incorporate PDF.

Summary

Even in 2013 it is sometimes necessary to print to paper.  With SharePoint being used more and more for scheduling and tracking systems, workflows, and calendaring the ability to print a SharePoint list item when necessary is an added benefit.  With the advent of CSOM and JSOM developers are increasingly taking advantage of jQuery, HTML, and CSS to tackle specific gaps in the OOB SharePoint features and particularly in the O365 cloud version.

Have fun!

Rod.

About these ads
Posted in Javascript, jQuery, Office 365, Sharepoint, SharePoint 2013
3 comments on “SharePoint 2013-Printing List Item Forms using jQuery and CSS
  1. Bryan says:

    Hello Rod,

    I have attempted to put this into our list; No Luck. I have reviewed everything to include updating the calculated field to my url’s, removed “&#8221″ AND found the same “&#8221″ on the line :

    Is there anything else I am missing on this? The page refreshes when I press the button however, nothing gets printed and the filed does not update. As for the image, when I review the properties for that column, the infromation comes back this way (note, SiteCollection is a generic name for security) http://SiteCollection/Lists/Data%20Request%20Portal/‘http://SiteCollection/PublishingImages/Pages/Data-Request-Portal/_w/printicon_png.jpg‘

    Any help help would be appreciated,

    • rjs456 says:

      Hi,

      Couple ideas,

      You are on SP2013 or current O365 SharePoint?

      Make sure the column type for the calculated column is set to “Currency” This will allow the link to render as HTML.

      Also, take a look to see if the listitem id is getting passed successfully to the updateListItem function. I have a function in the example to retrieve the list item id from the querystring on the list item display form but found it to be unreliable so spun up a simple SPD workflow to populate a new field named “printedItemId” to the list and set it to the built in “Id” field when the item is created.

      Example:

      //in cases where the list item ID field is not reliable when passed in the querystring from the list created a simple SharePoint 2013 workflow to populate this field when items are added to the list

      var printListItemId = $(“#printedItemId”).text();

      //Update list item

      updateListItem(printListItemId);

      Rod.

  2. Bryan says:

    Hello Rod, I am still having the same issue regardless of changes. I am using SP2013 On Prim

    Thanks again,

Leave a Reply

Fill in your details below or click an icon to log in:

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: