Define background color based on hex from color picker

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

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

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