Home > InfoPath2010, SharePoint 2010 > Customize SharePoint list using InfoPath2010 form Part4

Customize SharePoint list using InfoPath2010 form Part4

Customize SharePoint list using InfoPath2010 form Part1

Customize SharePoint list using InfoPath2010 form Part2

Customize SharePoint list using InfoPath2010 form Part3

In this post, I’d like to show you how to create print functionality in InfoPath for SharePoint list. The print functionality is provided out of box in InfoPath form library; however it is not available in SharePoint list. Here are the steps to create the print functionality.You can download the new form here.

1. Create print page in the list by first copy and paste the displayifs.aspx and rename the file to Printifs.aspx.

2. Open the page in the SharePoint designer and copy the following javascript to the PlaceHolderTitleAreaClass ContentPlaceHolder.

//You need to refernces jQuery to make the following code work.
//Alternatively , you can only use window.print(); and use css to format the form to print.
<script type="text/javascript">






$("[id='s4-titlerow']").css("height", "0px");

$("body").css("background-color", "white");

$("body").css("zoom", "135%");

$("[id='MSO_ContentTable']").css("margin-left", "0px");

$("[id='MT-BodyContent']").css("width", "900px");

$(".MT-BodyArea").css("width", "900px");

$("[id='MT-Layout']").css("width", "900px");

$(".ms-bodyareacell").css("width", "900px");

$(".s4-wpTopTable").css("border", "none");

$("[id$='XmlFormView']").css("margin-left", "-80px");

$("body").css("margin-top", "-30px");

$(":contains('ybbest')").css("border", "5px solid #FFCC00");



3. Open InfoPath form for the list and create a field called PrintLink

4. Set the default value of printLink that points to the print page I just created before with the query string id.You can download the formula for the default value here.

5. Add a new image that looks like Print button on the display view, then I can set the url to the Print link Field. (The reason I did not use button is that you cannot set the navigate url for the button).

6.Set the url of the image to the PrintLInk field.

7.Next , create the print view.

8. Copy the contents from the display view to print view

9. Finally, go to the printifs.aspx and edit the InfoPath web part to set the view to PrintView.

9. Republish you form you will see the form as shown below

10. If you click the Print button, you will see the print page and print dialog,you can also add the company logo in the print page using css as well.

11.To deploy the customization,you can use the backup and restore content database approach , you can get more details from my previous blog post here.

  1. Roland
    March 21, 2012 at 9:50 pm

    Thanks for job, but for me this print nothings!
    No error in the script, no popup 😦
    Any suggestions?

  2. Roland
    March 21, 2012 at 10:00 pm

    Oops, I put the code in the wrong place.
    No I get a error in the scrip at line “$(document).ready(function(){ ”

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; InfoPath.3)
    Timestamp: Wed, 21 Mar 2012 08:59:27 UTC

    Message: Object expected
    Line: 46
    Char: 1
    Code: 0
    URI: http://pwa.cirb.lan/sites/implementation/Lists/Purchase%20request/Item/Printifs.aspx?ID=53

    • ybbest
      March 22, 2012 at 10:28 am

      The reason you are getting the error is that you did not reference the jQuery library.You can reference jQuery using a content query web part or check my previous blog.
      If you do not want to use jQuery , you can call window.print(); only in the javascript and write up some css to format the form using content query web part.

  1. No trackbacks yet.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: