Brightspot CMS Developer Guide

Headless

In a headless Brightspot implementation, the view system delivers content via a JSON API to a consuming application; that application processes and transforms the content using its own logic. In headless Brightspot implementations, two scenarios are common:

  • Delivering APIs to mobile applications
  • Delivering APIs to JavaScript frameworks ( React , Angular , or others)

Producing your JSON API requires two steps:

  1. Create a model
  2. Create a view model

The following sections provide examples for each of those steps.

The following snippet is a basic model for an article.

HeadlessModel
import com.psddev.cms.db.Content;
import com.psddev.dari.db.Recordable;

public class Article extends Content {

    private String headline;

    private String body;

    public String getHeadline() {
        return headline;
    }

    public void setHeadline(String headline) {
        this.headline = headline;
    }

    public String getBody() {
        return body;
    }

    public void setBody(String body) {
        this.body = body;
    }
}

The following snippet is a headless view model that serializes a model’s data into JSON format.

HeadlessViewModel1
import com.psddev.cms.view.JsonView;
import com.psddev.cms.view.PageEntryView;
import com.psddev.cms.view.ViewInterface;
import com.psddev.cms.view.ViewModel;

@JsonView 
@ViewInterface
public class ArticleViewModel extends ViewModel<Article> implements PageEntryView { 

    public String getBody() {
        return model.getBody();
    }

    public String getHeadline() {
        return model.getHeadline();
    }
}
  • Indicates output format for this view model is a JSON representation.
  • Indicates the source model is Article.

At run time, Brightspot manages the interaction between the model and view model to produce the JSON file containing field names and associated values.

HeadlessViewModel2
{
  "headline" : "JSON Example",
  "body" : "Brightspot automatically produces JSON from the view model."
}

The consuming application has the responsibility of processing the JSON output for downstream purposes.