Form Values & Field Highlighting

Collaboration Kit includes a manager to set property values and field highlighting in a form, and to react to their changes. 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 (see 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.

Source code

FormManagerExample.javapackage com.vaadin.demo.collaboration;

import com.vaadin.collaborationengine.FormManager;
import com.vaadin.collaborationengine.UserInfo;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;

/**
 * Code snippets used in FormManager's reference documentation.
 */

public class FormManagerExample {
    private final TextField nameField;

    public FormManagerExample() {
        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
        });
    }
}

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 topic identifier on which to connect.
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.
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.
The callback returns another callback, a Registration, that’s called when the same user stops editing a property.
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.
The setPropertyChangeHandler() method sets a callback to handle a property value change. The property name and the new value are provided by the event passed as the argument to the callback.

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

Docs

Docs

Form Values & Field Highlighting