How to customize an alert message

 Introduction

Customizing alert messages in Oracle APEX allows you to provide users with clear, personalized feedback that matches your application’s style and tone. Instead of generic pop-ups, customized alerts can improve user experience by making messages more informative, visually appealing, and context-specific. This blog will guide you through various techniques to tailor alert messages, from simple JavaScript modifications to using built-in APEX message APIs for enhanced control and design.

In Oracle APEX, customizing alert messages enables you to create notifications that fit your application’s design and improve user experience. Alerts can be personalized using JavaScript, Dynamic Actions, APEX message functions, and CSS, giving you flexibility in styling, positioning, and even adding animations.

Using JavaScript to Create Custom Alerts
JavaScript lets you go beyond the standard alert() function. For example, using APEX’s built-in function:

function showCustomAlert() {  
    let message = "This is a custom alert message.";  
    apex.message.alert(message);
}

This shows a pop-up alert styled by APEX. For more visual customization, you can create styled dialog boxes:

function showStyledAlert() {  
    $("body").append('<div id="customAlert" class="custom-alert">Important Message</div>');  
    $("#customAlert").fadeIn().delay(2000).fadeOut();  
}

Here, the alert fades in and out, and you can style it with CSS.

Customizing Alerts with APEX Message Functions
Oracle APEX provides built-in functions that integrate alerts within the page UI. For example, to show a success notification:

apex.message.showPageSuccess("Operation completed successfully!");

For error messages:

apex.message.alert("An error occurred. Please check your input.");

These functions provide consistent styling and placement for messages.

Using Dynamic Actions to Trigger Custom Alerts
You can configure Dynamic Actions to display alerts without writing JavaScript manually:

1. Create a button on your page.

2. Add a Dynamic Action with Event set to Click.

3. Set Action to Execute JavaScript Code and enter:

apex.message.alert("This is a custom alert triggered by a button.");

When clicked, the alert appears seamlessly.

Using CSS to Style Alert Messages
CSS can greatly enhance the look of your custom alerts. For example, add this CSS to your Inline CSS:

.custom-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #ffcc00;
    color: #333;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
}

This styles a yellow alert box with a subtle shadow. Combine with JavaScript to show and hide alerts dynamically:

function showCustomAlert(message) {  
    let alertBox = $("<div class='custom-alert'></div>").text(message);  
    $("body").append(alertBox);  
    alertBox.fadeIn().delay(3000).fadeOut();  
}
$("#myButton").on("click", function() {  
    showCustomAlert("This is a custom-styled alert!");  
});

Using Bootstrap Alerts in APEX
If your app uses Bootstrap, you can leverage its alert classes for consistent styling:

<div id="myAlert" class="alert alert-warning" role="alert" style="display:none;">  
    This is a Bootstrap alert message.
</div>

Then show it with JavaScript:

$("#myAlert").show().delay(3000).fadeOut();

This creates a styled alert that disappears after a few seconds.

Best Practices for Custom Alerts in APEX

• Use apex.message.showPageSuccess() for success messages.

• Use apex.message.alert() for critical alerts needing user attention.

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

• Combine CSS and JavaScript for modern, visually appealing messages.

• Avoid excessive alerts to prevent disrupting users.

Customizing alert messages in Oracle APEX helps deliver clearer, timely feedback that fits your application’s look and feel. Whether you use JavaScript, Dynamic Actions, CSS, or Bootstrap, selecting the right approach enhances usability and keeps users informed effectively.

Example

Here you need to create a function with the look and feel of the message and then call it via JavaScript.

Create a button

At the “page” level add the following code to the “Function and Global Variable Declaration” section

Code: 

function show_notification(Msg){  

        apex.message.showPageSuccess(Msg); 

        $('#t_Alert_Success').attr('style','background-color: #ffe5ad;');

        $('.t-Alert-title').attr('style','color: black;font-weight: bold;');

        $('#t_Alert_Success div div.t-Alert-icon span').removeClass('t-Icon').addClass('fa fa-warning');

}

• Next, create a button with a Dynamic Action

• Set the True action to : Execute JavaScript Code

• Add the following code: show notification("Your Message");

This will display the following message

Here is another way of doing it without JavaScript

To get the following message: 

1. Create a button with a Dynamic Action.

2. In the TRUE action select “Alert”.

3. Give it a title and some message.

4. Select a Style.

5. Add an Icon if you want to.

Informational

Danger

Informational

Warning

Success

Confirm

Conclusion

By customizing alert messages in Oracle APEX, you enhance communication with your users and create a more professional and user-friendly interface. Whether through styled pop-ups, dynamic content, or integrated page notifications, personalized alerts help users understand important information and respond appropriately. Mastering alert customization is an essential skill for developers looking to build polished and effective applications.