Render a JSON View of a Page Designer Page

You can expose the data assembled by a page and its components in JSON format. This process can be useful if you want to expose the page to external services to implement native mobile apps or custom heads.

Use the serializePage method of the dw.experience.PageMgr API to render the page in JSON. For more information about PageMgr, see PageMgr API.

The method to expose JSON has the following signatures:

String : serializePage(String pageID, String parameters)
String : serializePage(String pageID, Map<String,Object> aspectAttributes, String parameters)

For example, the following code uses the serializePage method to render a page in JSON.

.../cartridge/controllers/Page.js

function json() { 
   response.setContentType('application/json');

   var page = PageMgr.getPage(request.httpParameterMap.cid.value); 
   
   if (page == null)
   {
      response.setStatus(404);
   }
   else
   {
      if (!page.hasVisibilityRules()) 
      {
         var ONE_WEEK = new Date().getTime() + 7 * 24 * 60 * 60 * 1000; 
         response.setExpires(ONE_WEEK); 
      }

      if (page.isVisible()) 
      { 
         response.writer.print(PageMgr.serializePage(page.ID, null)); 
       } 
       else
       {
         response.setStatus(404);
       }
    }
}

In this example, the page has three regions:

• Header: banner
• Main: category tile and a 2x2 layout grid that holds product and category tiles
• Footer: banner

The resulting JSON includes content structured as follows:

• id: String: The ID of the page or component.
• data: Map<String, Object>: Content attributes.
• custom: Map <String, Object>: Additional data that custom code assembles.
• regions: Region: The region model representing the component hierarchy:
  • id: String: The ID of the region.
  • components: List<StructuredContent>: All visible components assigned to the region in order.

{
    "id": "mypage",
    "data": {
        "attr1": "foo"
    },
    "regions": [
        {
            "id": "header",
            "components": [
                {
                    "id": "j2q3eö9fl3inil",
                    "data": {
                        "title": "New Arrivals",
                        "bannerimage": "/catalog/newarrivals.jpg"
                    }
                }
            ]
        },
        {
            "id": "main",
            "components" : [
                {
                    "id": "4wso9j3fwohj3o8",
                    "data": {
                        "category": "new-arrivals",
                        "image": "hotstuff.png"
                    }
                },
                {
                    "id": "e4g5vuftzue457z4",
                    "data": {
                        "layout": "2x2"
                    },
                    "regions": [
                        {
                            "id": "tiles",
                            "components": [
                                {
                                    "id": "3gfn3w820uz4",
                                    "data": {
                                        "product": "9237918273"
                                    }
                                },
                                {
                                    "id": "3v5zb5r7i547u",
                                    "data": {
                                        "product": "2374984579"
                                    }
                                },
                                {
                                    "id": "ev5z45z3z34235",
                                    "data": {
                                        "category": "mens-shoes"
                                    }
                                },
                                {
                                    "id": "vurz3tv35zu34z",
                                    "data": {
                                        "category": "womens-shoes"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "id": "footer",
            "components" : [
                {
                    "id": "87wa3tr897g38s",
                    "data": {
                        "title": "Autumn Collection",
                        "bannerimage": "/promo/autumn/collection.jpg"
                    }
                }
            ]
        }
    ]
}

If your page type or component types have custom code that you want to include in the exposed JSON, use the serialize(context) function in addition to the render(context) function in the JavaScript for the page or component, as in the following example.

.../cartridge/experience/components/producttile.js

module.exports.serialize = function (context) {
    var product = context.content.product;
    var images = product.getImages('large');
    var productImage = null;
    if (images.iterator() && images.iterator().hasNext()) {
        productImage = images.iterator().next();
    }
    
    return {
        "url" : URLUtils.url('Product-Show', 'pid', product.ID).toString(),
        "image" : productImage.getAbsURL().toString();
    };
}

The JSON returned includes the output of the custom code as a custom property of the page or component as in this example.

{
    "id": "mypage",
    "data": {
        "attr1": "foo"
    },
    "regions": [
        {
            "id": "header",
            "components": [
                {
                    "id": "j2q3eö9fl3inil",
                    "data": {
                        "title": "New Arrivals",
                        "bannerimage": "/catalog/newarrivals.jpg"
                    }
                }
            ]
        },
        {
            "id": "main",
            "components" : [
                {
                    "id": "4wso9j3fwohj3o8",
                    "data": {
                        "category": "new-arrivals",
                        "image": "hotstuff.png"
                    }
                },
                {
                    "id": "e4g5vuftzue457z4",
                    "data": {
                        "layout": "2x2"
                    },
                    "regions": [
                        {
                            "id": "tiles",
                            "components": [
                                {
                                    "id": "3gfn3w820uz4",
                                    "data": {
                                        "product": "9237918273"
                                    },
                        "custom": {
                                        "url" : "https://.../Product-Show?pid=9237918273",
                                        "image" : "https://.../iphone6.jpg"
                                    }
                             },
                                {
                                    "id": "3v5zb5r7i547u",
                                    "data": {
                                        "product": "2374984579"
                                    },
                          "custom": {
                                        "url" : "https://.../Product-Show?pid=2374984579",
                                        "image" : "https://.../galaxyS8.jpg"
                                    }                                
                                },
                                {
                                    "id": "ev5z45z3z34235",
                                    "data": {
                                        "category": "mens-shoes"
                                    }
                                },
                                {
                                    "id": "vurz3tv35zu34z",
                                    "data": {
                                        "category": "womens-shoes"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "id": "footer",
            "components" : [
                {
                    "id": "87wa3tr897g38s",
                    "data": {
                        "title": "Autumn Collection",
                        "bannerimage": "/promo/autumn/collection.jpg"
                    }
                }
            ]
        }
    ]
}