Custom 404 (Not Found) and error pages provide a better user experience and allow you to maintain branding and messaging even when users encounter problems. In Power Pages (formerly Power Apps Portals), creating custom error pages is an essential part of enhancing user interaction and ensuring that users are guided smoothly even when things go wrong.
In this guide, we will walk you through the process of creating custom 404 and other error pages in Power Pages.
Step 1: Create Custom HTML for the Error Pages
Start by creating the content for your custom error pages (404, 403, etc.). The content should be designed in a way that informs the user that something went wrong while maintaining a professional appearance.
Example of a Custom 404 Page HTML
Here’s an example of how you can structure a simple 404 page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 100px 20px;
}
h1 {
font-size: 48px;
color: #ff0000;
}
p {
font-size: 20px;
color: #333;
}
.btn {
background-color: #0078d4;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.btn:hover {
background-color: #005a9e;
}
</style>
</head>
<body>
<h1>404 - Page Not Found</h1>
<p>Oops! The page you're looking for doesn't exist.</p>
<a href="/" class="btn">Go to Home Page</a>
</body>
</html>
Explanation:
- HTML Structure: Basic structure with
h1for the error message and a button linking back to the homepage. - CSS Styling: Simple styles for the background, text, and button to make the error page more user-friendly and visually appealing.
Step 2: Create the Custom Error Pages in Power Pages
Once the HTML for your custom error pages is ready, you need to integrate them into Power Pages. You will typically store the content for error pages in a Web Template or as static content on the portal.
Steps to Add a Custom Error Page:
- Navigate to Power Pages Portal Management:
- Go to the Power Pages Portal Management app in the Power Platform Admin Center.
- Create a Web Template for the Custom Error Page:
- In the Portal Management section, navigate to Web Templates.
- Create a new Web Template, or modify an existing one, to include the HTML content of your custom error page.
- For example, if you want to create a custom 404 page, create a new Web Template named
Custom404and paste the HTML code for the 404 page in it.
- Associate the Web Template to the Error Page:
- To link this Web Template to a specific error page, go to Portal Management.
- Under Page Templates, you may want to customize existing page templates or add a new one that will be used for your error page.
Step 3: Redirect to the Custom Error Page in Power Pages
After creating your custom error page, the next step is to ensure that when users encounter an error, they are redirected to the custom page instead of the default error page.
Setting Custom Error Pages for Common Errors:
Power Pages (and portals in general) allow you to customize the error handling for different HTTP status codes (such as 404, 403, 500, etc.). You can configure these redirects in the Portal Management.
1. Configure the Custom 404 Page:
- Go to the Web Link Set or Web Pages section of Portal Management.
- Set up a URL (e.g.,
/404) that will display your custom 404 page. - In the Custom Error Page Settings, ensure that requests for invalid or non-existent URLs are redirected to this custom page.
2. Set the Error Handler in Web.config (Optional):
- You can manually configure error handling by editing the
Web.configfile (if applicable). - The standard approach is to redirect errors like 404 to a custom path.
<system.webServer>
<httpErrors errorMode="Custom">
<remove statusCode="404" />
<error statusCode="404" path="/404" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
In this configuration, a 404 error would redirect to the /404 URL, where the custom error page is served.
Step 4: Handle Other Errors (403, 500, etc.)
Apart from the 404 error, you may want to customize other error pages such as:
- 403 (Forbidden): This is shown when users try to access pages they are not authorized to view.
- 500 (Internal Server Error): This is displayed when there’s a server-side issue.
You can follow similar steps to create custom error pages for these statuses:
Example of a Custom 403 Page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Access Denied</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 100px 20px;
}
h1 {
font-size: 48px;
color: #ff0000;
}
p {
font-size: 20px;
color: #333;
}
.btn {
background-color: #0078d4;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.btn:hover {
background-color: #005a9e;
}
</style>
</head>
<body>
<h1>403 - Access Denied</h1>
<p>Sorry, you do not have permission to access this page.</p>
<a href="/" class="btn">Go to Home Page</a>
</body>
</html>
Step 5: Test Your Custom Error Pages
- 404 Error: Try accessing a URL on your Power Pages site that doesn’t exist, such as
https://yourportal.com/nonexistentpage, and ensure that it redirects to your custom 404 error page. - 403 Error: Attempt to access a page that you know is restricted, and verify the custom 403 page is shown.
- 500 Error: Simulate server errors (if possible) or test any edge cases that might result in a server error to see the behavior of your custom error pages.
Step 6: Final Customizations
- Add Branding: Ensure that the error page follows the same branding guidelines as your portal (logos, colors, fonts).
- Navigation Links: Provide clear links back to the homepage or relevant sections of the portal to enhance the user experience.
- Track Error Metrics: Optionally, you can add tracking scripts (e.g., Google Analytics) to monitor how often users encounter these error pages.