CUBA : manipulating the labels generated by FieldGroup

Question

FieldGroup component is creating sets of labels and fields for each mapped attribute. I would like to be able to change the style of the label when the corresponding field value is changed. Documentation explains how to do it for the field, not for the label.

How should i do ?

Answer 1

If you set stylename of a field inside of a fieldGroup, suppose to "red-field", then caption of this field will have corresponding CSS class "v-caption-red-field", so you will be able to write CSS rules with this selector in your extended theme.

Example FieldGroup:

<fieldGroup id="fieldGroup"
            datasource="clientDs">
    <column width="250px">
        <field id="title"/>
        <field id="summary"
               rows="5"/>
    </column>
</fieldGroup>
<button caption="Change style" invoke="changeStyle"/>

Trigger style change:

public class ClientEdit extends AbstractEditor<Client> {
    @Named("fieldGroup.title")
    private TextField titleField;

    public void changeStyle() {
        titleField.setStyleName("red-field");
    }
}

CSS rules:

@mixin halo-ext {
  @include halo;

  .v-caption-red-field {
    color: red;
  }
}

You can read more on themes extension here: https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html