Matthias Lottmann

Confirm user actions with a confirm dialog

Most web applications require the user to submit some kind of action, for example, saving or changing data. Triggering these actions by accident, however, is usually unwanted. A commonly used solution to this problem is a confirmation dialog which asks the user to confirm their action before triggering them. This article gives a brief introduction into confirmation dialogs, what they should and should not contain, typical use cases as well as an example implementation using Vaadin.

Introduction

A confirmation dialog is a simple dialog that asks the user to confirm an action. They are commonly used in situations where triggering an action prematurely would lead to diminished user experience or execute an irreversible application functionality. Typical examples are actions that result in additional work for the end user when triggered by accident like logging out of the application or storing wrong/incomplete user data. To avoid annoying the user, confirmation dialogs should not be overused. Actions that are easily reversible should therefore not require confirmation dialogs. An excellent example of this would be actions that trigger navigation events.

Content

Confirmation dialogs usually consist of the same three parts as most other dialogs. A header section, a content, and a footer section. The header contains the title of the dialog and most often a button to close the dialog. The content section typically contains the confirmation question. This can be a simple "Are you sure?" or provide more specifics about the action in question. This section sometimes also contains a summary of the data related to the action. The footer part comprises two buttons, one to confirm and one to cancel the operation. This is an example of what a confirmation dialog might look like:

Example dialog

Implementation

Every dialog implemented with the Vaadin Java API should extend the Dialog class. This creates an overlay and handles all the other dialog behavior. For more information visit https://vaadin.com/components/vaadin-dialog.

Due to the simplicity of confirmation dialogs, they are highly reusable and should be implemented as such. Only three things change for different confirmation dialogs:

  1. The title in the header section

  2. The confirmation question in the content section

  3. The action that gets triggered once the confirm button in the footer section is pressed.

public class ConfirmationDialog extends Dialog {

		private Label title;
		private Label question;
		private Button confirm;

		public ConfirmationDialog() {
			createHeader();
			createContent();
			createFooter();
		}

The default constructor shown here creates the three different sections of the dialog and introduces some basic styling for the dialog itself. In this case, this is just setting the width and the height of the dialog. The title, confirmation question and confirm button are class variables which values/actions can be set either by using a second constructor or by setting them directly using public setter methods.

  public ConfirmationDialog(String title, String content, ComponentEventListener listener) {
		this();
		setTitle(title);
		setQuestion(content);
		addConfirmationListener(listener);
	}

	public void setTitle(String title) {
		this.title.setText(title);
	}

	public void setQuestion(String question) {
		this.question.setText(question);
	}

	public void addConfirmationListener(ComponentEventListener listener) {
		confirm.addClickListener(listener);
	}

The three different sections of the dialog are container components which contain the title label, the confirmation question and the buttons respectively.

  private void createHeader() {
		this.title = new Label();
		Button close = new Button();
		close.setIcon(VaadinIcon.CLOSE.create());
		close.addClickListener(buttonClickEvent -> close());

		HorizontalLayout header = new HorizontalLayout();
		header.add(this.title, close);
		header.setFlexGrow(1, this.title);
		header.setAlignItems(FlexComponent.Alignment.CENTER);
		header.getStyle().set("background-color", "green");
		add(header);
  }

In this example, the header is a horizontal layout which contains the title label as well as a close button. To close the dialog simply calls the close() method. This helper method also introduces some styling to the section like setting the background color and then adds the container component to the dialog. The content and footer sections are created the same way.

private void createContent() {
  question = new Label();

  VerticalLayout content = new VerticalLayout();
  content.add(question);
  content.setPadding(false);
  content.getStyle().set("background-color", "red");
  add(content);
}

private void createFooter() {
  Button abort = new Button("Abort");
  abort.addClickListener(buttonClickEvent -> close());
  confirm = new Button("Confirm");
  confirm.addClickListener(buttonClickEvent -> close());

  HorizontalLayout footer = new HorizontalLayout();
  footer.add(abort, confirm);
  footer.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
  footer.getStyle().set("background-color", "yellow");
  add(footer);
}

The confirm button also closes the dialog since confirming and action also resolves the confirmation process and the dialog is no longer needed.

  public MainView() {
    ConfirmationDialog confirmationDialog = new ConfirmationDialog();
    confirmationDialog.setTitle("Confirm");
    confirmationDialog.setQuestion("Are you sure, you want to commit this action?");
      Button button = new Button("Open Dialog", event -> confirmationDialog.open());
      add(button);
  }

To attach the dialog to the UI and show it to the user simply calls the open() method of the dialog.

Alternatively, if you don’t want to implement the dialog yourself, you can use the Vaadin Confirm dialog. Visit https://vaadin.com/components/vaadin-confirm-dialog/ for more information.

Vaadin is an open-source framework offering the fastest way to build web apps on Java backends
GET STARTED

Comments (0)