Popups and Browse Windows Part VII
Dialog Windows Part 3
This is part three in the popup dialog portion of this series. It is important to read the first two and test the scripts in the console.
The the article above explains how to build a simple popup dialog with two text field inputs and Ok/Cancel buttons but doesn’t explain how to capture the input data and do something with it. The dialog returns either ok or cancel, depending on which button is clicked. To recap (run the following script in the console):
var dlg={description:{
elements:
[
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "First Name:",
font: "dialog",
bold: true,
},
{
type: "edit_text",
width: 200,
},
]
},
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "Last Name:",
font: "dialog",
bold: true,
},
{
type: "edit_text",
width: 200,
},
]
},
{
type:"ok_cancel",
}
]
}};
app.execDialog(dlg);Item ID
All dialog elements can have an optional item id called ItemID. This property is required only if the element will be referred to elsewhere in the dialog. It must be four characters long and follow the rules for JavaScript variables. We will add ItemID's for the edit_text elements in the dialog above so we can extract the user data for these fields:
var dlg={description:{
elements:
[
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "First Name:",
font: "dialog",
bold: true,
},
{
type: "edit_text",
width: 200,
item_id: "fnam",
},
]
},
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "Last Name:",
font: "dialog",
bold: true,
},
{
type: "edit_text",
width: 200,
item_id: "lnam",
},
]
},
{
type:"ok_cancel",
}
]
}};
app.execDialog(dlg);Handlers
From the Adobe Acrobat JavaScript reference guide:
The dialog box handlers are called when specific dialog box events occur. Each handler is optional and is passed a Dialog object that can be used to query or set values in the dialog box. The supported handlers are listed in the table that follows:
initialize - Called when the dialog box is being initialized.
validate - Called when a field is modified to determine if the value is acceptable (by returning true) or unacceptable (by returning false).
commit - Called when the OK button of the dialog box is clicked.
destroy - Called when the dialog box is being destroyed.
Dialog Functions
dialog.store( ) - stores the dialog data.
dialog.load( ) - loads a specific element. Example: dialog.load({"fnam":"ABC"});
dialog.enable( ) - enables or disables an element. Examples: dialog.enable({"fnam":true});
dialog.enable({"fnam": false});
dialog.end( ) - closes the dialog.
Use The Data Inputs From The Dialog
In this example the values of the two text fields will be inserted into corresponding fields of a PDF form. Before testing, ensure that you have fields name First Name and Last Name or an error will be thrown. The following additions (in bold in the code block) were added to the previous code block:
commit handler - contains dialog.store( ) function and variables for the results of the two text fields.
NOTE: this in this context is the dialog, not the PDF document as is usually the case. If you need to refer to the current document inside the dialog code, define a variable for the document first (outside the dialog script). Example: this=oDoc; then use oDoc in place of this inside the dialog.
Conditional statement for dialog execution - The last five lines of the script. The fields only get filled if the dialog returns ok (commit handler), nothing happens if the cancel button is clicked.
var dlg={
commit: function(dialog)
{
var results = dialog.store();
this.firstName = results["fnam"];
this.lastName = results["lnam"];
},
description:{
elements:
[
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "First Name:",
font: "dialog",
bold: true,
},
{
type: "edit_text",
width: 200,
item_id: "fnam",
},
]
},
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "Last Name:",
font: "dialog",
bold: true,
},
{
type: "edit_text",
width: 200,
item_id: "lnam",
},
]
},
{
type:"ok_cancel",
}
]
}};
if(app.execDialog(dlg)=="ok")
{
this.getField("First Name").value==dlg.firstName;
this.getField("Last Name").value==dlg.lastName;
}If you’re new to JavaScript for Adobe Acrobat, please take a look at my course. Message me and I’ll send you a promo code to save $100.
