SweetAlert2 Pro

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

In this section, the Alert box disappears after some time due to the "timer" setting. A timer is a declarative option that can be set in seconds.

In addition to timers, there is another important setting called "waitForResult". You can set the option waitForResult to "Yes" in case you need multiple alerts in sequence.

Info (3 sec)Danger (5 sec)waitForResult 3 Alerts

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

Here is a basic example of usage :

{
    "iconColor":"darkred",
    "background":"orange",
    "grow":"row",
    "timerProgressBar":true,
    "allowOutsideClick":true,
    "allowEscapeKey":true,
    "allowEnterKey":true,
    "showConfirmButton":true,
    "showDenyButton":false,
    "showCancelButton":false,
    "confirmButtonText":"Custom text",
    "denyButtonText":"No",
    "cancelButtonText":"Cancel",
    "confirmButtonColor":"darkred",
    "denyButtonColor":"",
    "cancelButtonColor":"",
    "reverseButtons":true,
    "focusConfirm":true,
    "focusDeny":false,
    "focusCancel":false,
    "showCloseButton":true
}

In this section, we display different possible positions to display the alert box.
The 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 the alert 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. You can set them in the global component settings or per alert.
Text messages are supported in the following options :

1. Title
2. Message
3. Confirm button label
4. Footer
5. Custom options

For this sample application we used following text messages :

UCSWAL2.ALERT.TITLE > "Alert main message title!"
UCSWAL2.ALERT.TEXT > "You can also have sub-message and <strong>use HTML</strong>."
UCSWAL2.ALERT.FOOTER > "<a href="https://united-codes.com/index.html"> United Codes </a> footer sample."
UCSWAL2.ALERT.OK > "OK"

UCSWAL2.YES > "Yes"
UCSWAL2.NO > "No"

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.ALERT.TITLE" > "Welcome %0, would you like to %1?"
as message substitutions we specify "&APP_USER.,dance".

The result will be: "Welcome APEX_PUBLIC_ROUTER, would you like to dance?"