Creating a Custom Error Page

A custom error page must be associated with an error code set in Brightspot’s web.xml file. Assuming that web.xml is configured for error code 404, a custom error page must exist with a permalink of /404. The following sections show two examples to construct a Brightspot 404 error page. The first and easiest method is to use the Brightspot Text content type, which is displayed in the Brightspot CMS tool as “Raw HTML”. The second example follows the Model-View-View Model (MVVM) pattern to construct a page, where you create a Model class, View templating components, and a ViewModel class.

Example 1: Using Raw HTML

  1. Using the Brightspot CMS tool, create a new Raw HTML object.
  2. At a minimum, set the following fields on the Main tab of the content edit page:
    • Name - A name to reflect the type of error page
    • HTML - The HTML code to be rendered by browsers.
  3. Add a permalink that matches the value of the <location> child element in the web.xml file.
  4. Optionally, set the fields in the other tabs of the content edit page.

Example 2: Using MVVM Pattern

Step 1: Create a Model for the Page

The following example shows a Model class for a 404 error page. Note that the Brightspot-constructed permalink is based on the value of the httpError field.

public class Error404 extends Content implements Directory.Item, Page {

   @ToolUi.Placeholder("404 Error Page")
   private String name;

   private Image leadImage;

   @ToolUi.RichText
   private String body;

   @ToolUi.Note("Must match error code value in web.xml")
   private String httpError;

   // Getters and Setters

   @Override
   public String createPermalink(Site site) {
     return StringUtils.toNormalized(getHttpError());
   }
}

As a result of this Model class, the Content Edit Page for the Error404 content type is similar to the following:

../../../_images/error-page.png

Step 2: Add Handlebars Placeholders

In the View’s Handlebars template for the page, add placeholders for the error page content.

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <title>{{name}}</title>
   <link href="/styleguide/All.min.css" type="text/css" rel="stylesheet"/>
</head>

<body>
   <div class="Error-headline">
      <h1>{{httpError}}</h1>
   </div>

   <div class="Error-leadImage">
      <img src="{{leadImageUrl}}" height="300" />
   </div>

   <div class="Error-body">
      {{body}}
   </div>
</body>

</html>

Step 3: Add JSON Keys

In the View’s JSON file for the page, add key-value pairs for the error page content.

{
   "_template": "errorPages.hbs",
   "name": "{{words(5)}}",
   "httpError": "{{words(1)}}",
   "body": "{{paragraphs(1)}}",
   "leadImageUrl": "{{image(400, 300)}}"
}

Step 4: Create a ViewModel for Error404

In the Error404ViewModel class, add methods to retrieve values from the Error404 object and to populate the View placeholders.

public class Error404ViewModel extends ViewModel<Error404> implements ErrorPagesView {

   @Override
   public CharSequence getName() {
      return model.getName();
   }

   @Override
   public CharSequence getHttpError() {
     return model.getHttpError();
   }

   @Override
   public CharSequence getBody() {
     String body = model.getBody();
     if (body != null) {
         return RichTextViewBuilder.buildHtml(body, (rte) -> null);
     }
     return null;
   }

   @Override
   public CharSequence getLeadImageUrl() {
     Image leadImage = model.getLeadImage();
     if (leadImage != null) {
         StorageItem file = leadImage.getFile();

         if (file != null) {
             return file.getPublicUrl();
         }
     }
     return null;
   }
}