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.
