This Dynamic style is a part of the Dynamic display rules settings, allowing users to apply conditional styling to their Yeeflow controls. Whether you're looking to emphasize priority items or simply want to enhance the visual appeal of your forms and pages, dynamic styling offers the customization you need.
When to use Dynamic Style?
Dynamic Style Settings allow you to set conditional styles for various controls within Yeeflow. You can customize the background color, text color, border, and shadow based on specific conditions or criteria. This means your controls can dynamically change their appearance in response to the data or user interactions.
Imagine you have a field called "Priority" in your data list or a variable in your approval form. With Dynamic Style Settings, you can set the text color to red when the Priority is High, green for Medium, and perhaps blue for Low. This immediate visual cue significantly enhances user experience and decision-making efficiency.
Controls supporting Dynamic Style
Container: Frame your content with dynamic borders and backgrounds that react to data or user interactions.
Text: Emphasize or de-emphasize text based on its importance or relevance.
Paragraph: Change the mood or visibility of large text blocks with conditional styling.
Icon: Adjust icon colors to reflect status or category dynamically.
Button: Make buttons stand out or blend in, depending on the form's state or user actions.
How to use Dynamic Style
Select a control such as a Container, Text, Paragraph, Icon, or Button.
In the settings panel, under the Appearance group, find and click the "Dynamic display rules" button. This action opens a pop-up window.
From the Action's dropdown list, select the "Dynamic style" option.
Below, you'll find style settings where you can set the condition from the rule settings, then define the dynamic styles.
If the conditions are met, the dynamic style will be applied to the control.
Style Setting
Normal / Hover: Set different styles for normal and hover state of the field. Styles below are supported to be set separately for normal and hover state.
Text color: Set text color of the field.
Background color: Set background color of the field.
Border type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options.
For a comprehensive guide on utilizing the Expression Editor to its fullest, please refer to our detailed article: Dynamic display rules.