How to add a custom maintenance page to Power Pages

Did you know about the maintenance mode MS provides for Power Pages, it is a great way to let users know that some planned work is going on or something has gone wrong 🚨

By the end of this blog we will have built the below custom maintenance page.

Why have a maintenance page?

Before we build the page, lets consider a couple of reasons of why we are going to make the effort to build this.

Stop a flood of support tickets etc coming through... WHY IS THE WEBSITE DOWN!, WHEN WILL THE SITE BE BACKUP?
Stop end users from submitting data whilst the website is fragile.
Be transparent and show off what features you are bringing in this release.
Aligns well with a established change control process to make sure everyone in the business are aware of future releases.

Build time

This example will be a custom page to remove any links to the system as its just a static HTML page. However, you can select one of your pages listed within the portal.

Prepare somewhere that you can host a HTML file, I will use Github Pages in this example. Follow Github's quickstart guide to get started with hosting files.

Copy the code and place this inside your index.html
Store the image you would like to use for the page inside a folder called img and copy the filename to the source of the image element
Publish

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maintenance Mode</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f9fa;
            color: #495057;
        }
    </style>

</head>

<body>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card" style="width: 30rem;">
                        <img src="./img/<ADD FILENAME>" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">We'll Be Back Soon</h5>
                            <p class="card-text">Our website is currently undergoing maintenance. We’re working hard to
                                improve your
                                experience. Please check back later.</p>
                            <button href="#" class="btn btn-primary">Support</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Admin centre

Go to your Power Pages site and select site actions.
Turn on maintenance mode.
Select custom page.
Enter the URL of the custom web page.

Conclusion

😁Thanks for reading, don't make life more difficult and just use a maintenance page when necessary. By being transparent with end users, they will appreciate the heads up.

Have a great day!

👋 If you liked this then please sign up to my newsletter that will notify you once a new blog comes out.