Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Nouveau - takes advantage of newer browsers supporting modern CSS and is extremely well-suited to forms/workflows running on mobile devices.
  2. Compact - This is very similar to the Nouveau layout except for the reduction of vertical space between controls.
  3. Tight - Vertical and horizontal space is dramatically reduced - - controls will be positioned up against each other. 
  4. Nouveau Square - this layout is the Nouveau layout with square corners for controls.

Image RemovedImage Added

This image shows a panel in an Expense Report form that has the Nouveau layout selected. Notice the vertical and horizontal spacing between the controls:

Image RemovedImage Added

Here is the same panel when the Compact layout is selected for the form. The vertical spacing between the controls has been removed.

Image RemovedImage Added

This image shows the same panel when the Tight layout is selected for the form. Notice the changes in the vertical and horizontal spacing and the rounded input control corners are replaced by square corners.

Image RemovedImage Added

This image shows the same panel when the Nouveau Square layout is selected for the form. The Nouveau Square layout has the vertical and horizontal spacing of the Nouveau layout with square corners for input controls.
Image RemovedImage Added

Styles

Styles are used to select a particular look & feel for your project, forms or workflows. The Style feature is primarily concerned with colors (background and font colors) but there is also the opportunity to specify other properties such as the font name, etc. 

...

The four Global Styles are: Blue, Neutral, Green, Aqua. You can use them for your forms, workflows and spaces but you cannot download or modify them in any way. 

Section
Column
width25%

Image RemovedImage Added

Blue Style

Column
width25%

Image RemovedImage Added

Neutral Style

Column
width25%

Image RemovedImage Added

Green Style

Column
width25%

Image RemovedImage Added

Aqua Style

Creating Styles

...

Decorator colors for the link, trigger and upload controls can be overridden. Tab control background and border colors can also be changed.

Image RemovedImage Added

There are three buttons at the bottom of the page:

...

Applying the Style below to a form displays the control colors as shown.

Section
Column


Image RemovedImage Added

Control Override Section of a Style

Column

Image RemovedImage Added

Form with the Style containing the Control Override Colors shown applied to it

...

Let's say you set the Input Focus control color to green and the Invalid Control Top and Invalid Control Bot colors to red in your style. 


Image RemovedImage Added 
 
You apply the style to a form that has a phone control with the Required property checked. When the form loads, the phone control will be red because it is an empty required field and is considered invalid. 
 
Image RemovedImage Added

 When the cursor navigates to the phone control for data entry the field will turn green. 
 
Image RemovedImage Added

If you enter an invalid phone number, it will turn red again.

Image RemovedImage Added 

Asterisks and Required Fields

If you prefer an asterisk to designate required fields, enable the Accessibility feature by checking the Accessible property on the form/workflow Properties pane. This feature was built to allow visually impaired users to access forms. Enabling this property adds an asterisk (*) for all required fields. If users move ahead from that field without filling it, they will see an error.

...

If you click on the Submit button in a form that contains invalid data or required fields that are empty,  the invalid fields will be highlighted with an orange background color. You can change the background color by changing the value of the Submit Error Highlight property in the style then applying the modified style to your form/workflow. Follow these steps:

  1. Create a Style
  2. Specify the hex value for the color that you want in the Submit Error Highlight field. Save the modified Style.
  3. Edit your form/workflow. Click on the toolbar then the Style tab in the form/workflow property panel on the left. Apply the Style to your form/workflow by selecting it from the Style dropdown.
  4. Save your form/workflow.

The image shows a style specifying a red color (#ff5b4f) for invalid fields and the result when the Submit button is clicked.

Image RemovedImage Added

The designer can also display a message instructing the user what to do. This approach is very helpful to users when trying to determine why a form does not submit. Refer to this topic for the details.

...

To select a specific layout or style for any given form or workflow, edit the form or workflow. Click the toolbar at the top of the form to access the form properties on the left side of the Forms Designer, then select the Settings editing mode. Click the Style tab, and pick your layout and style from the respective dropdown lists. These form/workflow designer style properties will override your selected style's properties. For example if your style sets labels to blue you can override this for a particular control to yellow using the control's style property.

Image RemovedImage Added

_styleId URL Parameter

...