Ready to create a web form?
If so, we’ll take you through the main steps—from creating a web form to testing it as an end user. You’ll learn about forms and their controls, pick up web forms editor tips, and complete the entire web form development life cycle.
Create a Simple Application
Web forms enable humans to interact with a business process. For example, a form can start an application or be used in a human task. Let’s start by creating a simple application that contains those elements for use in a travel request form.
- Go to the Home page, click Processes, click Process Applications, and then click Create.
- Click Create an Application.
- In the Create Application dialog box, enter Travel, and click Create.
- In the Create a Process page, select Start with a form.
- In the Create Process window, enter Travel Process, and click Create.
- Add an Approve human task to the process and title it Approve.
Create a Web Form
Let’s create a form for employees to complete with travel request details. This form should also display to users responsible for approving or rejecting the request.
Add and Configure Controls
Let’s add controls from the basic palette and the advanced palette to the travel request form.
Add Another Presentation
Let’s add an alternate view of the form that displays only to the users who review and approve travel requests.
Change the Form’s Stylesheet
To apply your organization’s branding, you can upload and apply a stylesheet. You can assign one stylesheet to a form.
- Click a blank area of the form, then click the Form tab on the Properties pane.
- Scroll down if needed, and click Edit in the Stylesheet field. The Stylesheets page displays.
- To upload a stylesheet, click Upload and select a stylesheet file (.css or .txt). In the Stylesheets area, click an available stylesheet to apply it.
- In the Preview area, click CSS to view a stylesheet’s format or Form to preview it.
- Click the X to close the CSS browser and return to the form.
Preview the Form
Forms you create automatically adapt to the screen size, whether end users display them on mobile devices, tablets, or on large screens.
Use Forms and Presentations in a Process
Now let’s use the Employees presentation in the start form, and the Approvers presentation in the Approve task.
Define a Control’s Behavior
To change a control’s behavior, make use of the web form editor’s extensive set of event, action, condition, and connector options. For your travel request, let’s apply an event, condition, and action to the Cost control: if the cost is over a certain amount (such as $500), the Justification text field can’t be left blank.
Try the Form in Runtime
Let’s try using the form as an employee and as an approver.
- Click Test. A Test Application tab opens.
- Click Activate. Leave the Add Me to All Roles field checked and click Activate. A message displays that the application deployed successfully.
- Click Try in Test Mode.
- In Runtime, click your Request Travel application under My
Apps. The Travel form displays. Notice that it’s the Employees presentation (green) that you created.
- Notice built-in validation for some fields. For example, if you type an invalid character in the date field, an error displays when you change to another field.
- Enter a cost over 500 in the Cost field and change to another field. Notice that an asterisk displays in the Justification field to indicate that it’s required.
- Click Submit. Now an error indicates that a value is required. Enter a justification and submit again.
- Click My Tasks to view the task as an approver.
Explore Advanced Form Options
Here are some other areas to explore in the web forms editor:
-
Try out the advanced controls
Use the Advanced Palette to add advanced items such as panels, sections, tabs, and tables to your form. You can also configure controls that dynamically populate by calling an external service through a connector. See Configure Advanced Controls.
-
Reuse other forms defined in the application
The Forms Palette lists previously created forms you can reuse in any form. Drag and drop a form onto the canvas and use in one of two ways:
-
As a referenced form whose controls can’t be edited.
-
As single controls that you can edit, reposition, and remove after clicking Detach, which removes the link with the original form.
See Reuse Forms.
-
-
Create a data first form
This exercise led you through creating a form by adding controls, and data attributes were automatically created through auto binding. You can also select a business type defined for the application, and Process creates a form based on its data attributes. See Create a Web Form Based on a Business Type.