Building Dynamic Forms

The latest version of FlowWright brings new Dynamic Form functionality and features. With the new forms interface, users can:

1. Design and manage form definitions
2. Instantiate and manage form instances
3. Embed forms within other forms as sub-forms or grid views
4. Configure and use database or web-service lookups
5. Use form specific steps within Workflow processes
6. Store data from the forms into database tables for exporting or reporting

In this blog we will demonstrate the first two items above – basic design and instantiation of a form.

Creating a new dynamic form definition

Navigate to the Form Definitions screen by selecting the Forms->Form Definitions menu option.

Click the “Create” toolbar button and provide the name “TestMainForm”.

Check the “Open Designer” check box and click the “Create Definition” button.

Once the definition has been created, click the dialog “Close” button and the new form definition will open within the graphical forms designer.

Using the Dynamic Form Designer to build a form

The Form Designer has four main parts – a toolbox at left, a toolbar at the top, a design canvas in the middle of the page and popup property windows for each control. 

Form Toolbox contains the following controls:

In order to add controls to the design canvas, drag a control from the toolbox and drop it onto the design canvas. Let’s drag a TextBox control onto the canvas.

Double click on the TextBox to open its property window.

The TextBox property window allows the user to:

1. Select the size of the text box.
2. Enter an ID/Name for the text box.
3. Enter Placeholder text. (Note: The Placeholder text acts as a field label and its value will appear inside the field until the user enters a value.)
4. Check whether the field is required or not.
5. Click the “Close” button to close the dialog without saving the changes.
6. Click the “Delete” button to remove the control from the design canvas.
7. Click the “Save” button to save the changes.

For this demonstration, drag two TextBox fields onto the form design canvas.Call them “txtFirstName” with Placeholder text “First Name” and “txtLastName” with Placeholder text “Last Name”.
Also add a Text Area control called txtComments with Placeholder text “Comments” as shown below.

 Click the “Save” button on the Form toolbar to save the form definition.

Creating a form instance from a form definition

On the main cDevWorkflow browser tab, navigate to the Form Instances screen by selecting the Forms->Form Instances menu option.

 Click the “Create” button and select the form definition that was created within the previous step. Provide the form instance name “TestMainInst” and click the “Create Instance” button to create the form instance.

 Once the form instance is created, it will appear on the list of form instances and you can click the dialog “Close” button to close the Create Form Instance dialog.

 Select the new instance in the list and click the “Edit” toolbar button to enter data into the form.

Enter some test data into the form fields and click the “Submit” button to save the data entered.

In order to view the form and its data, return the Form Instances screen, select the form instance from the list and click the “Render” button on the toolbar.

Rendered form instance looks as follows: Coming Next: We will demonstrate how to instantiate and route a form instance using a workflow.

A small sampling of the Workflow Technology for BPM Solutions contained within our cDevWorkflow product offering can be found here: Workflow Technology That Works.

Learn more about our Process Automation & IT, QA Services or Software Development products and solutions on the Web!