Define background color based on hex from color picker

Support
#1

I’d like to take the hex value from an entity property that is set with an color picker.

I’d like to use that as background color on a data grid cell.

I’m able to set a named css class to the grid cell with a style provider and define a background color in the scss file.

Is it possible to use the hex value directly without define an endless number of css classes?

Regards,
Erik

#2

You could use “generated columns”, generate Label components in the generator and assign any CSS you want with io.jmix.ui.component.HtmlAttributes bean.

@Inject HtmlAttributes htmlAttributes;

htmlAttributes.applyCss(label, "color: white");

Note that structure of the Vaadin component can be complex - it can consist of several html “div” elements, and all of them inherit some styles from the theme, so assigning just one CSS for the parent component could appear to be not enough.

Personally I have implemented similar requirement in my CUBA project in the past.
I preferred to use limited number of colors and CSS styles.

  • Used color picker component only with the “swatches” tab enabled, so users could only choose one of preconfigured colors.
  • Created a CSS style in the theme for each of the colors. For example for Table:
.v-table-cell-content.ffffaa .v-table-cell-wrapper {
    color: #ffffaa;
}

And assigned CSS styles dynamically with styleProvider handler method.

1 Like
#3

Hi @albudarov ,

thanks for your reply.
When I apply the background color css to the component of the DataGrid it only colors the label background but not the grid cell. Additionally the text position with Label component renderer is different than with default text renderer.

Perhaps we can use that somewhere else. For this data grid we will use some predefined styles.

Regards,
Erik

#5

I am using EntityComboBox listing thousands of colors. I would like to color the background of each color to make selection visually easy. Using StyleProvider would require to define all the colors in the SCSS. Is there a way to do it without defining all the colors in the CSS file?

Thanks,

#7

Hi,

Unfortunately, no. You cannot add css attributes to dropdown items of ComBox. Only css class names via StyleProvider.

Regards,
Gleb