Geeks With Blogs

News





The SharePoint Hillbilly Fewer Big Words... More Pretty Pictures...

Someone drank the jQuery Kool-Aid…

Here’s a super quick and simple blog post that you may or may not find useful… as always I offer a money back guarantee…

Let’s say you want to print out your SharePoint page but you don’t want the Search Box or anything outside the main content area to print, or maybe you just want one specific web part on the page to print; how would you do that? I spent about 5 minutes Googling it on Bing (I heard that phrase at SPTechCon last week… really wish I could remember who told me, but I can’t take credit for making it up) and found a simple jQuery library which fit my needs perfectly.

There is a jQuery library called “PrintArea”, it can be found at:

PRINTAREA

Using this library and only a few lines of code you can add a print button or link on any page and just print out the section of the page you want to.  First thing you want to do is download the PrintArea.js file and upload it to a document library or deploy it to your file system like I have described in previous posts. Also, make sure you have access to the jQuery library as well. Again, I will just place these in a “scripts” document library for this example. Once you have that done, we are ready to go.

Scenario 1: Printing out a specific Web Part

So, you went to all that trouble to create that pretty DVWP and you would like to give the user the ability to easily print out just that DVWP. What do you do? 

Let’s say you have a DataViewWebPart like the Time List below and you want to print out JUST the time list. 

image

First thing you need to do is add a Content Editor Web Part (CEWP) to the page.

image

You then need to place the following script into the CEWP:

<script type="text/javascript" src="../scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../scripts/PrintArea.js"></script>

 <SCRIPT type=text/javascript>
        function printPage(idOfWebPart){
            var printElement = document.getElementById(idOfWebPart);
            $(printElement).printArea({mode: "popup", popClose: false});
        };
</SCRIPT>

<input type=button value="Print Page" onclick="javascript:printPage('<ID of Web Part>');">
image 

Essentially, all we are doing is putting a button on the page and taking the ID of our DataViewWebPart and passing it to the printPage function when someone clicks the button. The PrintArea library prints out whatever HTML exists in the WebPart and even opens up what we are printing in a new window. Of course you can take this ugly button and make it an image, link, or whatever else your precious heart desires…

Ahhh.. but first we need to know the “id” of the element that contains our DataViewWebPart? How do we do that? Well.. there’s the right way, and then there’s the lazy way… I’m going to do the lazy way, but I’m sure there must be some better way.. again, feel free to enlighten us…  The lazy way is to view the page source and find our “id” in the page source (NOT the “WebPartID”).  This ID should not change, but if you use the same DVWP on another page, it most likely will NOT have the same id.  So.. to view the page’s source, right click on the page and click on… wait for it…. “View Source”… I know! right?

image

Now, when you are viewing the source it WON’T be pretty, but don’t panic… we can do a simple text search to find what we are looking for… I know from looking at my screen shot above, that the first entry in my DVWP is “Entry 1”, so why don’t we do a quick search. When I do that search it takes me to the following line in the source (I broke it up so that it is easier to read):

<td class="" valign="top">
<div WebPartID="45a689ea-04bf-4c51-90bb-824823298e81" HasPers="false" id="WebPartWPQ4" width="100%" allowDelete="false" style="" >
<table border="0" width="100%" cellpadding="2" cellspacing="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
<tr valign="top">
<th class="ms-vh" nowrap>Title</th>
<th class="ms-vh" nowrap>Hours</th>
<th class="ms-vh" nowrap>Entry Date</th>
<th class="ms-vh" nowrap>IssueID</th>
<th class="ms-vh" nowrap>Total Hours</th>&nbsp;
</tr>
<tr class="ms-alternating">
<td class="ms-vb">Entry 1</td>
<td class="ms-vb">4.00</td>
<td class="ms-vb">12/14/2009 12:00 AM</td>
<td class="ms-vb">1</td>
<td class="ms-vb"></td>
</tr>
.
.
.
                

As you see, the entire DVWP is inside the div: <div WebPartID="45a689ea-04bf-4c51-90bb-824823298e81" HasPers="false" id="WebPartWPQ4" width="100%" allowDelete="false" style="" >

What we need is the id… which in this instance is “WebPartWPQ4”, again NOT “WebpartID”.

So, in the html above, we would modify our button to look as follows:

<input type=button value="Print Page" onclick="javascript:printPage(‘WebPartMPQ4’);">

Now, that we are passing in the id of our DVWP, we should be good to go. So, when we click the “Print Page” button I should get a pop up window with a preview of what you will be print as well as a print dialog box:

image

There you go! Nothing much to it…

Scenario 2: Printing out Main Content of Page

So, what if you want to print all the content on the page except for the annoying search box and other artifacts that come across? Well, all you have to do for that is pass in the correct ID for the element that contains all the page content you want. Again, this can be done by viewing the source for the page. I can tell you that for a Out of the Box team site the ID appears to be “MSO_ContentTable

So, when I modify the button html above as follows we should be printing the main content area:

<input type=button value="Print Page" onclick="javascript:printPage(‘MSO_ContentTable’);">

Let’s click the button and see what happens:

image

As you can see, it only brings over the main content of the page (including the print button which you may find annoying).  I have not done a lot of research to determine how global the id “MSO_ContentTable” is.. I suspect it works for all non-publishing sites (but that is just a guess). If I wasn’t so lazy, I dig into it deeper, but hey, I gotta give you guys something to do.. right?

Well.. that’s all for now folks… Not rocket science, and maybe you have come up with a better solution, luckily there is a comments section below so you can enlighten all of us! 

Thanks once more for stopping by, hope you picked up a trick or two…

Posted on Wednesday, October 27, 2010 5:09 PM | Back to top


Comments on this post: Using jQuery to Print a Web Part

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
You have *got* to start using a DOM inspector rather than View Source if you're going to play the jQuery game. Not only is View Source cumbersome, it only shows you the markup as it looked when the page first loaded. The script running in the page can (as you know) alter the DOM, so View Source may show you ancient history.

M.
Left by Marc D Anderson on Oct 27, 2010 6:39 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
Nice post! May have to add that to the mix. How is the cross page printing if you have a lot of items? Just curious!
Left by spevilgenius on Oct 27, 2010 7:01 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
Cross page printing is not too bad vertically, but sucks horizontally. I generally try to tweak the page so that it fits nicely... or of course play with the printer properties before I print.
Left by Mark on Oct 27, 2010 7:18 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
Mark
I always use firebug to view the DOM, but I don't think there is an IE version. I have also used Fiddler and Fiddler2 to do the same type of troubleshooting.
Left by Hal Borland on Oct 27, 2010 7:49 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
Mark, Firebug is THE tool for working with the DOM. To add to Marc's comment, this is actually not enough, as the layout may vary across browsers. IE 8 has a developer tool for that (I only use Firebug, but I know it's bad!).

Now my usual diatribe: I am not sure jQuery helps much here, and you should be able to find similar tools written in plain JavaScript.

Just for the record, I wrote a bookmarklet for Web Part printing (not as fancy as your solution):
http://blog.pathtosharepoint.com/2010/09/27/for-all-sharepoint-end-users-a-print-preview-bookmarklet/
Left by Christophe on Oct 28, 2010 1:51 AM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
Thanks guys, appreciate the help and feedback...

Left by Mark on Oct 28, 2010 8:20 AM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
Can there be another incrementing column based on issue id? Like, for all issue id=1, the second column would be 1,2,3 so on...
Left by VJ on Nov 08, 2010 8:42 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
You could use CSS "media" functionality to hide your print buttons when sending it to the printer.
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html
Left by FaulstiR on Nov 12, 2010 12:50 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
This works great, thanks! I created a custom action that adds a Print button to every listview on my site. Now all views on all my lists and libraries have the print function! Thanks again.
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="GeraldPrintListViewCustomAction"
RegistrationType="List"
RegistrationId="101"
Location="ViewToolbar"
Sequence="1000"
Title="Print">
<UrlAction Url="javascript:
$.getScript('/_layouts/GeraldPrintListViewCustomAction/jQuery.PrintArea.js', function() {
var printElement = document.getElementById('ctl00_MSO_ContentDiv');
$(printElement).printArea({mode: 'popup', popClose: true});

});
"/>

</CustomAction>
</Elements>
Left by russell on May 24, 2011 1:42 PM

# re: Using jQuery to Print a Web Part
Requesting Gravatar...
sir
good work i have just used it and it is very great..
great work..
i am new to sharepoint using this i had just completed my work
thank you for your support
Left by rahul dayal on Aug 12, 2011 6:32 AM

Your comment:
 (will show your gravatar)


Copyright © Mark Rackley | Powered by: GeeksWithBlogs.net