How do I trigger Alerts and info messages with a button

 Introduction

Triggering alerts and informational messages with a button is a common way to enhance user interaction in Oracle APEX applications. By providing immediate feedback, you can guide users, confirm actions, or notify them of important information without navigating away from the current page. This blog will explain how to configure buttons in APEX to display alerts and info messages effectively, improving the overall user experience and making your applications more responsive and intuitive.

Trigger Alerts and Info Messages with a Button in Oracle APEX
Alerts and informational messages help provide immediate feedback to users when they perform actions such as clicking a button. In Oracle APEX, you can trigger these messages using JavaScript, Dynamic Actions, or PL/SQL processes, giving you flexibility in how you interact with users. This guide covers various methods to display alerts and messages upon button clicks.

Using JavaScript to Trigger Alerts
JavaScript offers a simple way to show alert messages when a button is pressed. For example, create a button and set its action to be defined by a Dynamic Action. Then, create a Dynamic Action with these settings: Event as Click, Selection Type as Button, and Action as Execute JavaScript Code. Add the code:

alert('This is a simple alert message!');

This displays a pop-up alert when the button is clicked. You can also include dynamic content by retrieving page item values, like:

var username = $v('P1_USERNAME');  
alert('Hello, ' + username + '! Welcome to the application.');

JavaScript Confirmation Alerts
To ask users for confirmation before proceeding, use JavaScript’s confirm() method:

if (confirm('Are you sure you want to continue?')) {  
    alert('You selected OK!');  
} else {  
    alert('You canceled the action.');
}

This shows a confirmation dialog, and subsequent alerts depend on the user's choice.

Custom Info Messages with APEX Functions
APEX provides built-in JavaScript functions like apex.message.showPageSuccess() for success notifications and apex.message.alert() for error alerts, which integrate seamlessly with the page UI:

apex.message.showPageSuccess('Your action was successful!');
apex.message.alert('An error occurred. Please try again.');

Triggering Alerts Using Dynamic Actions
You can display alerts without writing JavaScript by configuring Dynamic Actions: create a button, then a Dynamic Action with Event set to Click and Action to Execute JavaScript Code with the message display function. For example:

apex.message.showPageSuccess('Data saved successfully!');

To show error messages based on conditions, create a PL/SQL Process that checks input and uses apex_error.add_error() to display inline notifications:

IF :P1_INPUT IS NULL THEN  
    apex_error.add_error(  
        p_message => 'This field cannot be empty.',  
        p_display_location => apex_error.c_inline_in_notification  
    );  
END IF;

Using PL/SQL to Trigger Notifications
You can also trigger notifications using PL/SQL code. For example, set a session state value and use a Dynamic Action to display it:

apex_util.set_session_state('P1_MESSAGE', 'Operation completed successfully.');

Then in JavaScript:

apex.message.alert($v('P1_MESSAGE'));

For errors, use apex_error.add_error() to show messages in the notification area.

Best Practices

• Use JavaScript alerts for simple confirmations or warnings.

• Use apex.message.showPageSuccess for friendly success messages.

• Use apex_error.add_error for consistent validation error handling.

• Use Dynamic Actions to add alerts without coding when possible.

• Avoid excessive alerts to prevent disrupting users.

Oracle APEX offers multiple ways to trigger alerts and info messages via buttons, ranging from simple JavaScript alerts to advanced PL/SQL validations and integrated message functions. Choosing the right method helps create a better user experience by providing clear, timely feedback.

Example

• Create a button

• Give it a Dynamic Action

• In the True Action section

• Set the Identification Action to: Execute JavaScript Code

• In the Settings add the following to the Code field:

apex.message.showPageSuccess('This is a Success Message Alert');

1. The following code generates this “Success” message:

Code: apex.message.showPageSuccess('This is a Success Message Alert');

Message: 

2. The following code generates this “Alert” message:

Code: apex.message.alert( "Here is a message from APEX.",);

Message:

3. The following code generated a “Confirm” message:

Code: 

apex.message.confirm( "Are you sure?", function( okPressed ) {

     if( okPressed ) {

         deleteIt();

   }

});

Message:

4. The following code will display generated errors:

Code: 

// First clear the errors

apex.message.clearErrors();

// Now show new errors

apex.message.showErrors([

    {

        type:       "error",

        location:   [ "page", "inline" ],

        pageItem:   "P1_ENAME",

        message:    "Name is required!",

        unsafe:     false

    },

    {

        type:       "error",

        location:   "page",

        message:    "Page error has occurred!",

        unsafe:     false

    }

]);

5. Customized messages

1. Create a Button with a Dynamic Action of Action: Execute JavaScript Code

2. In the Code, place the following:

apex.message.alert( "My Alert Content", function(){

    console.log("Dialog Closed!")

}, {

    title: "My Alert Title",

    style: "information",

    dialogClasses: "my-custom-class",

    iconClasses: "fa fa-info fa-2x",

    okLabel: "Okay!"

} );

Generates the following:

Conclusion
Using buttons to trigger alerts and informational messages in Oracle APEX is a simple yet powerful technique to communicate with users in real time. By setting up dynamic actions or processes that display these messages, you can ensure users receive clear feedback on their actions, helping reduce errors and improve usability. Mastering this feature will enable you to build interactive applications that are both user-friendly and efficient.