Share via

Print specific SharePoint Fields using JQUERY

  • Article

​Code Background

​​This code snippet using jQuery functions can be used to print out specific SharePoint Form Fields

This requires two third party jQuery

The code snippet has three parts

  • Assignment of values to variables from SharePoint fields using jQuery
  • Creating an HTML container for printing
  • Printing using jQuery function

 

<script type="text/javascript" src="/sites/Intranet/Code/jQuery/jQuery.min.js"></script>
<script type="text/javascript" src="/sites/Intranet/Code/jQuery/spjs-utility.js"></script>
<script type="text/javascript" src="/sites/Intranet/Code/jQuery/jQuery.printElement.min.js"></script>
 
<script language="JavaScript" type="text/javascript">
//DMC: 10/2013
//Use to print specific fields from a SharePoint Form
function PrintLabel()
{   
    //Get Field Values using spjs-utility functions
    var myTitle = getFieldValue("Title",true); //Title
    var myField1 = getFieldValue("myField1",true); //Internal Name of your field
    var myField2 = getFieldValue("myField2",true); //Internal Name of your field
 
    //Create a dynamic html to format the print layout
    sHtml = "<div id='dvPrint' style='font-family:arial;width:350px'><table>";
    sHtml += "<tr style='height:50px;font-size:20px;'><td colspan='2'>" + myField1 + "</td></tr>";
    sHtml += "<tr style='height:50px;font-size:20px;'><td colspan='2'>" + myField2 + ";" +  myIntPart + "</td></tr>";
    sHtml += "</table></div>";
     
    //Print the HTML element using jQuery.printElement
    $(sHtml).printElement();
}
</script>
<div>
    <input type="button" value="Print Label" onclick="PrintLabel();" />
</div>

​Code Implementation

Here's the instructions on how you can add your code on a display form

  1. Go to the Library where you want to add the Print functionality
  2. Under the ribbon, click List
  3. Under Form Web Parts, Click Default Display Form 
  4. Add an HTML For Web Part (For Testing Purpose)
  5. Edit the code snippet below to add the fields you want to print and for formatting of the output
  6. Click Save

NOTES
-You can save the code snippet into an html file, add it to a code library on your SharePoint site, and just reference it on the form using a CEWP
-Ensure that you have downloaded the two third party JS above and reference it properly on your code
-You can remove the unnecessary header and footer created by the browser by following this link. 

Practical Use

This code snippet can be used for printing specific SharePoint Form fields and can be place on your SharePoint forms using either a HTML Form Web Part or through a CEWP.

Printing SharePoint fields can be done through a simple window.Print function however there might be a requirement wherein you would like to print specific fields only.

The HTML part of this snippet gives you the ability to format how the Print Out should look like.

References