Custom notifications using Toastr or SweetAlert

Custom notifications are a great way to enhance the user experience in your Power Pages portals. They help provide real-time feedback to users without disrupting their interaction with the portal. Using libraries like Toastr and SweetAlert allows you to create attractive and customizable pop-up notifications for success, error, and information messages.

This guide explains how to integrate and use these two libraries for notifications in Power Pages.

1. Toastr Notifications in Power Pages

Toastr is a lightweight JavaScript library for non-blocking notifications. It’s ideal for success, error, and info messages that do not require user intervention.

How to Use Toastr:

Step 1: Add Toastr to Your Power Page To use Toastr in Power Pages, you need to include the Toastr library in your portal’s head section. There are two ways to do this:

Using Web Files:
- Upload the Toastr JS and CSS files as Web Files.
- In the Web Template, reference these files.

<!-- Toastr CSS -->
<link href="/WebFiles/toastr.min.css" rel="stylesheet" />
<!-- Toastr JS -->
<script src="/WebFiles/toastr.min.js"></script>

Direct CDN Integration: Alternatively, you can link to a CDN version of Toastr by adding the following code to the <head> section of your page:

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Step 2: Triggering Toastr Notifications

You can trigger Toastr notifications after form submissions, validation failures, or any other relevant event. Here’s how to display different types of notifications:

$(document).ready(function () {
    // Example: Success Notification
    toastr.success("Form submitted successfully!", "Success");

    // Example: Error Notification
    toastr.error("There was an error submitting the form.", "Error");

    // Example: Info Notification
    toastr.info("Please check the form for errors.", "Information");

    // Example: Warning Notification
    toastr.warning("This action will overwrite existing data.", "Warning");
});

Types of Notifications:
- toastr.success(message, title)
- toastr.error(message, title)
- toastr.info(message, title)
- toastr.warning(message, title)

Step 3: Customizing Toastr Notifications

You can customize the appearance, duration, position, and behavior of your notifications:

toastr.options = {
    "closeButton": true,
    "progressBar": true,
    "positionClass": "toast-top-right", // Change the position
    "timeOut": "5000", // Time in milliseconds
    "extendedTimeOut": "1000",
    "showMethod": "slideDown",
    "hideMethod": "slideUp"
};

toastr.success("Operation successful!", "Success");

Common Toastr Options:

closeButton: Shows a close button.
progressBar: Shows a progress bar.
positionClass: Controls the position of the notification (e.g., toast-top-right, toast-bottom-left).
timeOut: How long the notification will stay visible (in milliseconds).
extendedTimeOut: Duration of the progress bar’s timeout when the user hovers over the notification.
showMethod and hideMethod: Define animation effects.

2. SweetAlert Notifications in Power Pages

SweetAlert is another popular JavaScript library for customizable and beautiful alerts. Unlike Toastr, SweetAlert pops up a modal dialog with a custom message.

How to Use SweetAlert:

Step 1: Add SweetAlert to Your Power Page

You can add SweetAlert to your portal by uploading the library as a Web File or by referencing a CDN:

Using Web Files: Upload the SweetAlert JS and CSS files as Web Files and then reference them in your Web Template:

<!-- SweetAlert CSS -->
<link href="/WebFiles/sweetalert2.min.css" rel="stylesheet" />
<!-- SweetAlert JS -->
<script src="/WebFiles/sweetalert2.min.js"></script>

Direct CDN Integration: Alternatively, you can use the following CDN links for SweetAlert:

<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.5.0/dist/sweetalert2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.5.0/dist/sweetalert2.all.min.js"></script>

Step 2: Triggering SweetAlert Notifications

SweetAlert notifications can be triggered easily after specific actions such as form submissions, error handling, etc. Here are a few examples:

$(document).ready(function () {
    // Example: Success Notification
    Swal.fire({
        title: 'Success!',
        text: 'Your form has been submitted successfully.',
        icon: 'success',
        confirmButtonText: 'OK'
    });

    // Example: Error Notification
    Swal.fire({
        title: 'Error!',
        text: 'Something went wrong while submitting the form.',
        icon: 'error',
        confirmButtonText: 'Try Again'
    });

    // Example: Warning Notification
    Swal.fire({
        title: 'Warning!',
        text: 'This action is irreversible!',
        icon: 'warning',
        confirmButtonText: 'Proceed'
    });
});

Types of Notifications:
- icon: 'success'
- icon: 'error'
- icon: 'warning'
- icon: 'info'

You can use confirmButtonText to customize the button text, and the modal will appear on top of your portal content.

Step 3: Customizing SweetAlert Notifications

SweetAlert allows you to customize its appearance and behavior using different options:

Swal.fire({
    title: 'Custom Alert',
    text: 'This is a custom notification.',
    icon: 'info',
    showCancelButton: true, // Show a cancel button
    confirmButtonText: 'Yes, Continue',
    cancelButtonText: 'No, Cancel',
    customClass: {
        popup: 'custom-popup', // Add custom CSS class to the popup
        confirmButton: 'custom-confirm-btn' // Customize button styles
    }
});

Common SweetAlert Options:
- icon: Type of alert (success, error, warning, info).
- title: The title of the alert box.
- text: The message text displayed in the alert.
- showCancelButton: Display a cancel button.
- confirmButtonText: Customize the text on the confirm button.
- cancelButtonText: Customize the text on the cancel button.
- customClass: Apply custom CSS classes for styling.

3. Using Toastr vs. SweetAlert

Feature	Toastr	SweetAlert
Type of Notification	Non-blocking toast-style	Modal alert
Customization	Highly customizable in terms of position, duration, etc.	Highly customizable modal with buttons and icons
User Interaction	Does not block user interaction with the page	Blocks the user until dismissed
Use Case	Ideal for brief notifications (success, info, warnings)	Ideal for detailed alerts with actions (confirm, cancel)

Best Practices for Using Notifications in Power Pages

User Experience: Use notifications sparingly. Overuse can become distracting or annoying.
Clear Messaging: Ensure that the notifications clearly communicate what happened (e.g., success, failure).
Contextual Alerts: Use appropriate alerts (success, error, warning) based on the situation.
Accessibility: Ensure that your notifications are accessible to users with disabilities by using screen reader-friendly messages.