Page REST API: Layout as a Service (LaaS) - Documentation topics on: caas cms,content as a service,laas,layout as a service,rest api,restful,single page app,.

Page REST API: Layout as a Service (LaaS)

The Page REST API enables you to retrieve all the elements of any Page in your dotCMS system. The elements may be retrieved in JSON format, or as fully rendered HTML; regardless of the format chosen, each element is returned separately within it's own JSON object, making it easy to retrieve and use all page elements with a single call.

Note: For additional information on the usage and benefits of the Page REST API and Layout-as-a-Service, please see the Layout as a Service (LaaS) post in the dotCMS blog.

Usage

Calls to the Page API take the following form:

{server_address}/api/v1/page/{format}/{page_path}

Where:

  • {server_address} is replaced with the address of your dotCMS server.
  • {format} specifies the format to return each page element in.
    • Acceptable values are json or render.
  • {page_path} is replaced with the path to the page

Examples

JSON Formatted Elements

The following call returns all the page elements of the dotCMS Demo site “About Us” page, with each page element being returned in JSON format:

Note: You must be logged into the Demo Site back-end for this call to work.

This call returns results which include all elements used to display the page, including the site, page, template, containers, content, etc. The following is a small sample of the information returned:

{
  "site" : {
    "map" : {
      "hostName" : "demo.dotcms.com",
      "googleMap" : "AIzaSyDXvD7JA5Q8S5VgfviI8nDinAq9x5Utmu0",
      "modDate" : 1488846089000,
      "keywords" : "CMS, Web Content Management, Open Source, Java, J2EE",
      "description" : "dotCMS starter site was designed to demonstrate what you can do with dotCMS.",
      "type" : "host",
      "title" : "demo.dotcms.com",
      "inode" : "f7c74bb2-eb6f-4859-b660-9e39b718f9a7",
      "hostname" : "demo.dotcms.com",
...
      "modUser" : "dotcms.org.1"
    },
    "lowIndexPriority" : false,
    "name" : "demo.dotcms.com",
    "default" : true,
    "structureInode" : "855a2d72-f2f3-4169-8b04-ac5157c4380c",
    "aliases" : null,
    "inode" : "f7c74bb2-eb6f-4859-b660-9e39b718f9a7",
...
    "languageId" : 1,
    "categoryId" : "f7c74bb2-eb6f-4859-b660-9e39b718f9a7"
  },
  "template" : {
    "iDate" : 1412108461645,
    "type" : "template",
    "owner" : null,
    "inode" : "cc1f0d74-8356-4035-925a-5c792d7b386f",
    "identifier" : "8660b482-1ef6-4d00-9459-3996e703ba19",
    "title" : "Quest - 2 Column (Right Bar)",
    "friendlyName" : "Quest - 2 Column (Right Bar)",
    "modDate" : 1412108461663,
    "modUser" : "dotcms.org.1",
...

Fully Rendered Elements

The following call returns all the page elements of the dotCMS Demo site “About Us” page, with each page element returned as fully rendered HTML, encapsulated within a JSON obect:

Note: You must be logged into the Demo Site back-end for this call to work.

This call returns all of the same elements as the previous call, but returns displayable elements as fully rendered HTML. For an example, click the link above, and view the source of the rendered HTML page.

JavaScript Application Example

The following HTML code includes a full Javascript application which uses the Page REST API to pull and display the fully rendered contents of the “About Us” page from the dotCMS demo site.

<html>
    <head>
        <script>

            function getUrl(){
                var url = (window.location.hash.length==0)
                    ? "/about-us/index"
                    : window.location.hash.substr(1);
                if(!url.startsWith("/")){
                    url = "/" + url;
                }
                if(url.endsWith("/")){
                    url = url + "index";
                }
                window.location.hash = url;

                // HERE IS THE API ENDPOINT TO GET THE LAYOUT as a SERVICE back, 
                // e.g. https://demo.dotcms.com/api/v1/page/render/about-us/index
                return "https://demo.dotcms.com/api/v1/page/render" + url;
            }
            var url = getUrl();
            console.log("reading:"+url);
            function readJson(url, callback) {
                var req = new XMLHttpRequest();
                req.open("GET", url, true);
                req.setRequestHeader("Authorization", "Basic " + btoa("admin@dotcms.com:admin")); 
                req.onreadystatechange = function() {
                    if (req.readyState === 4 && req.status == "200") {
                        callback(req.responseText);
                    }
                }
                req.send();
            }
            window.onload = 
                readJson(url, function(text){
                    var data = JSON.parse(text);
                    if(window.location.search.indexOf("raw=")>-1){
                        document.body.innerHTML=text;
                    }
                    else if(data.layout){
                        writeLayoutDocument(data);
                    }
                    else{
                        writeRawDocument(data);
                    }
                });

            function writeRawDocument(data){    
                document.body.innerHTML=data.page.map.rendered;
            }

            function writeLayoutDocument(data){ 
                var rows = data.layout.body.rows;
                var myPage = document.createElement('div');
                document.body.appendChild(myPage);
                myPage.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
                myPage.innerHTML="reading from : <a href='" + url + "'>" + url + "</a>";

                if(data.layout.header){
                    var header = document.createElement('div');
                    header.innerHTML="<h1>Including Header</h1>";
                    header.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
                    document.body.appendChild(header);
                }

                for(i=0;i<rows.length;i++){
                    var row = rows[i];
                    var columns = row.columns;
                    var thisRow = document.createElement('div');
                    thisRow.style.cssText = 'display:flex;flex-direction:row;justify-content:space-between';
                    document.body.appendChild(thisRow);

                    for(j=0;j<columns.length;j++){
                        var column = columns[j];
                        var containers = column.containers;
                        var thisColumn = document.createElement('div');
                        thisColumn.style.cssText = 'flex-basis:' + (column.widthPercent-0) + '%;border:2px solid #9AB3CE;margin:10px;padding:10px;background:#EEF5F9';
                        thisRow.appendChild(thisColumn);

                        for(k=0;k<containers.length;k++){
                            var containerId = containers[k];
                            var thisContainerInfo = document.createElement('div');
                            thisContainerInfo.style.cssText = "color:gray;text-align:right;"
                            thisColumn.appendChild(thisContainerInfo);
                            thisContainerInfo.innerHTML="{row:" + (i+1) + ",column:" + (j+1)+ ",width:" + column.widthPercent + "%}";
                            var thisContainer = document.createElement('div');
                            thisContainer.style.cssText = 'border:3px solid #9AB3CE;background:#ffffff;margin:10px;padding:10px;';
                            thisColumn.appendChild(thisContainer);
                            // add in the pre-rendered container content
                            thisContainer.innerHTML=data.containers[ containerId ].rendered;
                        }
                    }
                }
                if(data.layout.footer){
                    var footer = document.createElement('div');
                    footer.innerHTML="<h1>Including Footer</h1>";
                    footer.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6';
                    document.body.appendChild(footer);
                }
            }
        </script>
        <base href="https://demo.dotcms.com">
    </head>

    <body></body>
</html>

You may see a full working example of this page at the rawgit site.