Render labels instead of textboxes in (non editable) FieldGroup

Support
#1

When a FieldGroup is set to “editable=false” still (not editable) textboxes are rendered. Is it possible, that labels are rendered instead when using the FieldGroup component?

1 Like
#2

Hi Stefan,

we don’t have such a mechanism that can convert one field to another automatically by editable property, but you can use CSS styles to implement this behaviour.

First of all, create Theme extension using Studio action (Extending an Existing Theme - CUBA Platform. Developer’s Manual). Next, define a new CSS rule in halo-ext.scss:


@import "../halo/halo";

@mixin halo-ext {
  @include halo;

  /* Vaadin automatically adds "-readonly" suffix style for editable = false fields */
  .v-textfield-readonly.label-readonly {
    border:0;
    background: transparent;
    box-shadow: none;
  }
}

And finally, add this CSS style to FieldGroup field or TextField:


<fieldGroup id="fieldGroup"
            datasource="clientDs">
    <column width="250px">
        <field id="title"></field>
        <field id="summary" stylename="label-readonly" editable="false"></field>
    </column>
</fieldGroup>

I’ve attached sample project with this style applied to Client entity editor, so you can try it in action.

textfield-readonly.zip (30.8K)