Adding Color to Column Values in Creatio Freedom UI Lists

In Freedom UI list pages there is now no-code support for adding color to column values. Previously, you could do this with code and add CSS to the list rows or use our Section Case Colors add-on (which still works for classic sections & details). However, now in Freedom UI lists, this has built in support. You’ll see this in the out of the box Freedom UI list pages. The end result will look as follows:

This is easy to set up, however, this only works with Lookup columns. To set up the colors for each lookup value you’ll need to do the following:

  1. Go to the lookup in the Lookups section
  2. Modify the column layout of the lookup to include the Color column
  3. Add the HEX color value for each lookup item
  4. That’s it. Now in Freedom UI lists each lookup value will display with the defined color

If you’d like to use some of the same color palate as the out of the box Lookups, these are the colors used as of 8.0.8. Note that when these colors are applied, they are given an opacity of 0.2, so they are displayed dimmer than the normal color value, they are showing below with this same opacity):

  • #009688
  • #00C853
  • #98CB00
  • #A6DE00
  • #7848EE
  • #B87CCF
  • #0058EF
  • #03A9F4
  • #F9307F
  • #FF4013
  • #FF6534
  • #FF8800
  • #FFAC07

NOTE: If you want to add color support to a custom object or lookup, simply add a column that has a data type of “Color” and select the column as the Color column for the object

Want content like this delivered to your inbox? Sign up for our newsletter!

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *