Forms are at the core of every information management system. Problem is, these pesky components are often the blame for driving many a developer over the edge. This tutorial illustrates how easy it is to create an advanced form using Workflow Solution's Form Builder.
Prerequisites: None
Objective: To create a form which accepts a usernamd and password as input and validates them before submission is complete.
Estimated time to complete: 40 minutes
Step 1: To begin, create a new Forms (Windows) project:
Step 2: Set the Input Data as shown below. Check the Null Allowed boxes.
Step 3: Drag and drop the FormBuilder component from the Components palette under the Web User Interface category.
Step 4: Double click the FormBuilder component. The form will ask to add an outcome component. Click 'Yes' and and set the Path Name as 'OK.'
The Edit Form window appears. Click on Panel in the Core Components Toolbox and draw a panel.
Step 5: Add a label and double click on it to set the Text as 'UserName'.
Step 6: Add another label with text 'Password'. Add two text boxes with their Output Data set as 'txtUsername' and 'Password'.
Change the TextBoxMode of the Password text box as 'Password'. Set the Default Text Property of both as null.
Step 7: Place a Reset Button and set its text as 'Clear'.
Step 8: Right click on the txtUserName text box and set it to 'Required'.
Right click on the Password text box and set it to 'Required'.
Step 9: Click on the Edit Theme icon at the top left of the Edit Form. Click the Load Theme button to select a theme. Click the Yes button in the Default Controls dialog box.
The theme can be previewed by selecting the menu items on the left of the Edit Current Theme window. Click OK to load the theme.
Step 10: Link the Start component with the FormBuilder component.
Drag and drop two EqualsRule components from the Component palette under the Rules category.
Make a copy of the FormBuilder component and link the components as shown below:
Step 11: Double click the copied FormBuilder and delete the panel. Drag and drop a button and set the Text to 'Try Again' and the Path Name to 'TryAgain'.
Drag and drop another button and set the Text to 'Close' and the Path Name to 'Close'.
Add a new label and set its text to 'Invalid Username or Password'.
Step 12: Link the components as shown below:
Step 13: Right click on the first EqualsRule component and select Edit Component.
Step 14: Set the Data type property as 'Text' and the Variable Name as 'txtUserName'.
Step 15: Set the Compare To property value as 'username' by typing it in the Constant Value tab.
Step 16: Similarly, edit the other EqualsRule component and set the Variable Name and Compare To values as 'Password'.
Step 17: Drag and drop one more FormBuilder component.
Step 18: Double click the new FormBuilder component. The form will ask to add an outcome component. Click 'Yes' and and set the Path Name as 'OK.'
Drag and drop a label and set its Text to 'Sucessfully Logged In'.
Step 19: Link all components as shown below.
Step 20: Save and Run the project. In the debugging window, right click on composer.aspx and select Open Browser. The Set Input Values window appears. Leave the fields blank and click OK.
Step 21: In the browser, specify the Username and Password.
If the username and password are wrong, the following window appears.
If the specified values are correct, then the following window appears.
Step 22: The process is displayed below.
Step 23: Finished!