Create an Oracle Integration Enterprise Process Web Form

You can use the Oracle Integration Enterprise process web forms editor to create forms for your manual tasks and to start form events without having to use scripting rules. In the web forms, you can configure events on controls that can trigger conditions, actions, or REST connector calls when they fire.

Create a Simple Application

Web forms let people to interact with a business process. For example, a form can start an application or be used in a human task. You can create a simple application for use in a process approval form.

1. Go to the Home page, click Process Builder, click Create, and then click New Application.
2. In the Create Application dialog box, enter the name that you want to give to your process application, and then click Create.
3. On the Create a Process page, select Start with a form.
4. In the Create Process window, enter the name that you want to give to the process, and click Create.
5. Add an Approve Human task to the process, and give it a name, such as Approve.

Create a Web Form

You can create a form for handling process flows. The form also appears to users who are responsible for approving or rejecting the request.

1. In the process, open the start form’s properties. Click the Start icon, and click its actions menu. (Notice how the Open Form command is dimmed, because no form is associated with the flow element yet.) Select Open Properties.
2. In the Title field, enter the name that you want to give the form.
3. Click Create New Form by the Form field, and select New Web Form.
4. In the Create New Web Form dialog box, enter the name that you gave to the form in the Name field, and then click Create.

   In the Properties pane, notice how the Form field identifies the new form.

5. Click the Edit Form icon.

   The web forms editor opens in a new tab whose title is the one that you entered for the form.

   The editor contains a central canvas on which you construct the form by dragging and dropping controls from the palettes onto the canvas. The Properties pane lets you select settings. The Data pane lists data attributes for the form’s controls.

Add and Configure Controls

You can add controls from the basic palette and the advanced palette to a process approval form.

1. Add and configure name fields onto the form’s canvas in a row. For example, to add the user’s information first name and last name , drag an Input Text control from the Basic Palette onto the canvas. Drag another Input Text control next to the first control.

   As you drag, a box with a dotted outline shows where you can place the control, such as next to, between, or below another control. When you drop, controls are adjusted on an invisible grid to make space. (You can place up to 12 controls in a row across the form.)

   To reposition a control, drag its dotted handle and drop it in a new location. The controls around it adjust accordingly. As you edit, click Undo and Redo as needed.

2. Select the first text control. Notice how the Properties tabs are General and Styling. The tab settings apply to the selected control.
3. On the General tab, change the Name field to FirstName, and the Label field to First Name.
   The Name field applies to the control itself and the Label field determines its display name.
4. Repeat steps 2 and 3 to change the second control’s name to LastName and its label to Last Name. Using this method you can add all the fields you need in your form.
5. Switch between control and form properties by clicking a blank area of the form canvas.

   Notice that the Properties tabs changes to Form and Presentation, and now apply to the entire form rather than the selected control. Click a control and the tabs change to General and Styling, and apply to the control.

   Also notice that the Data pane lists data attributes with the same names as your controls (but different capitalization). These attributes were automatically created as you added each control. This happens when you have the Auto Binding field on the Form tab selected. These attributes hold the form’s payload (working) data while the process is running.

6. Click Save to save the form.

Add an Alternative View for Approvers

You can add an alternate view of the form to display to approvers of the processes.

1. In the Properties pane, click the Presentation tab . (If you see General and Styling tabs instead, select a blank area of the canvas first to display the Presentation tab.)
2. In the Name field, replace Main (the default name) with the name that you want to give to the form, for example: Sellers. This is the default presentation that was already created.
   A presentation is a single view of a form. A form can contain multiple presentations.
3. Click the Form tab. Notice that the Presentations table now lists our presentation as Employees. The star indicates that it’s the default presentation.
4. In the Presentations table, click Add to add a presentation. In the Create Presentation dialog box, enter Approvers in the Name field, select Employees in the Based on field, and click Create.
5. Use the Presentation field at the top of the canvas to switch between your two presentations.
6. If you want to make the name fields on the Approvers presentation read only.
   1. Select the Approvers presentation.
   2. Select the First Name field. On the General tab, scroll down and select Read Only. The field turns blank to indicate that its value can’t be changed.
   3. Change the Last Name field to read-only.

Change the Form’s Stylesheet

To apply your organization’s branding, you can upload and apply a stylesheet. You can assign only one stylesheet to a form.

1. Click a blank area of the form, then click the Form tab on the Properties pane.
2. Scroll down if needed, and click Edit in the Stylesheet field. The Stylesheets page opens.
3. To upload a stylesheet, click Upload and select a stylesheet file (.css or .txt). In the Stylesheets area, click a stylesheet to apply it.
4. In the Preview area, click CSS to view a stylesheet’s format or Form to preview it.
5. Click the X to close the CSS browser and return to the form.

Preview the Form

Forms that you create automatically adapt to the screen size, whether end users display them on mobile devices, tablets, or large screens.

1. In the web forms editor, click Preview.
2. In the Preview window, select different device sizes in which to view the form.
3. Enter sample values in the form’s controls and click Submit.
   The field at the bottom of the window shows how form entries (also called payload values) are stored as data attributes and used in the process.
4. Click Close to close the Preview window. Click Save.

Use Forms and Presentations in a Process

You can configure approval forms to different processes or tasks.

1. Click the Application Home tab, then Forms. Notice that your form appears here.
   The Forms pane displays all the forms that were created for the application, regardless of whether they’re used. Note that you can create and use both web and basic type forms in an application.
2. Click one of your processes tabs.
3. Select the Human Task that you created for approvers of the process and click its action menu. Notice that the Open Form command is dimmed, because no form is associated with it yet. Select Open Properties. The pane expands to display its properties.
4. In the Form field, select your standard process form.
5. In the Presentation field, select the Approvers presentation to display for this task.