SweetAlert2 Pro

The Delete Confirm action is a simplified confirm action for application consistency. "Title", "Message", and "Icon type" need to be set in Component Settings.

A confirm box is usually used to confirm following an action. This plug-in can work with two options "Request / Button Name" or, after confirmation "waitForResult".

Request / Button Name

If this option is specified on the plug-in level after confirmation, the plug-in will automatically submit the page with the selected request option.
For example, the most frequently used are "DELETE", "SAVE" or "CREATE".

If using the request option, you can also add to custom options { "toast":true }.

waitForResult

If you would like to add a custom submit or any other action after confirmation you can do that with the "waitForResult" option of the plug-in.
For example, this page shows "You have successfully confirmed !" after confirmation. This is because of the parameter "waitForResult".

All confirm messages can be customized. For more detailed settings and options, please visit https://sweetalert2.github.io/#usage.

Even with all the options in the Alert section, you can use custom classes and make the APEX buttons look alike. Here is a basic example of usage :

{
    "iconColor":"darkred",
    "background":"#e6ffff",
    "confirmButtonText":"<span class=\"t-Icon fa fa-check-circle\" aria-hidden=\"true\"></span> Yes",
    "cancelButtonText":"<span class=\"t-Icon fa fa-times-circle\" aria-hidden=\"true\"></span> No",
    "customClass": {
        "confirmButton":"t-Button t-Button--icon t-Button--success t-Button--iconLeft",
        "cancelButton": "t-Button t-Button--icon t-Button--danger t-Button--iconLeft"
      },
    "position":"center-end"      
}

Here is a list of all possible classes:

    customClass: {
        container: '...',
        popup: '...',
        header: '...',
        title: '...',
        closeButton: '...',
        icon: '...',
        image: '...',
        content: '...',
        input: '...',
        inputLabel: '...',
        validationMessage: '...',
        actions: '...',
        confirmButton: '...',
        denyButton: '...',
        cancelButton: '...',
        loader: '...',
        footer: '....'
      }

For more class options, you can take a look at the APEX button builder.

To change text sizes within the confirm box, we suggest changing the following CSS setting:

.swal2-popup {
    font-size: 1.6rem !important;
}

The plug-in also supports text messages, so you can set them in the global component settings or per confirm.
Text messages are supported in the following options:

1. Title
2. Message
3. Confirm button label
4. Cancel button label
5. Validation error message
6. Footer
7. Custom options

All settings of "Delete confirm" are in the Component Settings section. Keep in mind that "Delete confirm" can also be achieved through the "Confirm" action, but this way, we have consistency throughout the application.
The main settings of "Delete confirm" in Component Settings are:

- Confirm button label
- Cancel button label
- Dialog alert/confirm position
- Delete title
- Delete message
- Delete icon