| Section | ||||||||
|---|---|---|---|---|---|---|---|---|
|
...
- 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
...
- The top section of the page provides a field for the Style name, a description and the default colors (hex values) for controls explained in the table below.
- The bottom section of the page provides the ability to set colors for a specific control types. The overrides in this section are helpful if you want your projects/forms/workflows to match a Style Guide used by your company.
The tenant admin or any designer user can create a new Style.
Follow these steps:
| Info |
|---|
If you are logged in as a tenant admin you must first click the Home link in order to see the Styles Tab. |
...
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.
Asterisks and Required Fields
...
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
...