Creating a custom error page
A custom error page must be associated with an error code set in Brightspot’s web.xml
file and have 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 Text content type, which appears in Brightspot as Raw HTML. The second example follows the model-view-view model (MVVM) pattern to construct a page in which you create a model class, view templating components, and a view model class.
- In Brightspot, create a new Raw HTML object.
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 pageHTML
—The HTML code to be rendered by browsers.
- Add a permalink that matches the value of the
<location>
child element in theweb.xml
file. - (Optional) Set the fields in the other tabs of the content edit page.
Step 1: Create a model for the page
The following example shows a model for a 404 error page. 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;
public String getHttpError() {
return httpError;
}
/* Other getters and setters... */
@Override
public String createPermalink(Site site) {
return StringUtils.toNormalized(getHttpError());
}
}
As a result of this model, the content edit page for the Error404
content type is similar to the following:

Step 2: Add template placeholders
In the page's template, 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 data 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 view model 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;
}
}