Scheduled maintenance banners

Scheduled maintenance is an essential part of ensuring your Power Pages portal remains optimized and secure. Informing your users about upcoming maintenance helps manage their expectations and ensures they are aware of any disruptions in service. One effective way to do this is by displaying a scheduled maintenance banner across your Power Pages portal. This guide walks you through setting up scheduled maintenance banners to notify users about planned downtime or updates.

---

Step 1: Define the Maintenance Schedule

Before implementing the banner, it’s crucial to define the maintenance schedule, including:

1. Maintenance Start and End Times:

• Clearly specify when the maintenance will begin and end. This helps users plan around potential disruptions.
• Example: “Scheduled maintenance will begin at 2:00 AM on May 5th and conclude at 4:00 AM on May 5th.”

2. Duration of Maintenance:

• Provide the estimated duration of the maintenance window so users know how long they can expect the service to be unavailable.

3. Maintenance Impact:

• Describe whether the maintenance will cause a complete downtime (i.e., the portal is unavailable) or just slow performance in specific areas.
• Example: “Users may experience slower loading times for certain features during the maintenance period.”

---

Step 2: Create the Maintenance Banner

The maintenance banner should be designed to be highly visible to ensure that users are aware of the upcoming downtime. This banner should be placed prominently at the top of the page or at a location where users can easily notice it.

Banner Design Tips:

• Color: Use a noticeable color such as yellow, orange, or red, as these colors attract attention.
• Message: The message should be concise but informative. It should include the maintenance schedule and any relevant information about the impact.
• CTA (Call to Action): If necessary, include a link to a page with more details or an option for users to contact support.
• Dismiss Button: Include a button allowing users to dismiss the banner if they’ve already seen it, especially if it will be up for an extended period.

Example Banner Message:

• “Scheduled Maintenance in Progress. The portal will be temporarily unavailable from 2:00 AM to 4:00 AM on May 5th. We apologize for the inconvenience. Click here for more information.”

---

Step 3: Implement the Banner on Power Pages

You can add the maintenance banner to your Power Pages portal in various ways, depending on how your portal is built and the level of customization you need. Below are a couple of methods to add the banner:

1. Using Web Templates or Custom HTML for Static Banners

If you want to display the maintenance banner statically (without needing any complex logic or scheduling), you can directly modify your Power Pages web templates or add custom HTML.

Steps:

1. Open Power Pages:
   • Navigate to the Power Pages portal where you want to add the banner.
2. Modify Web Template:
   • Locate the Web Template where you want to insert the banner (likely in the header or the global section).
   • Add a div element or section with the banner’s HTML, including text and style tags for visibility.
   <div id="maintenance-banner" style="background-color: #ffcc00; color: #000000; padding: 10px; text-align: center;"> <strong>Scheduled Maintenance in Progress:</strong> Our portal will be temporarily unavailable from 2:00 AM to 4:00 AM on May 5th. We apologize for the inconvenience. <a href="/more-info" style="color: #0000ff; text-decoration: underline;">Click here for more information.</a> <button onclick="dismissBanner()">Dismiss</button> </div>
3. Add Dismiss Functionality:
   • You can use JavaScript to allow users to dismiss the banner once they have read the message.
   function dismissBanner() { document.getElementById("maintenance-banner").style.display = "none"; }
4. Save and Publish:
   • After adding the HTML and JavaScript, save the template and publish the changes. The banner should now be visible to all users.

2. Using Power Automate for Scheduled Maintenance

For more advanced scheduling, you can use Power Automate to dynamically display the maintenance banner based on specific times.

Steps:

1. Create a Power Automate Flow:
   • In Power Automate, create a flow that triggers when the scheduled maintenance starts. You can use the Recurrence trigger to schedule this.
2. Use HTTP Request to Update Portal:
   • Use the HTTP request action in Power Automate to send a request to your Power Pages portal to update the banner content based on the current time and maintenance schedule.
3. Power Pages Custom Web Resources:
   • Within Power Pages, you can use Web Resources to dynamically load content based on specific conditions, like checking if the current time is within the maintenance window.
4. JavaScript Logic:
   • Write custom JavaScript that checks the current time and compares it with the scheduled maintenance window. If it’s maintenance time, show the banner.
   var maintenanceStart = new Date("2023-05-05T02:00:00"); var maintenanceEnd = new Date("2023-05-05T04:00:00"); var currentTime = new Date(); if (currentTime >= maintenanceStart && currentTime <= maintenanceEnd) { document.getElementById("maintenance-banner").style.display = "block"; } else { document.getElementById("maintenance-banner").style.display = "none"; }

---

Step 4: Schedule the Banner to Auto-Dismiss After Maintenance

Once the maintenance period is over, the banner should automatically disappear or be hidden. This can be handled dynamically using Power Automate or JavaScript.

1. Auto Dismissal Using Power Automate:

• Set up an additional flow to automatically hide the maintenance banner after the maintenance window closes. This could involve triggering a change in the portal’s content after the maintenance period has ended.

2. Auto Dismissal Using JavaScript:

• Use JavaScript to hide the banner once the scheduled time has passed.

var maintenanceEnd = new Date("2023-05-05T04:00:00");
var currentTime = new Date();

if (currentTime > maintenanceEnd) {
    document.getElementById("maintenance-banner").style.display = "none";
}

---

Step 5: Testing the Maintenance Banner

Before going live, thoroughly test the banner functionality:

1. Test Visibility: Ensure the banner appears as expected during the maintenance window.
2. Test Dismissal: Check if the banner can be dismissed by users and reappears after the specified time.
3. Test Auto Dismissal: Make sure the banner automatically disappears once the maintenance is over.