SharePoint 2013-Printing List Item Forms using jQuery and CSS

UPDATE 4/26/2014:

Have heard from a lot of people who are having some challenges putting all the pieces of this solution together, particularly the calculated field for the print icon.  Providing detailed instructions and a screenshot to get started.

Start from a new team site:

  • Create a new subsite from the Collaboration template using the Team Site template.
  • Use listprint for the site name and URL.
  • Create a new picture library named “Images1″
  • Upload the print icon to the picture library.  Download image here
  • Create a custom list named “List”
  • Add the following columns to the list:
  • Column name: Printed | Column Type: Text | Default value: No
  • Column name: Print Item | Column Type: Calculated Column  Download calculated field formula example here

Capture

 

 

 

 

 

 

 

 

  • Add a new item to the list.
  • Click on the new item link.
  • From the standard DispForm.aspx page select Settings > Edit page
  • Add a new Script Editor web-part to the page (located in the Media and Content Category in web part gallery)
  • Set the Script Editor web-part properties zone index to 2 from the web part settings, layout section.
  • Select Edit Snippet in the Script Editor webpart and paste in the following jQuery/CSS-Download script here
  • Update the siteUrl variable in the jquery to use your site URL as required.
  • Select Page, Stop Editing from the SharePoint ribbon.
  • From site contents select “List”
  • Select a link to one of the two items in the list, select the Print button.
  • From site contents select “List” and notice the first item in the list has been updated to reflect Printed=Yes.

That’s it to getting started.

I have paired down the solution to get you started and make additional customizations specific to your requirements for example the listitemid that gets updated is hard-coded to the first item id since my solution depends on a SharePoint Designer workflow which I did not package up in the wsp (Coming soon) This can be easily updated to use your own jQuery inside the script editor web-part to obtain from the querystring on dispform.aspx or from a custom field that is populated from a SPD workflow when the item gets created.  You can easily create a list on any existing SharePoint 2013 or Office 365 SharePoint site providing you update the script and calculated columns to reflect the correct URLs and image source in the jQuery embedded in the Script Editor web-part and also the Print Item calculated field formula.

Thanks, Rod.

Added Functionality verses standard list item form:

* 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.

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

10 thoughts on “SharePoint 2013-Printing List Item Forms using jQuery and CSS

  1. 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,

    • 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. Hi, This looked really promising but I got an error when adding the calculated field. I didn’t get very far! And then I didn’t know where to put the JS and CSS stuff – all in the web part or in a .js file?
    Other than that, the article looks great! :-)

    • Hi Paul,

      Thanks, I provided an update today with a wsp you can use to get started. The calculated field is the tricky part and one I have heard from quite of few as a blocking issue. For clarification I create a new field named Print Item using the calculated field type, then in the formula I place the URL to the listitemform and the src to the image file. For the data type returned from this formula setting I set to “Currency” (This data type will display the HTML for the link while the Single line of text will only return static text)

      • Hi, Thank you for the update. I uploaded the wps file to my solution gallery but when I tried to activate it, I got the following message: Something went wrong…This solution cannot be activated because its functionality depends on another solution that does not exist:DepartmentContactInfo.wsp, Id: 012ea98d-881a-4d1e-8e8a-5aeb53820b6f. First add the other solution to the Solution Gallery, activate that solution, and then repeat activation of this solution.
        Can you help with this? Sorry to be a pain.

      • Hi Paul,

        Yes, the wsp had a feature dependency I didn’t detect in my SP2013 development vm. Given there are potentially a number of dependencies I provided a step-by-step including the example calculated field formula and jQuery/CSS file downloads. Let me know how it goes.

  3. Hi, I am very nearly there now. I can see the printer icon on the list but when I click print, it takes me to a page where the Print Item html at the bottom of the list of fields. I am not seeing a PRINT button. If I can get your email address, I can send you some screen shots. I’m getting quite excited that this elegant solution will work.

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