Online Form Designer

Form definitions are stored in the Process Director database. The Form's template, which controls the look and feel olf the form, available controls, and other physical aspects of thje Form that will be presented to end users, can be created in a couple of ways. The primary method for creating and editing Form templates is through the Online Form Designer. You do, however, have the ability to use Visual Studio and the Process Director SDK to create the form as a custom ASCX control. Regardless of the method used to create the Form, end-users are presented with an HTML rendition of the electronic form. This enables your users to fill out and submit forms from within their browser.

The Online Form Designer is the built-in method for creating the template for your Form, and defines where the controls appear on the page. The Form Control Properties of the Form definition on the server control the default values, validation and pre-population of fields that you place on the Template with the Designer.

The Online Form Designer will check out the Form template and display it automatically whenever you click the Edit tab of the Form definition.

Browser Extension Conflicts

The Online Form Designer is entirely browser based, and works with any modern browser, though you should be aware of a possible issue. One of the nice things about modern browsers is the wide availability of extensions/plug-ins to customize the browsing experience. Browser extensions offer many useful features that are not available in the stock installation of Chrome, Brave, Edge, Safari, etc. Unfortunately, extensions can also interfere with designing Forms in the Online Form Designer. Specifically, there may be issues with grammar and language checking extensions like LanguageTool or Grammarly.

BP Logix recommends that you turn off browser extensions like these if you design any Forms in the Online Form Designer. Indeed, you should probably, as a best practice, turn off any unnecessary browser extensions when designing Forms. The Online Form Designer has advanced HTML and JavaScript features. Browser extensions that alter the normal operation of the browser, such as modifying the HTML or JavaScript that runs in the browser window, are more likely to interfere with these features, and produce unpredictable results.

For instance, some extensions can interfere with the ability to add and save controls in the Online Form Designer, which can result in some or all of the controls being marked for deletion when the Form's design is saved, even though the controls still exist on the Form. Once these fields are marked for deletion, the Form becomes unrecoverable, except by rolling back to a previous version (if one exists) from the Versions tab of the Form definition.

Browser extensions can usually be disabled on a site-by-site basis, in the extension's settings.

User Interface #

The User Interface for the Online Form Designer consists of a series of toolbars that enable you to add and format content and controls to the Form template. Though you can, if you understand HTML code, perform some more advanced formatting or other functions, knowledge of HTML isn't required to create a form using the Online Form Designer. No external tools or other software applications are required to create Form templates when you use the Online Form Builder. All of the functionality you need to create a template is provided in the toolbars that are arrayed at the top of the screen.

The online Form Designer uses the CKEditor, a third-party component, as the basis of the Form Designer. This component provides a number of built-in tools, in addition to the Process Director controls which are detailed in this documentation. Please refer to the CKEditor documentation for the use of these built-in tools. The following built-in tools are available for your use.

TOOL

NAME

  
Save and Close Form Saves the Form template, closes the Online Form Designer, and returns you to the Form Definition properties.
Save Form Saves the current Form's template without closing.
Save and Run Form Saves the form and immediately runs it for submission. (Process Director-specific functionality)
Save and Test Form Saves the form and runs it in test mode. (Process Director-specific functionality)
Discard Changes Cancels your changes and closes the form without saving.
Cut Cut content from the template.
Copy Copy content from the template
Paste Paste content into the template.
Past as Plain Text Paste only plain text content into the template.
Paste from Word When you copy content from Microsoft Word, this function will clean the Word HTML and paste it into the template in standard HTML.
Undo Undoes the last action you took.
Redo Redoes the last action you took.
Find Find Content in the template.
Find and Replace Finds content in the template and replaces it with content you specify.
Select All Selects (highlights) all content in the template.
Show Blocks Displays the HTML container blocks that exist in the template.
Create Link Adds a hyperlink to text.
Remove Link Removes a hyperlink from text.
Anchor Adds a named anchor to the page.
Image Inserts an image.
Table Inserts a table.
Insert Special Character Inserts a special character or symbol into the text.
iFrame Inserts an IFRAME tag into the page.
Source Shows the HTML source code for your template.
Bold Applies bold face to text.
Italic Italicizes text.
Underline Underlines text.
Strikethrough Places a strikethtrough line in the horizontal center of text.
Subscript Formats text as subscript/
Superscript Formats text as superscript.
Copy Formatting Copies the formatting of a highlighted section of text. Ofter clicking the tool, highlighting a second section of text will automatically copy the formatting of the initially highlighted text to the second section.
Remove Formatting Clears all text formatting.
Text Color Changes the color of text.
Background color Changes the background color of text.
Styles Applies some predefined text styles.
Font Sets the font of text.
Font Size Sets the font size of text.
Ordered List Creates a numbered list for text.
Unordered List Creates a bulleted list for text.
Decrease Indent Decreases the indentation of text.
Increase Indent Increases the indentation of text.
Blockquote Applies a predefined style to quoted content.
Div Container Places a DIV container onto the page.
Align Left Aligns the content to the left side of the page.
Align Center Aligns the content to the center of the page.
Align Right Aligns content to the right side of the page.
Justify Creates straight, even margins on both sides of the page.
Left to Right Sets the text to flow for reading from left to right. This is the default setting.
Right to Left Sets the text to flow for reading from right to left. This is useful for languages like Japanese or Hebrew, that are read from right to left.

The remaining toolbar presents you with the BP Logix controls you'll use to place controls on the Form, and, as mentioned, these tools will be discussed in detail in the Form controls documentation.

Important Prior to 15 Jun 2022, a Word-based Form designer was provided with Process Director, but this feature was rendered non-functional by Microsoft moving both ActiveX and Internet Explorer to end-of-life status, and removing all support for these technologies. This feature is, therefore, no longer supported in Process Director. For legacy customers who wish to learn more, please see the Microsoft Word Form Builder topic.

Control Tools

You can view the documentation for all of the Form control tools available in the Online Form Designer by using the Table of Contents on the upper right corner of the page, or by clicking one of the links below.

Form Controls: Overview of the available form controls.

Adding Controls to the Form: General information about adding controls the Form's design surface in the Online Form Designer.

Basic Controls: The most commonly-used form design tools.

 Input Controls: Controls that are commonly used to collect data, but are a bit less widely used than the basic controls.

Other Input Controls: Additional Input controls, consisting mainly of the different content picker controls.

Actions: These controls enable you to control form actions, like placing buttons, or choosing objects via a picker,

Other Controls: Controls that perform miscellaneous tasks like adding HTML content, or labels.

Layout: Controls that are used to govern the control layout for the template, such as tabs and sections.

Responsive Layout: Controls that implement Bootstrap form layout objects.

Arrays: Controls that enable to you create and control arrays on the Form.

Attachments: Controls that enable you to add and show attachments, such as documents or images, to the Form.