Attributes

SweetAlert2 Pro is a Dynamic Action type plug-in in the Notification section. When the plug-in is used, the following attributes describe it’s behavior.

Action

The main setting of the plug-in instance.

Alert

Displayed as a large popup window with a confirm button.

Confirm

Displayed as a large popup window, the same as alert, but used for confirmation of forms and actions. Displays both a Confirm button and a Cancel button.

Toast

Displayed as a small popup window, usually with a timer, in the top right corner as a quick message to the user.

Delete Confirm

A simplified confirm action for application consistency. "Delete title", "Delete message", "Delete icon", "Confirm button label", "Cancel button label" and "Dialog alert/confirm position" need to be set in Component Settings.

Message Substitutions

Message Substitutions can be used as replacement parameters. Parameters must be separated with commas(,) (for example: delete,emp,&P10_ENAME.).
The plug-in supports up to 4 parameters. Text and text messages get populated with specified entities.

Message Substitutions are applied on :

Message
Sub message
Confirm button label
Cancel button label
Validation button label
Validation error message
Footer

Example of usage :

Options :
as title "UCSWAL2.ALERT.TITLE" > "Welcome %0, would you like to %1?"
as an message substitutions we specify "&APP_USER.,dance".

Result will be : "Welcome Andrej.Grlica, would you like to dance?"

Title

The main title of the alert, confirm, or toast message. It can be plain text or a text message.

Supported options :

HTML code,
Substitution string (ex. &UCSWAL2_ALERT_TITLE.),
Text message (ex. UCSWAL2.ALERT.TITLE, UCSWAL2.CONFIRM.TITLE, ...),
Message Substitutions replaces (%0, %1, %2, %3)

Message

An additional message also added to the dialog box in all actions. It can be plain text or a text message.

Supported options :

HTML code,
Substitution string (ex. &UCSWAL2_ALERT_TEXT.),
Text message (ex. UCSWAL2.ALERT.TEXT, UCSWAL2.CONFIRM.TEXT, ...),
Message Substitutions replaces (%0, %1, %2, %3)

Confirm Button Label

The confirm button label. It can be specified as plain text or a text message. By default, this button is displayed on Alert and Confirm. On Toast messages, it is hidden but can be enabled through the Custom Options attribute. If this option is null, the plug-in takes the default value from the Component Settings confirm button label default text.

Supported options :

HTML code,
Substitution string (ex. &UCSWAL2_CONFIRM.),
Text message (ex. UCSWAL2.YES, UCSWAL2.CONFIRM...),
Message Substitutions replaces (%0, %1, %2, %3)

Cancel Button Label

The cancel button label, can be specified as plain text or text message. By default this button is displayed only on "Confirm" action.
In case this option is null plugin takes default value from "Component settings" cancel button label default text.

Supported options :

HTML code,
Substitution string (ex. &UCSWAL2_CANCEL.),
Text message (ex. UCSWAL2.NO, UCSWAL2.CANCEL...),
Message Substitutions replaces (%0, %1, %2, %3)

Icon

Select a predefined icon to display. You have 6 possible options with this plug-in. But if that is not enough, you can take a look in custom options and define your icon.

Possible options :

No Icon (default)
Success
Danger
Warning
Info
Question

Dialog position

Define where to display the Alert, Confirm, or Toast box. If this option is null, plug-in takes the default value from Component Settings depending on action type.

Available positions are :

top-start
top
top-end
center-start
center
center-end
bottom-start
bottom
bottom-end

Timer

This setting can be used in Alert or Toast action. Set to make messages disappear after n seconds. If this option is 0, the plug-in takes a default value from Component Settings timer is set to 0 then it's disabled.

Example:

If value is "0" timer is disabled
If value is more than "0" timer is activated and alert/toast removed after "n" seconds.

Request / Button Name

This setting is only used in Confirm actions to automatically submit a form after confirmation. If this setting is null, after confirmation the next event will be executed. On cancel dialog, it will trigger a cancel dynamic action event. If this option is declared with the name of a request, then, after confirmation, the page will be submitted with the specified request value.
Common requests are : "DELETE", "SAVE" or "CREATE".

Validation Check (PL/SQL Return Error Msg)

This setting is only used in Confirm actions to automatically validate if confirmation is possible. This setting is used as a PL/SQL returning varchar2 function. When a function gets text that is basically an error to display. In case when no error rises during validation execution plugin get null value and conformation is possible.
In case this option is null, the plugin takes default value from "Component settings" timer is set to 0 then it's disabled.

Supported validation messages error formats:

HTML code,
Substitution string (ex. &UCSWAL2_CANCEL.),
Text message (ex. UCSWAL2.NO),
Message Substitutions replaces (%0, %1, %2, %3)

Example of usage :

if not apex_authorization.is_authorized (
            p_authorization_name => 'Administration Rights' )
then 
    return 'You are not administrator you can not %0 this %1.';
end if;

if 1 = 1
then 
    return 'You don''t have permissions to %0 this %1.';
end if;

return null; -- all good

For this kind of operation, our suggestion is to use a package in the database as this textarea is limited to up to 4000 characters. Returning a text message is also supported as in the following example :

if not apex_authorization.is_authorized (
            p_authorization_name => 'Administration Rights' )
then 
    return 'UCSWAL2.AUTH.NOADMIN';
end if;

if 1 = 1
then 
    return 'UCSWAL2.CONFIRM.VALIDATE.DELETE';
end if;

return null; -- all good

The footer can be specified as plain text or a text message. If this option is null, the plug-in takes a default value from the Component Settings footer setting, if it exists.

Supported options :

HTML code,
Substitution string (ex. &UCSWAL2_FOOTER.),
Text message (ex. UCSWAL2.ALERT.FOOTER, UCSWAL2.CONFIRM.FOOTER...),
Message Substitutions replaces (%0, %1, %2, %3)

Custom Options

All actions can be additionally customized. In the following examples only a few of the many options will be displayed. More details can be found on https://sweetalert2.github.io/#configuration .
If his option is null, the plug-in takes the default value from the Component Settings custom options setting, if it exists.

Supported options :

JSON,
Substitution string (ex. &UCSWAL2_OPTIONS.),
Text message (ex. UCSWAL2.ALERT.OPTIONS, UCSWAL2.CONFIRM.OPTIONS...) needs to have "Use in JavaScript" option set to "Yes"

Example :

{
    "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
}

As displayed options are in JSON format, the structure must be valid because the plug-in is using the JavaScript JSON.parse option. Besides the default settings, animations can be also applied with :

{
    "showClass":{
      "popup":"swal2-show",
      "backdrop":"swal2-backdrop-show",
      "icon":"swal2-icon-show"
    },
    "hideClass": {
      "popup":"swal2-hide",
      "backdrop":"swal2-backdrop-hide",
      "icon":"swal2-icon-hide"        
    }
}

Even more options can be applied, for example classes of buttons to look like APEX buttons:

{
    "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"
      }
}

To get APEX button classes you can use the Button builder from the Universal Theme reference.

Here is list of all possible classes that can be applied to plug-in :

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

Attributes

Action​

Alert​

Confirm​

Toast​

Delete Confirm​

Message Substitutions​

Title​

Message​

Confirm Button Label​

Cancel Button Label​

Icon​

Dialog position​

Timer​

Request / Button Name​

Validation Check (PL/SQL Return Error Msg)​

Footer​

Custom Options​

Action

Alert

Confirm

Toast

Delete Confirm

Message Substitutions

Title

Message

Confirm Button Label

Cancel Button Label

Icon

Dialog position

Timer

Request / Button Name

Validation Check (PL/SQL Return Error Msg)

Footer

Custom Options