Web Forms in Oracle Process Cloud Service

The September 2016 release introduced an entirely new web forms functionality called “Web Forms”, an alternative to its existing Frevvo web forms with the latter being renamed to “Basic Forms”. The new “Web Forms” functionality is more business user-friendly, promoting important development principles like multiple views, re-use, branding, list of values and fetching data using REST connections.

The new “Web Forms” group its functionality into three areas; the left area which includes the “Properties” section and the “Data” section, the right area that includes the palettes (basic, advanced, forms and business types) and the main area which is the drawing canvas.

Using drag and drop gestures you can design your form using any components from all four palettes. The “Basic Palette” includes basic components like the input text, button, checklist, radio button, date, etc. while the “Advanced Palette” includes components like image, video, section, tab, table, etc.

You can also use the “Forms Palette” to re-use previously created forms or you can use the “Business Type Palette” to create a user interface using a “data-first” approach (Oracle Process Cloud Service will automatically create a form using the data definitions of the business type).

Enabling “Auto Binding” will automatically create linked data attributes for each component you drag on your canvas under the “Data” section. You can also follow a “Manual Binding” approach where you manually create attributes (either simple or based on a business object) and then bind controls to them.

You can configure each component using the “Properties” section, which is split into two categories, “General” and “Styling” properties. Under the “General” properties you can configure the component’s name, label, binding, default value, whether is an autocomplete field (works with LOVs), if the component is required or not, etc. while under the “Styling” properties you can configure things like component alignment, text alignment, label size and color, etc. Another really important feature under the “Styling” properties is the “Control Class Name” that enables you to customize the appearance of a component by referencing a CSS class (given you have uploaded a CSS Stylesheet to the form).

You can configure the behavior of a control using “Events, Actions and Conditions”. These are basically “If, Then, Else” conditions on a control that enables you to define dynamic behavior on your web forms.

“Events” are configured using the control’s “Form” properties.

Depending on the control type, there are different event options. For example, an input text control supports 5 event types, “On Load”, “On Change”, “On Focus”, “On Blur”, “On Submit”. A button supports only one, “On Click”.

On an event you can configure one or more actions and/or one or more conditions. An action enables you to trigger changes to a control (for example, hide, show, enable, disable), trigger changes to a control value or an attribute value (for example, set a default value to a control).

A condition, as the name implies let you define one or more “If, Then, Else” type of conditions to trigger an action on a control.

Another really nice feature with “Web Forms” is that you can dynamically populate controls such as drop down lists, check lists, radio button, tables and repeatable sections using REST connectors.

Please note that this capability requires prior configuration of a REST Service Connector (see my blog post “Oracle Process Cloud Service Connectors (Part 2 of 2): REST Service Connector” for detailed instructions on how to configure a REST Service Connector).

A “Presentation” in “Web Forms” is another nice feature/concept in Oracle PCS that basically represents a single view of the web form. “Web Forms” enable you to create multiple views of the same web form (data) as a way to render the same form in different devices or to present the same data to different users.

You can customize the appearance of your “Web Forms” using CSS stylesheets. You can upload your CSS stylesheet to your web form and using an in-place editor you can preview the changes that will be applied by the uploaded CSS stylesheet.

One thing that you should be aware of is that styling applied to an individual control will override the styles applied to the control by the stylesheet.

You can use the “Web Form Preview” button to preview your form, as it would appear on various devices. “Web Forms” will automatically render and adjust your form depending on the device display size.