Display Custom Alert Messages on Power Pages Basic Forms

IIn this blog, we'll walk through how to display custom alert messages on Power Pages basic forms. This can be useful when you need to notify users about important information, form validation errors, or custom messages based on specific conditions.

We'll cover the following steps:

1. Create a Power Pages Basic Form

2. Write the JavaScript Code for Custom Alerts

3. Add the JavaScript to the Form

---

Step 1: Create a Power Pages Basic Form

Before adding custom alerts, ensure you have a Power Pages site with a basic form set up.

• Go to the Power Pages management area.

• Select the site where you want to add the form.

• Create a new basic form or edit an existing one.

Step 2: Write the JavaScript Code for Custom Alerts

Now, let’s write a simple JavaScript function to display a custom alert.

function showCustomAlert(message) {

    var alertBox = document.createElement("div");

    alertBox.innerText = message;

    alertBox.style.position = "fixed";

    alertBox.style.top = "50%";

    alertBox.style.left = "50%";

    alertBox.style.transform = "translate(-50%, -50%)";

    alertBox.style.backgroundColor = "#f44336";

    alertBox.style.color = "#fff";

    alertBox.style.padding = "20px";

    alertBox.style.borderRadius = "5px";

    alertBox.style.fontSize = "15px";

    alertBox.style.textAlign = "center";

    alertBox.style.zIndex = "1000";

    alertBox.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";

    alertBox.style.minWidth = "200px"; // Ensure enough width for the alert

    alertBox.style.paddingTop = "25px"; // Space for the close button

    // Create the cross sign (×) for closing the alert box

    var closeButton = document.createElement("span");

    closeButton.innerText = "×"; // Cross sign

    closeButton.style.position = "absolute";

    closeButton.style.top = "-5px";  // Adjust for perfect positioning

    closeButton.style.right = "5px";

    closeButton.style.fontSize = "24px";

    closeButton.style.cursor = "pointer";

    closeButton.style.fontWeight = "bold";

    closeButton.style.color = "#fff";

    // Close the alert when the cross is clicked

    closeButton.onclick = function() {

        document.body.removeChild(alertBox);

        clearTimeout(autoClose); // Clear the auto-close timer if the user clicks manually

    };

    // Add the cross sign to the alert box

    alertBox.appendChild(closeButton);

    // Add the alert box to the body

    document.body.appendChild(alertBox);

    // Automatically close the alert after 3 seconds

    var autoClose = setTimeout(function () {

        if (document.body.contains(alertBox)) {

            document.body.removeChild(alertBox);

        }

    }, 3000); // 3000 milliseconds = 3 seconds

}

Explanation:

• This function creates a styled alert box with the message you provide.

• The alert automatically disappears after 3 seconds.

Step 3: Add the JavaScript to the Form

• Go to Power Pages Studio and open your form.

• Navigate to "Additional Settings" → "Custom JavaScript" and paste your JavaScript code along with alert function.

🎯 In my case, I’m using this function to validate dates showing custom alerts when date conditions aren’t met.