| Section | ||||||||
|---|---|---|---|---|---|---|---|---|
|
...
provides four styles that can be chosen from the Style dropdown choices on the Style tab of the Form Properties panel. You will not see Global Styles on the Home page Style tab . Only styles created by designers and the initial tenant admin will display there.
The four GLobal Global Styles are: Blue, Neutral, Green, Aqua. You can use them for your forms, flows and spaces but you cannot download or modify them in any way.
| Section | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Creating Styles
The tenant admin or any designer user can create a new Style.
Follow these steps to create a new Style.
...
- Click on the Styles Tab.
- Click the the
New icon. The Update Styles screen will display. Notice that most of the fields have
Help icons. Click these to get more information about the color property. Also notice the background of each property field displays the assigned value:
- Enter a name and description in the appropriate fields.
- The base color defaults to #84baee - the hex value for the color blue. You can replace this value but it MUST be with a hex color value. If you do not supply the #, will add it for you. Lighter/darker colors are calculated from this color. If you change the base color, they will automatically be recalculated when you tab out of the field or when you click the Recalculate from base button. This color is used for anything that's clickable in your form e.g. print, help, date picker, uploads, flow navigation icons, button gradients etc.
- The colors for most of the categories are generated from the base color. Some colors have defaults instead. You can change any color you want provided you supply the hex color value. Here is a list of the properties, the default colors and where in your form the assigned color will display:
| Style Property | Default Value | Description | |
|---|---|---|---|
| Style Name | MyStyle | Name of your Style | |
| Description | My customized colors and fonts | Description of your Style | |
| Base Color | #84baee | Lighter/darker colors are calculated from this color. If you change the base color, they will automatically be recalculated when you tab out of the field. This color is used for anything that's clickable in your form e.g. print, help, date picker, uploads, flow navigation icons, audit trail icon, button gradients etc. | |
| Background | #ffffff | Form Background Color. Background color of a space. | |
| Font | Lucida Grande | Change the form/flow font. Be aware that changing the default font can have side effects like disturbing precise control alignment. Please check your forms/flows carefully if you change the font. Leave blank to use the default font. When you click on the field, you will see a dropdown which will display a list of the default fonts: Arial, Geneva, Helvetica, Lucida Grande, Monaco, sans-serif, Tahoma, Times, Verdana | |
| Label Font Color | #333333 | Color of Control Labels. If you specify a different font color on a particular control in your form, it will override the Style setting, used when no task in present in Task List on devices, form/flow name,user's First /Last name,audit trail header,messages on the Task List. | |
| Input Font Color | #111111 | Color of text entered in input, text area and other controls. Also, used as the font color dropdown options. | |
| Input Focus | #fffcdf | Color displayed when the field has the input focus. It is the highlighting color when an input field is selected. | |
| Borders | #badeff | Color of most borders. Some controls like Tables use a slightly lighter border. See Lighter Borders below. | |
| Headers | #f2f9ff | Section header, Table header, Dropdown gradient, top bar in Mobile renderings. | |
| Invalid Control Bot | #fffed9 | If the control contains invalid data, the bottom half of the Invalid control displays with this color. Use this color value in conjunction with the Invalid Control top to change the color for Required fields in your form. See the example below. | |
| Invalid Control Top | #fffbf7 | If the control contains invalid data, the top half of the Invalid control displays with this color. Use this color value in conjunction with the Invalid Control bot to change the color for Required fields in your form. See the example below. | |
| Invalid Section/Tab | #ff5b4f | Color of collapsed section that is invalid (label/icon), Tab that is not selected containing invalid controls, Must Sign button, Error icon, Error msg. | |
| Submit Error Highlight | blank | Use this to specify the background color for invalid controls in a form. Invalid controls will be highlighted with this color when the Submit button is clicked. If you leave this blank, invalid controls will be highlighted with the default color (orange). The color will disappear when data is entered or corrected in the field and it becomes valid. If the form is valid, it can be submitted. Refer to this topic for more information about this feature. See the example below for instructions to change the color. | |
| Lighter Four | #f7fbff | Background Color for the Cancel,Save,Print,Clear buttons, text Text and tic for the Done button in the Signature Lightbox, text and tic for the Done button of the Upload control Lightbox. Label and decorator for continue / submit / done (signature) / upload (upload control). Much lighter version of the base color. | |
| Lighter Three | #f2f9ff | Color of watermark used in spaces. Also used for the dropdown hover when selecting forms/flows/Task List from a the main menu of a space. Lighter version of the base color. | |
| Lighter Two | #d9edff | Color of selected drop down option, signature icon, task in task list, disabled icons in task list. Lighter version of the base color. | |
| Lighter One | #a3d3ff | Color of all decorators, flow step that is not ready, disabled icons in task list. | |
| Lighter Borders | #d9edff | Used as the border for the Table control, icons and tasklist in a mobile space . | |
| Darker One | #1578d4 | Top color of button gradient, Percent/Step navigation for flows, Mobile navigation control text | |
| Darker Two | #136bbd | Color of button borders, Running/Runnable steps for flows, Space menu links on desktop. | |
| Darker Three | #0f5699 | Help display background color, selected radio/checkbox, task descriptions. | |
| Plus icon | #3ca959 | Plus icon for adding repeat items. | |
| Minus Icon | #d03232 | Minus icon for removing repeat items. | |
| Primary Btn Start | #84baee | Primary Action Button Gradient Start Color. The Primary Action Button is the Submit button on a form and the Continue/Submit button on a flow. Default value is the same as the base color. Primary and Secondary Btn Start parameters will not take effect on IE9 | |
| Primary Btn End | #1578d4 | Primary Action Button Gradient End Color. The Primary Action Button is the Submit button on a form and the Continue/Submit button on a flow. Default value is the same as darker one. | |
| Primary Btn Border | #136bbd | Primary Action Button Border Color. The Primary Action Button is the Submit button on a form and the Continue/Submit button on a flow. Default value is the same as darker two. | |
| #ffffff | Secondary Action Button Gradient Start Color. The Secondary Action Button is the Cancel button on a form. Default value is white. Primary and Secondary Btn Start parameters will not take effect on IE9 | ||
| #f7fbff | Background Color for the Cancel,Save,Print,Clear buttons. Secondary Action Button Gradient End Color. The Secondary Action Button is the Cancel button on a form. Default value is the same as lighter four. | ||
| #136bbd | Secondary Action Button Border Color. The Secondary Action Button is the Cancel button on a form. Default value is the same as darker two. |
...
Example - Changing the background color for Required Fields
...
Example: - Changing the Color for Invalid 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/flow. 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/flow. Click on the toolbar then the Style tab in the form/flow property panel on the left. Apply the Style to your form/flow by selecting it from the Style dropdown.
- Save your form/flow.
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.
Modifying a Style
...
To download a style, simply click on the the download icon. A Name.style file will be downloaded to your disk. It's basically a properties file that can be edited using any text editor.
...
- Click on the Styles Tab
- Click the
- Click on
button then navigate to the location of the style file on your disk - Check Replace if you want to replace an existing file with an updated version
- Click the
button.
...
Styles can be selected dynamically via the form or space using the Url parameter _styleId. This parameter take precedence over a style selected at the Application or form level. Append Append _styleId<the styleId=<the name of the style> to the share link of your form/flow or space. The share url shown appends the _stye parameter equal to a style created by the designer named Orange.
...