Mark changed fields

Gunnar2 · October 15, 2024, 11:10am

I believe it’s best practice to somehow mark a field when it’s value has been changed, e. g. with a * added to the label, or some color.

In our old Vaadin 8 application we used setIcon() with a wrench icon, but this doesn’t exist anymore in Flow. So I wonder what you’d recommend nowadays?

SimonMartinelli · October 15, 2024, 1:04pm

We set a CSS class that will mark the changed field

ollit.1 · October 15, 2024, 1:06pm

If your users are accustomed to seeing icons, I would recommend keeping using icons. Input fields support components in various places (prefix slot, suffix slot, helper text…) so it’s just a matter of figuring out what suits you best.

Gunnar2 · October 15, 2024, 1:47pm

Thanks for your replies.
I’m actually surprised that there is no default functionality - maybe worth a feature request?

Gunnar2 · October 15, 2024, 1:54pm

prefix and suffix components are not available e. g. in CheckBox and RadioButtonGroup, so this doesn’t really work in a consistent way

sissbruecker · October 15, 2024, 1:57pm

There is a related feature request that you can upvote: Option to render tooltip icon in the label of a field · Issue #5786 · vaadin/web-components · GitHub

Gunnar2 · October 17, 2024, 11:53am

To get the closest to the existing application, we’d like to put the icon in front of the label. Could the helper text be tweaked with CSS so it’s rendered before the label? Would be great to get some hints how to to that, as I am not a CSS pro.

Tatu2 · October 17, 2024, 12:12pm

I do not have demo for the latest Vaadin version, but I have Vaadin 8 demo about this. The lucky thing is that most important parts the code should still be very similar as it is mostly about Binder and setting some CSS class names to target fields.

github.com

TatuLund/vaadin-create23/blob/master/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/crud/form/BookForm.java#L276


      
              if (!isShown()) {
                  return false;
              }
              var hasChanges = binder.hasChanges();
              if (hasChanges) {
                  updateDirtyIndicators();
              }
              return hasChanges;
          }
          
          private void updateDirtyIndicators() {
              clearDirtyIndicators();
              binder.getChangedBindings().forEach(binding -> {
                  var field = ((AbstractComponent) binding.getField());
                  field.addStyleName(VaadinCreateTheme.BOOKFORM_FIELD_DIRTY);
                  var value = binding.getGetter().apply(currentProduct);
                  if (value != null) {
                      field.setDescription(Utils.sanitize(String.format(
                              "<b>%s:</b><br>%s", getTranslation(I18n.Form.WAS),
                              convertValue(value))), ContentMode.HTML);
                  }

So the things you need to know is that Binder does have getter for changed bindings. Also from Vaadin 24.5 onwards and also in Vaadin 8.27.0 there is improved change tracking, which is also demonstrated in this code.

I my demo I am showing the previous value in tooltip, but Flow offers more options, like you could show it in helper text.

Lumo theme also has builtin warning color styles, which you can use with LumoUtility, without need to define additional CSS. That could fit well with changed fields.

Gunnar2 · October 17, 2024, 12:23pm

Thanks, but in Vaadin 8 (where I’m coming from) I just called setIcon() and was done. This doesn’t exist anymore in Flow 24, so I’m not sure what to make with your example.

Tatu2 · October 17, 2024, 12:25pm

Check the newest Binder API’s and how they could help you streamline rest of your code. Yes, not related the icon question itself.