Difference between revisions of "How to enhance your PDF forms with JavaScript"

From Scribus Wiki
Jump to: navigation, search
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''Introduction'''
+
[[Category:PDF_Forms]][[Category:EN]][[Category:PDF]]
 +
 
 +
=Introduction=
 +
{{TOC_Forms_sidebar}}
  
 
If you have attempted the previous PDF how-to’s, you will be aware that you can create some powerful forms by using Scribus and Acrobat Reader. Unfortunately, Adobe has put restrictions on Reader so that it does not have all the capabilities of Acrobat Professional.  However, there are many useful features still available, especially with using JavaScript to make Scribus PDF forms very useful.  
 
If you have attempted the previous PDF how-to’s, you will be aware that you can create some powerful forms by using Scribus and Acrobat Reader. Unfortunately, Adobe has put restrictions on Reader so that it does not have all the capabilities of Acrobat Professional.  However, there are many useful features still available, especially with using JavaScript to make Scribus PDF forms very useful.  
  
  
'''Information and References Available'''
+
=Information and References Available=
 
 
The Adobe Web Site has two free references available on JavaScripting
 
 
 
http://www.adobe.com/devnet/acrobat/javascript.html
 
 
 
Acrobat JavaScript Scripting Guide (PDF, 2.5M)
 
 
 
Acrobat JavaScript Scripting Reference (PDF, 7.1M)
 
 
 
'''Acrobat Community'''
 
 
 
'''JavaScript Corner'''
 
 
 
http://www.acrobatusers.com/tech_corners/javascript_corner/index.php
 
 
 
'''JavaScript User Forums'''
 
 
 
http://www.adobeforums.com/cgi-bin/webx?13@@.3bbedaa6
 
 
 
'''PDF Planet'''
 
 
 
http://www.planetpdf.com/
 
 
 
 
 
'''Some useful JavaScript examples'''
 
 
 
 
 
 
 
'''1. Insert the current date into a Text Field (DateField) when the PDF is opened.'''
 
 
 
 
 
snip--------------------------------------------
 
 
 
''function date()
 
  
{var fld = this.getField("DateField");
+
The Adobe Web Site has [http://www.adobe.com/devnet/acrobat/javascript.html two free references] available on JavaScripting:
  
 +
* Acrobat JavaScript Scripting Guide (PDF, 2.5M)
  
fld.value = util.printd("dd mmmm yyyy",new Date());
+
* Acrobat JavaScript Scripting Reference (PDF, 7.1M)
  
 +
==Acrobat Community==
  
}
+
* [http://www.acrobatusers.com/tech_corners/javascript_corner/index.php JavaScript Corner]
  
date(); // call my function''
+
* [http://www.adobeforums.com/cgi-bin/webx?13@@.3bbedaa6 JavaScript User Forums]
  
snip--------------------------------------------
+
* [http://www.planetpdf.com/ PDF Planet]
  
To place this function, on Menu select Edit - > JavaScripts -> Add
+
=Some useful JavaScript examples=
  
  
You can cut and paste the code from this page. There must be a Text Field on the page named DateField.
 
  
 +
==Insert the current date into a Text Field (DateField) when the PDF is opened==
  
 +
''function date() {
 +
  var fld = this.getField("DateField");
 +
  fld.value = util.printd("dd mmmm yyyy",new Date());
 +
}
 +
date(); // call my function''
  
'''2. Insert the current year into a Text Field (Year) when the PDF is opened.'''
 
  
 +
To place this function,  select''' Edit - > JavaScripts -> Add''' in Scribus menu.
  
snip--------------------------------------------
+
You can cut and paste the code from this page. There must be a Text Field on the page named '''DateField'''.
  
''function Year()
+
==Insert the current year into a Text Field (Year) when the PDF is opened==
  
{var fld1 = this.getField("Year");
+
function Year() {
 +
  var fld1 = this.getField("Year");
 +
  fld1.value = util.printd("yyyy",new Date());
 +
}
 +
Year(); // call my function 
  
  
fld1.value = util.printd("yyyy",new Date());
+
To place this function, on Menu select''' Edit - > JavaScripts -> Add'''
  
 +
You can cut and paste the code from this page. There must be a Text Field on the page named '''Year'''
  
}
+
==Hide a Text Field (zzztext) when the PDF is viewed on Screen but allow the field to Print==
  
Year(); // call my function''
+
function HideView() {
 +
  var title = this.getField("zzztext");
 +
  title.display = display.noView;
 +
}
 +
HideView();// call my function''
  
snip--------------------------------------------
 
  
 
To place this function, on Menu select Edit - > JavaScripts -> Add
 
To place this function, on Menu select Edit - > JavaScripts -> Add
  
  
You can cut and paste the code from this page. There must be a Text Field on the page named Year
+
You can cut and paste the code from this page. There must be a Text Field on the page named '''zzztext'''
  
 
+
==Create a Print Button==
 
 
'''3. Hide a Text Field (zzztext) when the PDF is viewed on Screen but allow the field to Print.'''
 
 
 
 
 
snip--------------------------------------------
 
 
 
''function HideView()
 
 
 
{var title = this.getField("zzztext");
 
 
 
title.display = display.noView;
 
 
 
}
 
 
HideView();// call my function''
 
 
 
snip--------------------------------------------
 
 
 
To place this function, on Menu select Edit - > JavaScripts -> Add
 
 
 
 
 
You can cut and paste the code from this page. There must be a Text Field on the page named zzztext
 
 
 
 
 
 
 
'''4. Create a Print Button'''
 
  
  
Line 120: Line 78:
 
Next select the Action Tab –> choose JavaScript and then in the default Mouse Up event -
 
Next select the Action Tab –> choose JavaScript and then in the default Mouse Up event -
  
Click on Edit and insert the following
+
Click on Edit and insert the following:
  
snip--------------------------------------------
+
var pp = this.getPrintParams();
 +
pp.interactive = pp.constants.interactionLevel.silent;
 +
pp.printContent = pp.constants.printContents.formFieldsOnly;
 +
this.print(pp);
  
''var pp = this.getPrintParams();
+
==Create a Text Field with the Date Printed which only appears on the printed document==
  
  
pp.interactive = pp.constants.interactionLevel.silent;
+
function Print(){
 +
  var oDate = new Date(); // get the current date time object
 +
  var sDate = util.printd("mm/dd/yyyy h:mm t" , oDate); // format date time string
 +
  this.getField("TimePrint").value = "Printed: " + sDate + "m"; // fillin the field value
 +
}
 +
Print();// call my function''
  
 +
To place this function, on Menu select Edit - > JavaScripts -> Add
  
pp.printContent = pp.constants.printContents.formFieldsOnly;
 
  
 +
You can cut and paste the code from this page. There must be a Text Field on the page named TimePrint.
  
this.print(pp);''
 
  
snip--------------------------------------------
+
You will also need to create a HideView function for the TimePrint Field some that the field is hidden from view until the document is printed.
  
 +
==Create a Combo Box which updates a text field==
  
 +
* create the Combo Box (Text1) with the content:
 +
<pre>
 +
one
 +
two
 +
three
 +
</pre>
 +
* create the Text Field (Text2)
 +
* add the following action on "on blur" to Text1:
 +
<pre>
 +
var one = this.getField("Text1");
 +
var two = this.getField("Text2");
 +
if (one.value == 'one') {
 +
    two.value='500'
 +
} else if (one.value == 'two') {
 +
    two.value='300'
 +
}
 +
</pre>
  
'''5. Create a Text Field with the Date Printed which only appears on the printed document.'''
+
==Create a Checkbox which updates a text field==
  
 
+
<pre>
snip--------------------------------------------
+
var one = this.getField("Checkbox1");
 
+
var two = this.getField("Text1");
''function Print()
+
if (one.value == 'Yes') {
 
+
    two.value='500'
{var oDate = new Date(); // get the current date time object
+
} else if (one.value == 'Off') {
 
+
    two.value='300'
var sDate = util.printd("mm/dd/yyyy h:mm t" , oDate); // format date time string
 
 
 
this.getField("TimePrint").value = "Printed: " + sDate + "m"; // fillin the field value
 
 
 
}
 
}
 
+
</pre>
Print();// call my function''
 
 
 
snip--------------------------------------------
 
 
 
To place this function, on Menu select Edit - > JavaScripts -> Add
 
 
 
 
 
You can cut and paste the code from this page. There must be a Text Field on the page named TimePrint.
 
 
 
 
 
You will also need to create a HideView function for the TimePrint Field some that the field is hidden from view until the document is printed.
 

Latest revision as of 06:46, 14 January 2011


Introduction

edit
  1. Your first PDF form with Scribus
  2. How to create an e-Mail PDF Survey Form
  3. Your second PDF form with Scribus
  4. Enhance PDF forms with JavaScript

If you have attempted the previous PDF how-to’s, you will be aware that you can create some powerful forms by using Scribus and Acrobat Reader. Unfortunately, Adobe has put restrictions on Reader so that it does not have all the capabilities of Acrobat Professional. However, there are many useful features still available, especially with using JavaScript to make Scribus PDF forms very useful.


Information and References Available

The Adobe Web Site has two free references available on JavaScripting:

  • Acrobat JavaScript Scripting Guide (PDF, 2.5M)
  • Acrobat JavaScript Scripting Reference (PDF, 7.1M)

Acrobat Community

Some useful JavaScript examples

Insert the current date into a Text Field (DateField) when the PDF is opened

function date() {
 var fld = this.getField("DateField");
 fld.value = util.printd("dd mmmm yyyy",new Date());
}
date(); // call my function


To place this function, select Edit - > JavaScripts -> Add in Scribus menu.

You can cut and paste the code from this page. There must be a Text Field on the page named DateField.

Insert the current year into a Text Field (Year) when the PDF is opened

function Year() {
  var fld1 = this.getField("Year");
  fld1.value = util.printd("yyyy",new Date());
}
Year(); // call my function  


To place this function, on Menu select Edit - > JavaScripts -> Add

You can cut and paste the code from this page. There must be a Text Field on the page named Year

Hide a Text Field (zzztext) when the PDF is viewed on Screen but allow the field to Print

function HideView() {
 var title = this.getField("zzztext");
 title.display = display.noView;
}
HideView();// call my function


To place this function, on Menu select Edit - > JavaScripts -> Add


You can cut and paste the code from this page. There must be a Text Field on the page named zzztext

Create a Print Button

Create a Button Field

Right click with your mouse on the “Print” Button

A menu pops up and select PDF Options –> Field Properties

Next select the Action Tab –> choose JavaScript and then in the default Mouse Up event -

Click on Edit and insert the following:

var pp = this.getPrintParams();
pp.interactive = pp.constants.interactionLevel.silent;
pp.printContent = pp.constants.printContents.formFieldsOnly;
this.print(pp);

Create a Text Field with the Date Printed which only appears on the printed document

function Print(){
 var oDate = new Date(); // get the current date time object 
 var sDate = util.printd("mm/dd/yyyy h:mm t" , oDate); // format date time string 
 this.getField("TimePrint").value = "Printed: " + sDate + "m"; // fillin the field value 
}
Print();// call my function

To place this function, on Menu select Edit - > JavaScripts -> Add


You can cut and paste the code from this page. There must be a Text Field on the page named TimePrint.


You will also need to create a HideView function for the TimePrint Field some that the field is hidden from view until the document is printed.

Create a Combo Box which updates a text field

  • create the Combo Box (Text1) with the content:
one
two
three
  • create the Text Field (Text2)
  • add the following action on "on blur" to Text1:
var one = this.getField("Text1");
var two = this.getField("Text2");
if (one.value == 'one') {
    two.value='500'
} else if (one.value == 'two') {
    two.value='300'
}

Create a Checkbox which updates a text field

var one = this.getField("Checkbox1");
var two = this.getField("Text1");
if (one.value == 'Yes') {
    two.value='500'
} else if (one.value == 'Off') {
    two.value='300'
}