How to notify the user that query is still running?

Support
#1

Hi everybody!

I have a browse screen running on the complex view where the query could be quite slow.
To avoid the users complains I need to implement a some kind of the notification on the screen such as showing a message/animation on the screen or on the button after the user clicks on the Filter’s Search button until the query finishes.

How could this be done?

#3

Hi,

Unfortunately, there is no asynchronous data loading support in our standard data sources and filters. You can try to load data asynchronously using Background Tasks functionality, but it does not have ready to use integration with data sources: Background Tasks - CUBA Platform. Developer’s Manual .

Another solution could be extend button widget using Vaadin component extension and show notification on click. You can find documentation on this approach here: Component and UI Extensions | Client-Server Integration | Framework | Vaadin 8 Docs

The main idea is to add client-side click listener for a button and show notification before sending request to the server side:

@Connect(SlowButtonExtension.class)
public class SlowButtonExtensionConnector extends AbstractExtensionConnector {
    @Override
    protected void extend(ServerConnector target) {
        VButton button = ((ButtonConnector) target).getWidget();
        button.addClickHandler(event -> {
            VNotification notification = VNotification.createNotification(0, button);
            String message = "<h1 style=\"color:white;font-weight:bold;\">" +
                    WidgetUtil.escapeHTML(getState().notificationMessage) + "</h1>";
            notification.show(message, Position.TOP_CENTER, "system");

            // hide after 3 sec
            Scheduler.get().scheduleFixedDelay(() -> {
                if (notification.isAttached()) {
                    notification.hide();
                }
                return false;
            }, 3000);
        });
    }

    @Override
    public SlowButtonExtensionState getState() {
        return (SlowButtonExtensionState) super.getState();
    }
}

I’ve prepared a demo of this approach, see GitHub - cuba-labs/slow-operation-notify: Show client-side notification for slow operations

slow-operations

So, you can apply this SlowButtonExtension to Search button of a Filter. Additionally, it requires to unwrap Filter component and find Vaadin instance of the button.

Please note, that if you implement data loading manually it is better to use BackgroundTasks and BackgroundWorkWindow class to not freeze UI during background processing.

1 Like