In this video, we explore the conditional styling options that you can apply to your SharePoint List Forms. The conditional formatting is very useful to apply colours or other formatting based on a rule or condition.
Styling can be applied conditionally, which offers a great alternative to field validation. The problem with field validation is that someone can add a great deal of information to a form, and then find that they cannot save it due to one field not meeting the validation criteria. Styling will bring attention to the user that something isn’t as expected, but still allows the form to be saved. For example, if I exceed my expense limit, it’s possible that I may still want to submit the expense claim even though it has exceeded my limit.
If you wish to apply styles to all controls of a certain type, or to always have an individual control styled in a certain way, please refer to Lightning Forms – Apply Style – Applying Style To Controls – Lightning Tools
To set conditional formatting in your SharePoint Form Design:
- Click the Styling button from the command bar.
- Locate the control that you wish to apply the styling to from the Control Styles section.
- Add a style to the control by clicking the ellipses next to the control.
- Provide a name for your style that is descriptive. e.g. ‘Style when Status is Approved’
- Add a condition using the Expression Builder e.g. [[Status]]==”Approved”
- Apply the styles such as Field Input to contain a green border.
- If you wish to add an additional conditional style to the same field (e.g. red if Status is Rejected), you can click Add Style on the … menu next to the field, and add a similar condition with a different name. For example, one style named Style for Status if Approved, and one named Style for Status if Rejected.
- Optionally, repeat the same condition and style for other controls such as the Status tab.
Note: Conditional Formatting is often more useful on EditForms and DisplayForms when checking the status, since the status would usually be Null or Pending on the New Form.
======================================================================
When styling a Yes/No column, it is important to recall that Yes/No columns in SharePoint are usually treated as Boolean data type (True or False) and not as a text value “Yes” or “No”.
So instead of =[[YourYes/NoColumn]] == ‘Yes’, use =[[YourYes/NoColumn]] == true
Make sure not to add quotation marks for true.