0

I have a Sharepoint List with a Custom Action Button displayed on the DispForm, in order to allow a user to open the normal print window with one click. I added the button using Sharepoint Designer.

The options for the button command available in Sharepoint Designer are:

Navigate to Form Initiate Workflow Navigate to URL

At the moment, I have added the following command in the Navigate to URL field:

javascript:window.print()

This prints the list item via the normal default print window. the output is a screen-grab print, which includes all the background design, which I dont want. Of course, I can manually configure my Print settings to get rid of all the Webpage clutter (background etc), but I dont want the User to have to do this every time.

I want the custom button to print the contents of the List Item in a Print Friendly way, does anyone know a better way of doing this than just calling up the javascript.window.print() command?

I considered using a CEWP in the DispForm to call up a javascript .txt file, but i’d rather use a Custom button on the ribbon.

My gold standard would be printing the List Item fields into a Word/PDF document template, if anyone knows how to do that, that would be great.

Assume I know nothing, and thank you!

Sorry if this has been asked before, please be patient with a SharePoint newbie! enter image description here

1

In order to print properly, you will have to add a css file with media specificed as print only

<link rel="stylesheet" type="text/css" href="../path/to/Print.css" media="print">

Then in that css file, you selectively hide what you do not want to show up. Resize things as needed to make it look good on the page. Some basics I've used to get it to be a full page

#ms-designer-ribbon, #s4-titlerow, #notificationArea,.pagerControls, div.control,table.ms-core-tableNoSpace.ms-webpartPage-root{
    display:none !important;
}
#contentRow,#contentBox,#s4-bodyContainer{
    margin:0;
    padding:0;
    width:0px;
}
#s4-workspace{
    width:297mm !important;
    height:210mm !important;
}
  • Thanks BigRaj, when you say add a CSS file, where specifically do you mean? Do I insert the <Link ... script in the URL path on SharePoint designer, and link it to a .txt file in site assets? – Sam W Jun 12 at 4:41
  • So create a css file in site assets with the css I provided above in it. Then using SharePoint designer, edit the DispForm.aspx for the list/library you’re working on and add the <link media=“print” type=“text/css” href=“<path to css file>” to that page – BigRaj Jun 12 at 19:51
  • Thanks, when you say add it to that page, do you mean at the bottom of the aspx code, or in the Navigate to URL link, or somewhere else? Sorry if that is a dim question! – Sam W Jun 12 at 20:32
  • you should be able to add it to either the Head or Body tags on the page. – BigRaj Jun 13 at 4:20
  • I added a screenshot of the DispForm code on SharePoint designer. I’ve tried inserting the <link... line to a few different positions, but it’s not working. Can you tell me which line I should be inserting it into? – Sam W Jun 13 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.