Vaadin-Confirm Dialog

Title of Vaadin-Confirm Dialog 

Title of Vaadin-Confirm Dialog must be brief, instructive, and written in sentence case. The Sentence case is the style in which the first letter of the word is capitalized, and the rest of the letter is in lower case. 

The Title of the Vaadin-Confirm Dialog must convey the motive or objective of the Dialog and might be framed as a statement or question.

While writing the Title of confirm dialog box, avoid using confusing titles like "Are You Ready?". Rich material, such as other components and elements, can also be utilized in the Title.

Message in Vaadin-Confirm Dialog

Message in Vaadin-Confirm Dialog Box is a statement containing the information, warning, and errors according to the purpose of the dialog box.

The message of the Confirm-dialog should provide any information that a user may require to make an informed decision.

It didn't collect the data from the user input, except for a Checkbox for remembering the user's choice.

Buttons in Vaadin-Confirm Dialog

Buttons enable users to perform activities and make decisions with a single tap. It indicates actions that users can take. They are frequently located throughout your website's user interface, and they should be easily found and identified, as well as explicitly express the action they allow a user to accomplish.

Confirm Dialog buttons are customizable. Labels and themes in Confirm Dialog buttons can be modified. The Confirm Dialog buttons consist of "Confirm," "Reject," and  “Cancel” buttons.

🔥 Confirm Button 

The "Confirm" button is the principal action of the Confirm Dialog and is the only button that is visible by default.

The default label is "Confirm" according to the button's name, but it can be changed according to the case.

Avoid unclear labels like “Yes” and "No ."Use short labels that describe the action, such as "Save" and "Delete." For short and simple acknowledgment, try to use the “OK” label.

Code

The below given Java code will allow users to save or cancel the workflow or to accept the acknowledgment using Confirm Dialog box.

package com.vaadin.demo.component.confirmdialog;


import com.vaadin.flow.component.Html;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;


@Route("confirm-dialog-confirm-button")
public class ConfirmDialogConfirmButton extends Div 
{
  private Span status;
  public ConfirmDialogConfirmButton()
   {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

    status = new Span();
    status.setVisible(false);

    ConfirmDialog dl = new ConfirmDialog();
    dl.setHeader("Error");   
    // To set the title of the Confirm-Dialog
    
    dl.setText(
      new Html("<p>An error occurred while redirecting to website. Please try again.</p>")
    );
    // To set the message of the Confirm-Dialog

    dl.setConfirmText("OK");      
    // Confirm Button
    dl.addConfirmListener(event -> setStatus("Acknowledged"));   
    // To set the Acknowledgement

    Button button = new Button("Open confirm dialog");
    button.addClickListener(event -> {
      dl.open();
      status.setVisible(false);
    });

    layout.add(button, status);
    add(layout);
  }

  private void setStatus(String value) 
  {
    status.setText("Status: " + value);
    status.setVisible(true);
  }
}

Output

🔥 Cancel Button 

Cancel is a button or option that allows you to exit a program or dialog box without saving any changes.

If the dialog box asks for something but users don't want it, then you can be sure that it's “Cancel” button time. It is a button used to cancel the actions like saving or deleting data.

Code

The below given Java code will show you how users can save or delete data using Confirm Dialog box.

package com.vaadin.demo.component.confirmdialog;

import com.vaadin.demo.DemoExporter;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("confirm-dialog-cancel-button")
public class ConfirmDialogCancelButton extends Div
 {
 
  private Span status;
  
  public ConfirmDialogCancelButton()
  {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

    status = new Span();
    status.setVisible(false);

    ConfirmDialog dl = new ConfirmDialog();
    dl.setHeader("Delete Files");  
    // To set the title of the Dialog Box
    
    dl.setText("Are you sure you want to permanently delete these files?"); 
    // To set the message of the Dialog Box
    
    dl.setCancelable(true);
    dl.addCancelListener(event -> setStatus("Canceled"));
    dl.setConfirmText("Delete");
    dl.setConfirmButtonTheme("error primary");
    dl.addConfirmListener(event -> setStatus("Deleted"));

    Button button = new Button("Open confirm dialog");
    button.addClickListener(event -> {
      dl.open();
      status.setVisible(false);
    });

    layout.add(button, status);
    add(layout);
  }
  
  private void setStatus(String value)
   {
    status.setText("Status: " + value);
    status.setVisible(true);
  }
}

Output

🔥 Reject Button 

The "Reject" button varies from the "Cancel" button in that it continues the user's workflow.

Suppose you have made changes in the files, and now the user tries to leave a view containing unsaved changes, then there is three options popup in the dialog box: "Cancel," "Discard," and "Save ."Here the " Discard " button acts as a Reject button and deletes the modifications, and exits the window.

Code

The below given Java code will show allow users to save the data, cancel the workflow, and discard the Confirm Dialog box.

package com.vaadin.demo.component.confirmdialog;

import com.vaadin.demo.DemoExporter;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;


@Route("confirm-dialog-reject-button")
public class ConfirmDialogRejectButton extends Div
 {

  private Span status;
  public ConfirmDialogRejectButton()
   {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

    status = new Span();
    status.setVisible(false);
    ConfirmDialog dl = new ConfirmDialog();
    dl.setHeader(“Discard changes");
    // To set the message of the Dialog Box
    
    dl.setText("Do you want to discard or save your changes in files before redirecting?");     
    //To set the message of the Dialog Box
    
    dl.setCancelable(true);
    dl.addCancelListener(event -> setStatus("Canceled"));
    dl.setRejectable(true);
    dl.setRejectText("Discard");
    dl.addRejectListener(event -> setStatus("Discarded"));
    dl.setConfirmText("Save");
    dl.addConfirmListener(event -> setStatus("Saved"));

    Button button = new Button("Open confirm dialog");
    button.addClickListener(event -> {
      dl.open();
      status.setVisible(false);
    });
 
    layout.add(button, status);
    add(layout);
  }

  private void setStatus(String value)
   {
    status.setText("Status: " + value);
    status.setVisible(true);
  }
}

Output

Closing of Confirm-Dialog

We can use the following method to close our confirm-dialog box

🔥 In order to close the Confirm dialog, a user must press the Esc button on the keyboard, 

🔥 or it can be closed by pressing one of the buttons in Confirm-Dialog Box. 

🔥 Setting the noCloseOnEsc attribute to false disables closing on Esc.

Frequently Asked Questions

What is the Vaadin Board Framework?

Vaadin Flow is a Java web framework that can be used to create web apps and websites. The programming approach of Vaadin Flow enables developers to use Java as the programming language for developing User Interfaces (UIs) without needing to use HTML or JavaScript directly.

How To Install Add-ons?

Installing add-ons from the Vaadin Directory is as simple as adding a Maven or Ivy dependency or downloading the JAR file and dumping it in the project's web library folder.

Can Vaadin be used to create PWAs?

Yes. By default, Vaadin applications are progressive web apps. For an offline fallback page, the starters create a manifest file and a service worker. Colors, icons, and the offline page can all be customized.

Conclusion

Congratulations on finishing the blog! We have discussed the Vaadin-Confirm Dialog. We further looked at the Title, message, and footer button in Confirm Dialog.

We hope this blog increases your knowledge regarding the Vaadin-Confirm Dialog. We recommend you to visit our articles on different topics of Vaadin, such as

• Vaadin-Environment Setup
• Vaadin-Grid
• Vaadin-Combo Box
   

 Please refer to our guided pathways on Code studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses, and use the accessible sample exams and questions as a guide. For placement preparations, look at the interview experiences and interview package.

Please do upvote our blogs if you find them helpful and informative!

Happy learning!