CODEWITHSUNDEEP
formsvalidationvaadin
William
William

Reputation: 1364

Display error messages directly in Vaadin 7

I'm developing a web app in Vaadin, which involves a large number of forms. Currently, all the screens have been created, and I ran them past a couple of test users (4) to checkout their usability. All of them had one and the same comment; when a validation error occurred, it was not clear what the problem was. None of them thought about hovering their mouse over the error indicator (if they even noticed the indicator) to get the precise error message.

I read in the Book of Vaadin that the placement of the error indicator is managed by the layout in which the component is contained. However, it doesn't seem to say anything about directly showing the error message. Is it possible to do this (preferrably, without having to implement a custom widget set)?

Thanks,

​William

Upvotes: 4

Views: 7208

Answers (3)

user935265
user935265

Reputation: 254

I created a Vaadin Add-on that will display validation/conversion error messages directly on the UI rather than in a tooltip.

Check it out here: https://vaadin.com/directory#!addon/validation-error-display

Upvotes: 1

Li Ying
Li Ying

Reputation: 2499

I write a utility class to do this:

import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

import org.apache.commons.lang3.StringUtils;

import com.vaadin.server.ErrorMessage;
import com.vaadin.server.Page;
import com.vaadin.ui.AbstractComponent;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Notification.Type;

public class ErrorUtils {
    public static List<String> getComponentError(
            final AbstractComponent[] componentArray) {
        List<String> errorList = new ArrayList<String>();

        for (AbstractComponent component : componentArray) {
            ErrorMessage errorMessage = component.getErrorMessage();
            if (errorMessage != null) {
                errorList.add(errorMessage.getFormattedHtmlMessage());
            }
        }

        return errorList;
    }

    public static List<String> getComponentError(
            final Collection<?> componentCollection) {
        AbstractComponent[] componentArray = componentCollection
                .toArray(new AbstractComponent[] {});
        return ErrorUtils.getComponentError(componentArray);
    }

    public static void showComponentErrors(
            final AbstractComponent[] componentArray) {
        List<String> errorList = ErrorUtils.getComponentError(componentArray);

        String error = StringUtils.join(errorList, "\n");

        Notification notification = new Notification("Error", error,
                Type.ERROR_MESSAGE, true);

        notification.show(Page.getCurrent());
    }

    public static void showComponentErrors(
            final Collection<?> componentCollection) {
        AbstractComponent[] componentArray = componentCollection
                .toArray(new AbstractComponent[] {});

        ErrorUtils.showComponentErrors(componentArray);
    }
}

The the following code is a simple sample showing how to use it:

private void saveButtonClicked() {
    // this method is the handler of the click event of the [save] button

    try {
        this.fieldGroup.commit();
    } catch (CommitException e) {
        // Show all the validate errors:
        ErrorUtils.showComponentErrors(this.fieldGroup.getFields());

        return;
    }

    // save data, if there is no validate error
}

Upvotes: 2

blubb
blubb

Reputation: 9900

I don't think what you have in mind is implemented with vaadin's basic components.

I suggest the following approach: create a dedicated label above the form's input components that is invisible by default. After validation, if there are errors, add them all to the label's text and make it visible. Displaying the errors right next to the component that caused the validation error would likely mess up your layout too much anyway.

Upvotes: 3

Related Questions