Component Settings

Inside the plug-in, component settings can be applied as default settings per component. In other words, there are default settings of plug-ins specified in one place globally for application. In this section, only component settings are described in detail.

Theme

Theme is the primary component setting determining which theme/CSS to load for the plug-in globally for an application. Theme cannot be mixed during the execution of the plug-in. There is also possibility to apply substitution string and live switch the theme if needed. Check the demo application to see the difference between themes and options for switching between.

The following themes are available in the plug-in :

bootstrap-4
borderless
bulma
dark
material-ui
minimal
wordpress-admin
default

Confirm Button Label

When the plug-in instance setting Confirm button label is empty, then this setting is applied as the confirm button label. You can use basic text or text messages.

Supported options :

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

Cancel Button Label

When the plug-in instance setting Cancel button label is empty, then this setting is applied as the confirm button label. You can use basic text or text messages.
This setting is used only in the Confirm action. For alert and toast messages, this button is not applied by default.

Supported options :

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

Delete Title

This attribute is used only in Delete Confirm actions. The idea is to have a consistent delete messages throughout the application. You can use basic text or text messages.

Supported options :

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

Delete Icon

This attribute is used only in Delete Confirm actions. The idea is to have a consistent delete icon throughout the application.
This icon is displayed if there is no validation error.

Available icon options are:

No Icon
Success
Danger (default)
Warning
Info
Question

Dialog Alert/Confirm Position

When the plug-in instance setting Position is empty for Alert or Confirm actions, then this setting is applied.

Supported positions are :

top-start
top
top-end
center-start
center (default)
center-end
bottom-start
bottom
bottom-end

Dialog Toast Position

When the plug-in instance setting Position is empty for a Toast action, this setting is applied. This option is separated from alert/confirm because a toast message is usually displayed as a quick message with a timer and different position, so it can be set and used in different positions.

Supported positions are :

top-start
top
top-end (default)
center-start
center
center-end
bottom-start
bottom
bottom-end

Timer

When the plug-in instance setting Timer is set to 0 then this setting is applied with the same logic as in the plug-in. This setting can be used if the application needs to have alert or toast messages disappear after a few seconds. Timer is used only on alert or toast messages, confirm action needs to wait for user to confirm/decline the action. The value of the timer is defined in seconds.

Example:

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

Confirm Validation Error Icon

The default icon used across the application for displaying an icon on validation box inside a plug-in instance. If a validation error occurs on a confirm action, this icon will be displayed if selected. This setting is only used with Confirm actions.

Available icon options are:

No Icon
Success
Danger (default)
Warning
Info
Question

Confirm Validation Button Label

The default validation button label used across applications for displaying buttons on validation boxes inside plug-in instance. If a validation error occurs on a confirm action, this button label will be displayed. This setting is only used in Confirm actions and is applied as text or a text message.

Supported options :

HTML code,
Substitution string (ex. &UCSWAL2/_VALID/_OK.),
Text message (ex. UCSWAL2.VALID.OK),
Message Substitutions replaces (%0, %1, %2, %3)

Confirm Validation Check (PL/SQL returning error msg)

When the plug-in instance setting Validation check (PL/SQL returning error msg) is empty on a Confirm action, then this validation setting is applied for all instances of the plug-in, globally.

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 because this textarea is limited up to 4000 characters.
Returning text messages is also supported as in the following sample:

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

When the plug-in instance setting Footer is empty, then this setting is applied on all actions as a global setting, if needed. You can use basic text or text messages.

Supported options :

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

Custom Options

When the plug-in instance setting Custom Options is empty, this setting is applied on all actions as a global setting, if needed. This box has a lot of different options. In the following samples only few will be displayed, but more detail can be found on https://sweetalert2.github.io/#configuration .

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 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, using classes to make buttons 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 Universal Theme reference as Button builder.

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

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