Table of contents

• What is Styling & Conditional Formatting
• General Styles
• Control Styles
• Configuration
  • Available options to configure styles
  • Rule/Condition
  • CSS Editor
  • Export/Import

What is Styling & Conditional Formatting

Form styling is a new feature that allows you to configure unique styles for all controls on the form.
The Styling button is available in the command bar next to Actions button. Clicking on the Styling button opens Form Styling panel that includes:

• General Styles
• Control Styles
• Export/Import button
• Expand/Collapse panel
• Preview, Apply, Save & Close, Close buttons

General Styles

General Styles section allows you to configure styles for all controls on the form:

• Command Bar
• Form Title
• Rows
• Fields
• Tabs
• Buttons
• List&Libraries

For example, adding a General Style for Fields will apply it to all fields on the form.

You may configure more than one style on control. The later style will have higher priority and overrides the previous.

Control Styles

In addition to the General Styles, it is possible to configure styles per control. A structure of all controls on the form is displayed in this section.
Styles added to this section will override General Styles on the certain field as on the screenshot below. 

Note that changed styles (differs from the default) will be marked with an orange border in the editor:

Configuration

Available options to configure styles

There are different actions on the Control and Style levels.

Actions available on the Control level:

• Add Style
• Export Styles
• Import Styles

To add a new style to a control you need to click the ellipsis on control.

“Add new style” dialog include options to create style:

• From scratch: create a new style without pre-configurations

• From existing style: create a new style from already created styles of a particular control. In this input, you can type and search your existing style from General or Controls styles.

• From template: create a new style from predefined styles. This option is available for General and Controls Styles only on:
  
  • Fields: Error Style, Approve Style and Highlight Description Style.
  • Tabs: Error Style.

• Name: a name for the style is proposed, but it is possible to change it to your own.

After creating a style you have these actions on Style level:

• Edit name of style
• Export style
• Move up/Move down
• Remove style

Rule/Condition

For Control Styles there is an option to set a dynamic Rule/Condition to load this style only on certain condition. Clicking on the { } button opens an Expression builder for configuring the rule or you can expand a style and write an expression in the input field. To keep an overview of where there is a rule/condition configured the icon changes from { } to {fx}.

For example, you can add the Error Style template on the tab to visualize the error of an inside field containing no valid value. In this case the new placeholder [[Field.Isinvalid]] can be used. 

CSS Editor

Each style has a CSS editor where all configurations are displayed.

It's possible to add/edit styles manually in the editor.

For example, you can change the label of your field in CSS editor.

An error is displayed if there is a missing bracket and the style won't save until the issue is fixed.

Export/Import

There are a few options to Export/Import styles:

• Export/Import General Styles

General Styles can be configured once and exported to a .json file for reusing/importing on other list forms

• Export/Import on Controls

When you have more than one style on a control it's possible to export all styles in one file.
For the case of importing styles to the control with existing styles a confirmation dialog appears:

- Append to existing option will add all styles below

- Replace all - will replace existing styles

• Export styles separately on each style level
• With form configuration - notice that all styles are stored in the forms configuration and are as well included in export and import of forms configuration.