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:

The resulting JSON includes content structured as follows:

{
    "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);
        "image" : productImage.getAbsURL();
    };
}

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"
                    }
                }
            ]
        }
    ]
}
X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used. By continuing to use this site you are giving us your consent to do this. Privacy Policy.