About Basic Forms

Basic forms define the user interface that allow end users to interact with your business processes. Oracle Process Cloud Service Composer provides an editor for creating basic forms. This enables process analysts to design the way users interact with a business process and also define the underlying data structure required by the application.

Basic forms are based on standards, including XHTML, CSS, and JavaScript, which ensures compatibility across multiple platforms and browsers. At its core, a basic form is an XHTML file. However, the basic form designer allows you to create and design a basic form without interacting directly with the XHTML code. After creating a new form, you can use the basic form designer to customize the appearance and behavior of the form.

You can add the following to a basic form:

  • Form controls: Components that you can add directly to a form.

    Form controls define the graphical elements of a basic form and their layout. They also display data to users and receive data input.

    When you add, arrange, or remove a form control from a basic form, the basic form designer automatically updates the underlying XHTML code.

    Want to learn more about the types of form controls supported? See Composer Basic Form and Basic Form Control Property Reference.

  • Form rules: Pieces of JavaScript code that define the behavior of a basic form or basic form controls.

    Use the form rules editor to create and edit form rules. See Creating Basic Form Rules.

Form-First and Data-First Design

There are three use cases for creating basic forms in Oracle Process Cloud Service:

  • Form-First:

    In this use case, you create a basic form first before any data elements are defined. This allows a business user to define the required user interface using Oracle Process Cloud Service Composer. In this use case, user-interface elements are created first without considering the required underlying data model.

    After the basic form is created, Oracle Process Cloud Service automatically generates the schema that defines the data required by the basic form. This data schema is based on the basic form controls added to the basic form. When you assign the basic form to a human task, this schema is automatically used to define the human task data structure.

    See Typical Workflow Using Form-First Design.

  • Data-First:

    In this use case, you create a basic form based on data sources or business objects. Oracle Process Cloud Service generates data sources or business objects based on the data structure. You can add basic form controls to a basic form based on these data sources or business objects. One advantage of the data-first model is that it allows you to reuse a schema across multiple forms.

    After adding form controls from a data source, use the basic form designer to rearrange them within the form to define the necessary look and feel of the user interface.

    See Typical Workflow for Using Data-First Design.

  • Composite of Data-First and Form-First

    In this use case, you create some portion of a basic form from scratch and generate other portions from an existing data sources or business objects.

    See Typical Workflow for Using Data-First Design. This workflow explains how you can generate basic form controls from business objects and then add additional controls using the designer palette.

Typical Workflow Using Form-First Design

You can use Oracle Process Cloud Service Composer to design a basic form that isn't based on pre-existing data.

This table describes the typical workflow for creating a basic form directly from the Application Home tab using form-first design methodology. After creating the basic form, you use the basic form designer to rearrange the form controls as required.

Task Description
Create the basic form.

From the Application Home tab, you create a form with no previously defined data.

Add controls to a basic form.

After creating a new basic form, you can add input fields, add selection control fields, add group controls, and add other controls as necessary to define how users interact with your application.

Edit the basic form and basic form control properties.

You can edit the properties of your basic form and its controls to determine their behavior and appearance.

Add form rules to a basic form.

You can add form rules to your basic form to further customize and control its behavior.

Test your basic form.

You can use the basic form designer to preview how your basic form appears to end users.

Save your basic form.

To save a basic form, you must save the entire application.

Assign your basic form to a human task.

After completing your basic form, you can assign it to a human task. When you assign the basic form to a human task, Composer automatically generates the payload information based on the controls you added to the basic form. If the human task already has an existing payload defined, it’s replaced by a new payload defined by the basic form.

Typical Workflow for Using Data-First Design

You can use Oracle Process Cloud Service Composer to design a basic form that is based on pre-existing data.

This table describes the typical workflow for creating a basic form from the human task implementation pane using data-first design methodology. After creating the basic form, you use the basic form designer to add and rearrange the data elements as required.

Task Description
Create the basic form.

Create a new basic form from the process editor page using the human task General Properties tab.

Generate basic form controls from business objects data elements.

After creating a basic form based on a business object, you can use the business object’s data elements to generate the corresponding basic form controls. The business object and data elements appears in the Data Sources pane on the left side of the basic form designer.

Add additional basic form controls.

You can add additional form controls as necessary to define how users interact with your application.

Edit the basic form and basic form control properties.

You can edit the properties of your basic form and its controls to determine their behavior and appearance.

Add form rules to a basic form.

You can add form rules to your basic form to further customize and control its behavior.

Test your basic form.

You can use the basic form designer to preview how your basic form appears to end users.

Save your basic form.

To save a basic form, you must save the entire application.

What You Can Do Using the Basic Forms Designer

Basic forms define the user interface of your process-based application. Composer provides a basic forms designer for you to use to create basic forms.

Using the basic forms designer you can:

  • Add basic form controls to a basic form.

  • Customize the appearance and layout of a basic form.

  • Create form rules that define the behavior of the controls on a basic form.

Here is an example of the basic forms designer.

Description of web-form-designer.png follows
Description of the illustration web-form-designer.png

When you open a basic form, the basic forms designer appears as a tabbed pane within Composer. The basic forms designer is divided into the following areas:

  • Basic forms component palette

  • Basic forms toolbar

  • Forms canvas

  • Properties editor

  • Data sources

Note:

Data sources are only available in basic forms created through the data-first use case. See Typical Workflow for Using Data-First Design.

About the Basic Forms Component Palette

The component palette contains the controls you can add to a form to define how your users interact with your business application. The component palette appears on the left side of the basic forms designer. You can add a form control to a basic form by dragging the control from the palette to the form canvas.

You can add controls to a basic form by dragging and dropping from the form component palette to the forms canvas. You can drag and drop above, below, to the left, and to the right of most controls. If you’re not dragging your control over a group control, your control is placed at the top of your form.

As you drag a control, the position cursor changes to indicate its status.

Position Cursor Icons Description
Do Not Drop Do Not Drop icon

The control you’re dragging isn’t over a valid area yet.

Drop Drop icon

Your cursor is over an area on the canvas where dropping a control is allowed.

Drop Over Drop Over icon

Your control will be placed above the control over which you’re hovering. You’ll see this icon when you drag the control over the top half of a valid area.

Drop Under Drop Under icon

Your control will be placed below the control over which you’re hovering. You’ll see this icon when you drag the control over the bottom half of a valid area.

Drop Right Drop Right icon

Your control will be placed to the right of the control over which you’re hovering if space is available. You’ll see this icon when you drag the control over the right half of another control.

Drop Left Drop Left icon

Your control will be placed to the left of the control over which you’re hovering. You’ll see this icon when you drag the control over the left half of another control.

You must consider these important rules when you’re dragging and dropping form controls from the component palette to the forms canvas:

  • If you let go of a control while the Do Not Drop icon is showing, your control goes back to where it was - either back to the component palette or where it was in your form before you tried to move it.

  • You can drag and drop above, below, to the left and to the right of most controls.

  • You can drop controls above and below the Section, Tab, Table, Repeat, and Panel controls.

  • Panels can be dropped to the left or right of other panes; however, you can't drop other controls in a similar manner to the left or right of panels.

  • You can’t drop two different controls into a repeat control—for example, you can’t drag in a quantity control if your repeat control already contains an EMail control.

    If you require multiple controls inside a repeat control, first drag the controls into a section, then drop the section into the repeat. After the section is inside your repeat you can’t add anything else to the section; therefore, build the section first in this case. You also can’t drop a pane, tab or another repeat control inside a repeat control.

Creating Multi-Column Forms

You can create forms with multiple columns.

All control widths are specified in columns. The width is selected by clicking on a grid in the Style tab.

When dropping controls from the palette on an empty canvas or above or below an existing control, the newly dropped control is 12 columns wide.

If you drag a control from the palette and drop it to the left or right of a control, the newly dropped control takes the width of the control you dropped on. The width of a control that’s already in your form must be adjusted manually by the designer if the position of the control is changed.

To create a multi-column form:

Drag and drop panels from the palette and then drop additional controls inside the panels. Panels can be dropped to the left or right of other panels. A newly dropped panel dropped to the left or right of another panel takes the width of the panel it was dropped on.

Alternatively, drag and drop the first control onto the canvas, modify the width to your specification, then drag and drop additional controls to the right of the previously dropped one. The controls "wrap around" and line up in columns.

About the Basic Forms Toolbar

The basic forms designer contains a toolbar that provides access to form-related features. The toolbar contains the following buttons:

Basic Forms Designer toolbar

The basic forms designer toolbar contains the following elements:

Toolbar Element Description

Edit Rules

Click to access the basic form rules editor.

This button toggles between the basic forms designer and the basic form rules editor.

Edit Form

Click to access the basic forms designer.

This button toggles between the basic form rules editor and the basic forms designer.

Preview

Opens the basic form in a new browser window.

In this window, you can view how the basic form appears to end users. You can also test the behavior of basic form rules.

Refresh

Refreshes the external data source business object) of the form.

If you make changes to the business object, you must refresh the data source of the basic form. This button is only applicable to basic forms created using data-first design. See Typical Workflow for Using Data-First Design.

Manage Internationalization

Opens the Internationalization editor.

This editor lets you to localize components of the basic form and basic form controls. Only languages that have been added using the Language setting located in the Application Home tab are available. To configure language support, select the target language in the editor and add translation strings for the basic form’s elements.

Manage Business Objects

Opens the Form Business Objects dialog box.

This dialog box lets you select the business objects you want to use. You can find the selected business objects in the Data Sources section of the component palette.

Manage Header Sets

Opens the Header Sets Management window.

Use it to define a group of keys/values mapped to a specific endpoint for use in requests performed from selected forms and managed in the Workspace Admin area.

About the Forms Canvas

The right side of the basic forms designer is the form canvas. You can create a basic form by dragging controls from the component palette to the forms canvas. The following is an example of the forms canvas containing several controls.

Description of web-form.png follows
Description of the illustration web-form.png

About the Properties Editor

You use the properties editor to define the properties of a basic form or basic form control. When you click a control in your basic form, the Properties area displays the properties of the control so you can view and edit them.

The properties editor contains tabbed panes that display the properties of the basic form or basic form control grouped by function. The following is an example of the properties editor.

Description of web-form-properties.png follows
Description of the illustration web-form-properties.png

For procedures about editing a basic form and basic form control properties, see Editing Basic Form Properties and Editing Basic Form Control Properties. Want to learn more about each property? See Composer Basic Form and Basic Form Control Property Reference.

About Data Sources

The data source pane displays the list of data elements that can be incorporated into your basic form. See Adding a Data Source or Business Object to a Basic Form.

From the Data Sources pane, you can generate basic form controls based on all the data elements in the business object, or you can generate basic form controls based on specific data elements.

Note:

Data sources are only available in basic forms created based on a data-first design. See Typical Workflow for Using Data-First Design.

The following example shows how the Data Sources pane appears in a basic form.

Description of web-form-sources.png follows
Description of the illustration web-form-sources.png