Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Handle Form Values and Field Highlighting with Your Own Logic

Collaboration Kit includes a manager to set property values and field highlighting in a form, and to react to changes in these. It provides a simple way to create a custom form component with collaborative features.

The manager can also be used in conjunction with a CollaborationBinder (Collaborative Form Editing) connected to the same topic. Any changes made to property values or highlighting via the FormManager are reflected in any fields bound to the same properties, and vice versa.

VerticalLayout form = new VerticalLayout();

nameField = new TextField();
nameField.setLabel("Name");
form.add(nameField);

UserInfo localUser = new UserInfo("john");

FormManager manager = new FormManager(form, localUser, "my-topic"); 1

manager.highlight("name", true); 2

manager.setHighlightHandler(context -> { 3
    String propertyName = context.getPropertyName();
    UserInfo user = context.getUser();

    // Executed when a field is highlighted

    return () -> { 4
        // Executed when a field is no longer highlighted
    };
});

manager.setValue("name", "John"); 5

manager.setPropertyChangeHandler(event -> { 6
    String propertyName = event.getPropertyName();
    Object value = event.getValue();

    // Executed when a property value is changed
});

  1. Creating a FormManager takes:

    • a component to bind the manager connection context to the UI,

    • an instance of UserInfo that represents the current local user, and

    • the ID of the topic to connect to.

  2. The highlight() method is used to mark the local user as editing a property. Any field component bound to the same property via a CollaborationBinder connected to the same topic is highlighted and shows the name of the user.

  3. The setHighlightHandler() method sets a callback to handle a user editing a property. The property name and the UserInfo of the user are provided by the context passed as the argument to the callback. This can be used, for example, to focus a field component.

  4. The callback returns another callback, a Registration, that’s called when the same user stops editing a property.

  5. The setValue() method is used to set the value of a property. The value is set on all field components bound to the same property via a CollaborationBinder instance connected to the same topic.

  6. The setPropertyChangeHandler() method sets a callback to handle a property value changing. The property name and the new value are provided by the event passed as the argument to the callback.

8436311F-F248-4CC4-B72F-79A93C5C03FD