Difference between revisions of "HowTo:Add a Custom Print Button to a Form"

From AgileApps Support Wiki
imported>Aeric
(Created page with "This code adds a '''[Custom Print]''' button to a Form, when placed in an On Load Form Script. In this case, the goal is to restrict a user who has access to that form to…")
 
imported>Aeric
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
This code adds a '''[Custom Print]''' button to a [[Form]], when placed in an On Load [[Form Script]]. In this case, the goal is to restrict a user who has access to that form to a specific template. (The standard Print operation makes all templates available. A standard [[Action]] button, meanwhile, is present in every form. This code puts the button in a specific form, to restrict template access for users whose role causes it to be displayed.)
<noinclude>
{{Orientation |Designers | Intermediate | 5}}
</noinclude>This code adds a '''[Custom Print]''' button to a [[Form]], when placed in an On Load [[Form Script]].  
 
In this case, the goal is to restrict a user who has access to that form to a specific template. (The standard Print operation makes all templates available. A standard [[Custom Form Action]] button, meanwhile, is present in every form. This code puts the button in a specific form, to restrict template access for users whose role causes it to be displayed.)
<noinclude>
;Set up the custom print button:
# Go to '''[[File:GearIcon.png]] > Customization > Objects > {object} > Forms > {form}
# Click '''[Form Script]'''
# Click '''[Edit]'''
# In the '''On Load Script''' area, enter the code below.
# Click '''[Save]'''
 
;JavaScript code:
</noinclude>
:<syntaxhighlight lang="javascript" enclose="div">
:<syntaxhighlight lang="javascript" enclose="div">
$("#print_button").remove();  
$("#print_button").remove();  
Line 6: Line 20:
);  
);  
</syntaxhighlight>
</syntaxhighlight>
:;How it Works:
 
::; <tt>$("#print_button").remove()</tt>: Remove the standard print button
;How the code works:
::; <tt>$("#edit_button").parent().append</tt>: Finds the location of the edit button (present in every form), gets it's parent (the toolbar), and adds the new button to it.
:; <tt>$("#print_button").remove()</tt>: Remove the standard print button
::; <tt>class='lj-button fg-button ui-state-default ui-corner-all'</tt>: The standard CSS style elements for platform buttons.
:; <tt>$("#edit_button").parent().append</tt>: Finds the location of the edit button (present in every form), gets it's parent (the toolbar), and adds the new button to it.
::; <tt><nowiki><input type='button' ...</nowiki></tt>: Define the button. (The entire string is one uninterrupted line.)
:; <tt>class='lj-button fg-button ui-state-default ui-corner-all'</tt>: The standard CSS style elements for platform buttons.
::; <tt>onClick=\"javascript:lj_printRecord(...</tt>: Specify the button's action
:; <tt><nowiki><input type='button' ...</nowiki></tt>: Define the button. (The entire string is one uninterrupted line.)
:; <tt>onClick=\"javascript:lj_printRecord(...</tt>: Specify the button's action
<noinclude>
<noinclude>


''Learn more:'' [[JavaScript Functions#lj_printRecord]]
''Learn more:'' [[JavaScript Functions#lj_printRecord]]
</noinclude>
</noinclude>

Latest revision as of 19:51, 14 May 2013

For:   Designers
Level: Intermediate
Time:  5 minutes

See more:
    ◾ HowTo Guides

This code adds a [Custom Print] button to a Form, when placed in an On Load Form Script.

In this case, the goal is to restrict a user who has access to that form to a specific template. (The standard Print operation makes all templates available. A standard Custom Form Action button, meanwhile, is present in every form. This code puts the button in a specific form, to restrict template access for users whose role causes it to be displayed.)

Set up the custom print button
  1. Go to GearIcon.png > Customization > Objects > {object} > Forms > {form}
  2. Click [Form Script]
  3. Click [Edit]
  4. In the On Load Script area, enter the code below.
  5. Click [Save]
JavaScript code
$("#print_button").remove(); 
$("#edit_button").parent().append(
"<input type='button' id='customPrint' value='Custom Print' class='lj-button fg-button ui-state-default ui-corner-all' onClick=\"javascript:lj_printRecord('default_print_layout=template&show_print_layout=no&default_print_document=jsp&default_page_orientation=landscape&default_pdf=yes&show_pdf=no&print_immediately=yes');\">"
);
How the code works
$("#print_button").remove()
Remove the standard print button
$("#edit_button").parent().append
Finds the location of the edit button (present in every form), gets it's parent (the toolbar), and adds the new button to it.
class='lj-button fg-button ui-state-default ui-corner-all'
The standard CSS style elements for platform buttons.
<input type='button' ...
Define the button. (The entire string is one uninterrupted line.)
onClick=\"javascript:lj_printRecord(...
Specify the button's action


Learn more: JavaScript Functions#lj_printRecord