Adding a Print Screen button to a system page using the client side API

2 minute read time.

In this article I would like to consider 3 examples of adding a custom print button to a system screen.

The button to be added will open a new version of the current screen that has minimal formatting which will allow the relevant information on the screen to be printed. The screen that will be used for these examples is the Quote Summary page.

and the version for printing will look like this

These three techniques are

  1. The simple crm.addButton("print") method
  2. A combination of the API methods with Button Groups.
  3. Using the API for fine control of button positioning.

The simple crm.addButton("print") method

This is a very simple 'solution' and allows a print button to be added to the page. The code needs to be added to the Custom Content box of the QuoteSummary screen.

[code language="javascript"]
<script>
crm.ready(function(){
crm.addButton("print");
})
</script>
[/code]

You can see from the screen below that this adds the button onto the screen but it does so below the Help button. Although the behaviour is correct there is no positioning information.

A combination of the API methods with Button Groups.

The appearance of the button within the page can be improved by adding the button using the Button Groups technique.

The general idea of this has been discussed in the article "Adding a Print Button to a System Screen".

To do this we need to set up a Button Group for a screen like the QuoteSummary system action.

Administration -> Advanced Customization -> Button Groups

The print button can be created by adding a option using the settings

  • Caption: Print
  • Action: customurl
  • Url Name: javascript:crm.printWindow();
  • Bitmap: print.gif

Note: The advantage about this technique is that the button is placed correctly above the Help button and the SQL clause of the tab option allows further control of when the button should be displayed. The disadvantage is that the order of the button can only be controlled within the group of buttons added using the Button Group.

Using the API for fine control of button positioning.

The greatest control of a new button is provided by passing an options object into the 4th parameter of the Client Side crm.addButton() method.

crm.addButton(imageURL,captionfamily,captioncode,[options])

The property 'index' is used to within the option object to allow the button to be positioned exactly where it is needed within the existing set of buttons.

The code that produced this button can be added into the Custom Content box of the QuoteSummary screen.

[code language="javascript"]
<script>
crm.ready(function(){
crm.addButton("..\\Themes/Img/Color1/Buttons/print.gif","button","print",
{"index": 2,
"href": "javascript:crm.printWindow()"
})
})
</script>

[/code]