How to Use Conditional Formatting to Change Font Color¶

Step-by-Step Guide¶

Create a Format to Apply for Certain Criteria¶

1. Navigate to the Vinyl IDE
2. Under the Create menu, click on the Define your look & feel button
3. Locate your application Name, and click on the corresponding Formats icon
4. Click the Create button to add a new Format, and give it a logical Name. For example: Font Color
5. Click the check icon to Save
6. Under the Implementations menu, click the Create button
7. Click the drop down menu to see the list of Style Type options
8. Select Font Color from the list of available options
9. Click the check icon to Save
10. Under the Implementation menu, click the Edit button
11. Under the Values group, the Value1 field is where you will enter font color information. This field accepts CSS standard color names (e.g., red, black, green) or hexadecimal color code values (e.g., #FF0000).
12. Click the Save button

Create the Conditional Format Criteria¶

1. From your app, navigate to the Panel where you want to apply Conditional Formatting, and go to Design this Page
2. Locate the Control containing the data you wish to apply the formatting to, and click on the corresponding Format icon
3. Click the Create button on the Conditional Formats window

4. From the Conditional Formatting/State window, you have several options to specify the criteria for which the formatting will display.

   • If you select Always Run, and then select the Format you created above, the format will always get applied to the Control field on the screen, regardless of the data value. This option is useful for coloring, centering, or sizing certain areas without needing to apply a Theme.
   • Alternatively, you can provide conditional logic to instruct when the formatting should be applied.
   • In the example shown below, we are instructing that when the ShippedDate value is less than the OrderDate value to apply the Font Color Format.

5. Click the Save button to save the logic