Beyond Headless Content: Layout as a Service in dotCMS

Expect more than content

You should expect more than just content from your REST APIs. With “Layout as a Service”, or LaaS-ie (groan), you can get the benefits of a traditional CMS-driven experience with the developer friendliness of CaaS. Layout as a Service makes app/CMS integrations (including previews) extraordinarily straightforward. Scroll down to “The Goods” for example code.

Give it a REST

In the CMS space, RESTful access to content (Content as a Service, CaaS, Headless CMS, etc.) is all the rage. With the rise of modern JavaScript frameworks and Single Page Apps, it is pretty easy to see why. Content as a Service allows the decoupling of the management of content from the presentation of that content and gives developers access to content in a familiar JSON format. This is a huge benefit for developers as they are no longer tied to developing in what they might consider old fashioned CMS-based page presentations. Developers can develop (read: play) with the latest modern application technologies, Angular, React or whatever and access / inject business managed content into their apps via REST. The good news is that dotCMS has had these REST endpoints for years. Hooray Developers, right?

When Content as a Service is not enough

The problem comes along when business users need to see a whole layout in CONTEXT to manage content effectively, very much like traditional in-context editing, and when users require more control over the layout, order, and presentation of their content than a single CaaS call will allow. In fact, they need to manage something very much like a page made up of different content objects, but it needs to be machine consumable in order to be delivered properly in other applications. > Concrete example: we recently had a customer whose business users were in charge of managing not single content objects, but lists / carousels of different content objects, with specific graphical headers, based on visitor personalization and contextual data - think Netflix movie lists. Business users needed to be able to generate lists and respond in an extremely agile way to fast developing marketplace trends (say the death of a beloved performer) and the business needed to be able to manage and order the lists of the carousels (managing the list of lists) so that they made sense for the visitor. And, insult to injury, the resulting layouts and lists needed to be displayed not as pages, but in apps and set top boxes, some with limited HTML markup capabilities.  

Enter Layout as a Service

Layout as a Service (LaaS) takes the best of a CMS-driven experience (easy templating, server side contextual rendering, workflow, personalization, rule and permission-based content delivery) and marries it with the developer friendliness of Content as a Service. In dotCMS 4.2, you can call any page and receive the full page payload back as a single JSON object, including:

• Site/Host/Channel with surrounding metadata

• Page details, SEO Keywords, descriptions and canonical URLs

• Template details

• Content block details - these are a listing of the editable blocks of content that make up a page

• Layout details, including header, footer,  column and row information for grids

Not only that - and here is the magic - you can tell dotCMS to render the results and return the rendered results as JSON to you so you can use the information to paint your screen as needed, with very little effort. 

The Goods

Let me show by example - Take a look at the lowly “About Us”  page on the dotCMS demo site:

https://demo.dotcms.com/about-us/index

While it looks simple, this page is virtual, and is actually made up of multiple content objects and content areas which come together to form the page. Feel free to alter the layout and content of this page by logging into the https://demo.dotcms.com site, going to “Browser → /about-us → index“ page and clicking on it.

https://demo.dotcms.com/dotAdmin
U: admin@dotcms.com
P: admin

This should take you to “Edit Mode” which looks like this:

You can see all the editable content, content areas (containers) and you can control and manage them, even adding dynamic widgets to them. This is all boilerplate CMS stuff. Go ahead and play around. Editor’s note: New DnD Layout/Edit Mode coming Spring 2018!

If you are interested, click on the edit template link on the left - this will let you manage the page layout on a screen like this. You can add rows, columns, headers, footers - basically control the layout:

Once you’ve had your fill of CMS based editing, take a look at this code:

https://gist.github.com/wezell/afede08d0fa0c7436d41555eda05185a

This code basically calls the whole page you were managing via a RESTful API - here is the API URL:

https://demo.dotcms.com/api/v1/page/render/about-us/index

Which (if you are authenticated in the demo) returns the whole “About Us” page as a JSON object, including the layout and rendering, and uses it to recreate the page, layout and all, in a static JavaScript-driven app. The meat is here:

https://gist.github.com/wezell/afede08d0fa0c7436d41555eda05185a#file-index-html-L63-L115

The JavaScript loops over the layout, gets the rows and columns, builds the grid and then injects the innerHTML into the grid blocks. While this example is using inline styles, there is no reason you could not composite your page using whatever latest CSS/grid coolness you would want, including Bootstrap 4 or Flexbox-based layouts.

You can see the end result rendering the https://demo.dotcms.com/about-us/index page via JavaScript on GitHub here:

https://rawgit.com/wezell/afede08d0fa0c7436d41555eda05185a/raw/#/about-us/index

The final result, all rendered client side:

That’s It?

Well, let’s look at what we’ve done. Out of the box, dotCMS is a Java-based content management system and we have, with NO JAVA, created a single page Javascript-driven app (developed by HTMLers) complete with content, layout design, gridding (managed by business users) which can then be rendered selectively across different apps using JSON / RESTful interface.

The important point to take home is that the content managers are still empowered to change the layout / template of the “About Us” page in the source CMS, add rows, columns, edit and reorder, show / hide the header, and we can use their chosen layout to drive or hint towards our programmatic layout via the JS code above. Feel free to play around yourself. Add a row, reorder content, hide the header. It will all work.

Now, because dotCMS is an open source Java-based CMS, if you don’t like the way certain aspects of layout API, you can always write your own OSGi based Jersey endpoint. In fact, the original POC Java code for this work is available on GitHub, but that is a blog for another day.

Documentation: https://dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas 

Java Code: https://github.com/wezell/com.dotcms.rest.page