SweetAlert2 Pro

This is a basic example of a Confirm action with "Title", "Message", "Icon type", and "Footer" text. Any of the text strings in this plug-in support HTML code.

Confirm box is usually used to confirm following action. This plugin can work with two options "Request / Button Name" or after is confirmed "waitForResult".

Request / Button Name

If this option is specified on plugin level after conformation plugin will automatically submit page with selected request option.
For example most used is "DELETE", "SAVE" or "CREATE".

In case of request option you can also add to custom options { "toast":true }.

waitForResult

In case we would like to add custom submit or any other action after conformation we can do that with "waitForResult" on plugin.
For example this page shows "You have successfully confirmed !" after conformation, this is because of parameter "waitForResult".

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

Among all options you can find in the alert section, we can also decide on custom classes and make the APEX buttons look alike. Here is a basic sample 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"
      }
}

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 APEX button builder.

In this section, we show the different possible positions to display the confirm box.
Popup window position can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'.

To change text sizes within a confirm box, we suggest you try to change 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 setting 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

For this sample application, we used the following text messages:

UCSWAL2.CONFIRM.TITLE > "Confirm main message title!"
UCSWAL2.CONFIRM.TEXT > "Are you sure you wont to <strong>%0</strong> %1 ?"
UCSWAL2.CONFIRM.FOOTER > "<a href="https://united-codes.com/index.html">United Codes </a>  footer added on confirm dialog."
UCSWAL2.CONFIRM.YES > "Confirm"
UCSWAL2.CONFIRM.NO > "Cancel"

Message Substitutions can be used as replacement parameters. Message substitution must be separated with a comma(,).
The plug-in supports up to 4 parameters. Text and text messages get populated with specified entities.
For example :

We set :
as title "UCSWAL2.CONFIRM.TITLE" > "Are you sure you would like to %0 %1 %2?"
as message substitutions, we specify "delete, user,&APP_USER.".

Result will be : "Are you sure you would like to delete user APEX_PUBLIC_ROUTER?"