Page History
...
- Nouveau - takes advantage of newer browsers supporting modern CSS and is extremely well-suited to forms/workflows running on mobile devices.
- Compact - This is very similar to the Nouveau layout except for the reduction of vertical space between controls.
- Tight - Vertical and horizontal space is dramatically reduced - - controls will be positioned up against each other.
- Nouveau Square - this layout is the Nouveau layout with square corners for controls.
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:
Here is the same panel when the Compact layout is selected for the form. The vertical spacing between the controls has been removed.
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.
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.
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 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Creating Styles
...
Decorator colors for the link, trigger and upload controls can be overridden. Tab control background and border colors can also be changed.
There are three buttons at the bottom of the page:
...
Applying the Style below to a form displays the control colors as shown.
| Section | ||||
|---|---|---|---|---|
|
...
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.
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.
When the cursor navigates to the phone control for data entry the field will turn green.
If you enter an invalid phone number, it will turn red again.
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:
- Create a Style
- Specify the hex value for the color that you want in the Submit Error Highlight field. Save the modified Style.
- 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.
- 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.
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.
_styleId URL Parameter
...
Overview
Content Tools