Skip to main content
Mitratech Success Center

Creating eForms

In this easy to follow guide you will learn how to create Process Director eForms.

In order to create Process Director eForms, you will need to obtain and install the Process Director eForm builder plug-in for Word. You can obtain the plug-in from the BP Logix Support web site (https://support.bplogix.com) (click on the Downloads button). If you register for a support portal login, you’ll not only get access to the Downloads page to obtain the plug-in, but you’ll also get access to all of the other Support site features as well. (The support portal is available to customers on maintenance, and those who are involved in an active trial. If you have any questions about access to the support portal, please speak with your sales representative.) You should periodically go to the Support site to see if a new version of the plug-in is available for download, to ensure that you always have the most recent plug-in version.

Also, each time you check out an eForm for editing, Process Director will automatically do a check to see if you have the plug-in installed. If you do not have the plug-in, you will be given a link to download and install it.

Adding Controls to an eForm

At the top of the Microsoft Word screen, you should see a row of Ribbon Tabs, labeled HOME, INSERT, DESIGN, etc. (The menus may look slightly different depending on what version of Word you are using. We recommend Word 2010 or later.) Assuming you have correctly installed the plug-in, one of these Ribbon Tabs will be labeled "ADD-INS". Click this Ribbon Tab to display the Add-Ins ribbon. In the In the Add-Ins ribbon, there will be a dropdown menu labeled, “BP Logix eForm Controls”. All of the Process Director eForm controls are available from this dropdown menu.

The dropdown menu itself has a number of submenus, each of which contains a number of controls. The basic menu is shown in Figure 22: BP Logix eForm Controls Menu.

image

To place a control on the Word page, simply place your cursor at the location where you want the control to appear, then select the desired control from the menu. The new control will immediately appear in the selected location.

Editing Control Properties

Every BP Logix control has a set of properties that you can edit. The example below shows the Properties dialog box for a Section control.

image

Most controls have a Name property that you can customize. The Name property will be the control name you see anywhere in Process Director where the control is referenced. In the example above, note that there is a default Name property already filled in. You should always change the default Name property to something more meaningful. Later in the process, when you are looking at a long list of control names within your form, using the generic names will make it quite difficult to identify the specific control you’re looking for.

It's extremely important to correctly name eForm controls, as there are some restrictions that you must observe when naming controls. As you change the Name properties, you can use letters, numbers, and underscores (_), and names are not case sensitive. You cannot, however, use spaces or other special characters in the Name property. Also, you should ensure that you do not give two different controls the same Name. Process Director will not correct you at design time if you name a field incorrectly, but when you run the eForm, an error message will appear that informs you that the eForm control is improperly named, and cannot be displayed in Process Director.

Conversely, in the Text property, you can use any characters, and the value you put into the Text property will appear verbatim on your eForm page.

Every control has a properties box like this, although some have more properties to work with, and some have fewer. You can always open the properties box for a control by double-clicking the control. Similarly, you can always save the properties and close the dialog box by clicking the OK button.

Backing Up Your Work

There's nothing worse than putting in a couple of hours of solid work on the computer, only to see it all lost when some glitch causes the item you're working on to close without saving. All of your work is lost. You should make it a practice to regularly save your work, so that this doesn't happen. One way to ensure that your project doesn't get lost or corrupted is to regularly export it.

You will be working to recreate the sample project in a called My Objects. You should periodically export this folder to ensure you never lose your work. You can do this by navigating to the Default Partition folder in the content list. When you've done so, find the My Objects folder and click the check box to the left of the folder name. When you do so, a list of options will appear. Click the option link that is labeled, "Export".

image

The default option to save an XML file to your local drive should already be selected. If it isn't, select it and click the OK button. A popup will appear asking if you want to open or save the exported XML file. Click the Save button, and the file will be downloaded to your computer, in the location specified by your browser settings. You can keep it there in case you need to import the file again later.

Alternatively, you can select the Create backup of folder in Content List radio button, and the folder will be backed up in Process Director, and will be displayed as a file in the Content List.

image

If you need to restore your backup later, first navigate to the Default Partition folder again. If you've saved your backup to the Content List, select the backup file and download it to your local hard drive. Once you have

downloaded the backup file (or if you previously saved your backup to the local hard drive, instead of the Content List) select Import Objects from the dropdown control labeled "Create New…", which is located in the upper right portion of your screen to open the Import Objects screen. Click on the Browse button to open the file dialog box to navigate to the location of your XML backup file and select the file.

Once you've done so, click the Open button to return to the Import Objects screen. The file you've selected should now appear in the text box located next to the Browse button. Click the OK button to import your project, and replace the My Objects folder with the imported version. The old version will be overwritten by the imported objects.

You shouldn't see an error at this stage, but, if you do, contact BP Logix Support for help.

Designing the eForm Template

Let’s begin by logging into Process Director as the user “marty”. If the content list doesn’t appear automatically when you log in, then click on the Content List button at the top of the Process Director screen. Once the content list appears, navigate into the My Project folder that is located in the Default Partition folder. This folder is where we will begin creating the objects for the sample process.

In the My Project folder, select “eForm Definition” from the Create New… dropdown that is located on the upper right of the Process Director screen. The Create eForm screen will open.

image

Name the eForm by putting the title in the eForm Name textbox. For the new sample project, since the original objects already exist in the parent folder, we will name the new eForm “Travel Expenses Request”. Now, type in a short description of the form in the Description textbox. Click the OK button to create the new eForm definition. The Edit screen for the new Travel Expenses Request eForm will appear automatically.

image

Click the Check Out and Edit button to start the process of checking out the blank eForm template so no one else can edit it, and opening Microsoft Word to begin the template editing process. The first thing you’ll see is a helpful dialog box informing you that this process is starting.

image

If, instead, you are presented with a Windows dialog warning you that the server is not trusted, you should add the server on which Process Director is running to your list of trusted servers. If you don't know how to do this, or your IT department has locked you out of changing these settings, you will need to seek assistance from an IT specialist.

When the blank Word document appears, start by entering a title for the eForm at the top of the page. Once you’ve done that, hit the [ENTER] key to start a new paragraph. We are now ready to begin adding eForm controls.

As you follow the instructions below, be sure to save your work frequently, just as you would if you were composing any other lengthy Word document.

We need to add the first section to the form. To insert the section header, select BP Logix eForm Controls >> Sections/Tabs >> Section from the dropdown menu.

This will place the section control into the eForm, in the space where your cursor is located.

image

Once the section header appears on the page, open the Properties dialog box, and set the Name property to "UserInformationSection", and the Text property to "User Information".

With the section header in place, move the cursor to the next line, where the section’s content will go. Begin adding section content by creating a table that consists of two columns and five rows. In the first column of the table, type in the following five values in the five rows, as row headers:

  • Submitter
  • Submission Date
  • Sequence Number
  • Initial Approver
  • Charge Number

Place your cursor in column two of the first row, and insert a UserPicker control into the cell. Change the Name property to “Employee”, then ensure the Picker Type property is set to Popup, as displayed in Figure 30: User Picker Properties Dialog Box.

image

In the second row of the table, insert a Date Field control. Set the Name property to “SubmissionDate” and the Picker Type property to “Date”.

Place an Input control in the third row. Set the Name property to “ExpenseRequestNumber".

Later, we will use the eForm Definition to automatically display the eForm submitter’s name, date and sequence number as default values.

Insert a User Picker control in the fourth row. Open the Properties dialog box and set the Name property to “Approver”.

Add a Dropdown control to the fifth row. Set the Name property to “ChargeNumber”.

Move your cursor to the next blank line under the table to which you’ve just added the controls. (Make sure you’re actually below the table and not inside it.) Insert a Section End control. Once you’ve added the Section End, this section of the form is complete.

It should look something like Figure 31: Sample eForm User Information Section - Design View.

image

Let’s move to the next section of the form, which contains the information about expenses.

Go to the blank line under the Section End that you just placed on the page, and add a new section control. Set the Name property to “ExpensesSection” and the Text property to “Expenses”. Be sure the Can Collapse? and Expanded check boxes are checked.

image

Go to the next blank line beneath the section header you just created. Insert a table with six columns and three rows. In the original sample form, there are background colors and text colors applied to the table cells. You may wish to experiment with styling the table’s colors as well. Be sure, however, that you do not try to set column widths or row heights.

In the first row of the table, type in the column labels, which are:

  • Expense Date
  • Air Fare
  • Lodging
  • Car Rental
  • Daily Amounts

The last column of the table will not have a label.

In the second row of the table, we are going to create an array.

Place your cursor in the first column of row two, and add an Array Start control. Set the Name property to “ExpensesList”.

We have now created the start of our array. Every control we place in the table from this point on will become part of the array until we notify Process Director that the array is complete by placing an Array End control (in the rightmost column).

The cursor should now appear immediately to the right of the Array Start control, in the first column of row two. Without moving the cursor, add a Date Field control and set the Name to “ExpenseDate” and the Picker Type to “Date”.

Place the cursor in column two of row two, and insert an Input control. Set the Name property to “AirFare” and the Columns property to “10”. Since we don't need the control to be as large as the default size of 30 characters, setting the Columns property will make the input control smaller than the default. Doing so provide adequate space for the data that will be entered into the control, but take up less unneeded space than the default control size.

Repeat the previous step by adding Input controls to columns three and four of the table row, setting the Name properties to “Lodging” and “CarRental” respectively, to match the labels in the column headers. Set the Columns property to “10” for both of the input controls.

In column five of the row, add a Calculation control to add up all of the expense items on the row. Set the Name property to “DailyAmountTotal”.

Next, we will need to set the actual calculation that will be used in the DailyAmountTotal field. To create the calculation, we must use Process Director system variables.

Process Director enables you to do calculations, and access system data or eForm field values through the use of these system variables, which are also called "sysvars" for short. A system variable is simply an object that holds a value, and which can be accessed from anywhere within Process Director. System variables are always identified by placing the sysvar’s name inside curly brackets ({}).

The value of any field on an eForm can also be accessed by referring to the field name as a sysvar. eForm field variables can be written formally as {Form:FieldName}. It is not necessary to use the full, formal syntax for form fields, however, as Process Director assumes that a system variable beginning with "{:" is a form field variable. So, the eForm field called Airfare can be addressed as a sysvar by using the syntax {:Airfare}.

One common use of sysvars is to perform calculations on forms through the use of Calculation controls. The DailyAmountTotal calculates the total amount of daily expenses. The Airfare, Lodging, and CarRental fields contain numerical amounts, which means that we can do math on the values they store.

In the Formula property, we have to add in a mathematical formula that tells the control what calculations we want it to do. Enter the following mathematical formula into the Formula property box:

{:AirFare} + {:Lodging} + {:CarRental}

Let’s translate what this formula means. The curly braces (“{}”) tell Process Director that this is a sysvar value. The “:” prefix means that the sysvar represents a field on the eForm. The form field names (AirFare, Lodging, and CarRental) tell Process Director that these are the form fields that will supply the values for the variables.

Let’s say that, when filling out the form, we place the following values in these fields:

  • AirFare: $1,000
  • Lodging: $100
  • CarRental: $50

In the DailyAmountTotal calculation field, Process Director will replace the formula {:AirFare} + {:Lodging} + {:CarRental} with the formula 1000 + 100 + 50, and display the calculated value “1150”.

Now, place your cursor in the sixth column of the row. Sometimes, we have to delete an array element that we don’t need, or that was mistakenly added. We are going to add a control that does this for us. Insert a Remove Row Inside Array control. The control will appear at the cursor location as a button with a red “X” icon. Even though Process Director will take care of this control’s functionality, we still need to name it, so open the properties dialog box and set the Name property to "RemoveExpenseRow".

These are all the controls we need in the array, so now let’s close the array by adding an Array End control immediately to the left of the Remove Row Inside Array control. The Array End control has no user-specified properties.

Now, let’s move to the third row of the table. Place your cursor in column one, and add an Add Row to Array control. The expense form is structured to list the expenses for each day of travel, and the Add Row to Array control will be the button that enables us to add a new row to the array for every day.

image

Set the Name to “AddExpenseRow”, and the Text to “Add Expense”. When we placed the Array Start control on the eForm, we named it “ExpensesList”. We need to ensure that the Add Row control works for that specific array, so set the ArrayName property to “ExpensesList" to link the Add Row control to the ExpensesList array. Once you’re done, click the OK button to close the dialog box.

Move to the fourth column in the row and type the words, “Total Expenses:” into the table cell.

Now, place the cursor in column five. In the array, we added a DailyAmountTotal Calculation control to calculate the total of each day’s expenses. Now, we are going to add a Sum control that adds up the value of all the DailyAmountTotal controls that are contained in the array.

Select BP Logix eForm Controls >> Arrays >> Sum, to add the Sum control. Set the Name property to “ExpensesTotal”. Now, we need to tell it which column in the array that we want summed, so, in the Column property, type “DailyAmountTotal”. Now, the control will automatically calculate a sum for all of the DailyAmountTotal controls in the array, no matter how many we add.

This finishes the process of building the table controls. Now, we just need to close the section in which the table is embedded. Place your cursor in the first blank row below the table and then add a Section End control. The Section End control has no properties to configure, so, once you’ve added the Section End, this section of the form is complete. It should look something like Figure 34: Expenses Section Design View.

image

Move to the next blank line. Once again, add a Section control to the eForm, then change the Name property to “ConditionalJustification” and the Text property to “Amount Requires Justification”.

Move to a new line below the Section control, and type "Reason for Travel". Move to the next line and add a Dropdown control. Change the Name property to “ReasonForTravel”.

Add a new line and type "Comments:". In the next blank line, add an Input control. Set the Name property to “Justification", the Columns property to “70”, and the Rows property to “8”. Setting the Rows property will create a multi-line textbox automatically.

In the blank line below the input control, insert the Section End.

This completes this section of the form. It should look similar to Figure 35: Sample eForm Conditional Justification Section, below.

image

Later, we will configure the eForm to hide this section unless the total amount of the travel request exceeds $1,000.

Move to the next blank line and add a new Section control. Set the Name property to “SupportingDocsSection” and the Text property to “Supporting Documentation”.

Below the Section control, add an Attach Objects control, which is a special type of button control on the page that will allow users to attach files to the eForm. Open the Properties dialog box and set the properties as follows:

  • Name: AttachDoc
  • Text: Add Document
  • Attach Type: Process
  • Object Type: Document

image

Once you’ve set the properties, go to the next blank line and add a Show Attached Objects control to display any attachments that users attach to the document. Set the Name property to "AttachedDocuments". While we aren't going to change any of the other default properties, you should notice that this is a rich control, with many options to show, edit, and apply versioning to attached documents.

image

This section is finished, so insert a Section End control to close this section of the eForm.

image

Now we need to add another Section control to the eForm. Set the Name property to “ApprovalCommentsSection” and the Text property to “Approval Section”.

Below the Section control, type “Approving Official's Comments (Required for Disapproval)”. Below that, add a Signature Comments control, which is a type of input control that is used by Process Director to record comments from participants in an approval process. One the control is on the form, set the Name property to “ApprovalComments”.

Close the section by adding in a Section End control below the Signature Comments control.

image

We’re almost done designing the eForm template. We need to add one final section to hold the Routing Slip. The Routing Slip is very useful to any process, because it enables you to see what the status of the process is at a glance. The Routing Slip will not appear on the form until the process has been started, so the user who initially fills out the form won’t see it.

Add a Section control and set the Name property to “Routing” and the Text property to “Routing Slip.” Below it, add the Routing Slip control. We don’t need to set any properties for this walkthrough, but the Routing Slip is highly configurable, to ensure you can show all the routing information you need for your process.

Add a Section End Control below the Routing Slip, to finish the section.

image

The design phase of the eForm template is now complete, so you can save and close the Word template. Once you’ve done so, return to Process Director, and navigate to the Edit tab of the eForm. You can see the eForm template is still checked out, so click the button labeled Upload and Check in.

image

Process Director will process your Word template and store it as part of the eForm Definition. We can now edit the eForm Definition to add some functionality to it.

  • Was this article helpful?