Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Handle Form Values and Field Highlighting with Your Own Logic

Collaboration Engine 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 will be 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 will be highlighted and show 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 is called when the same user stops editing a property.

  5. The setValue() method is used to set the value of a property. The value will be 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