Quick TBB – Serialize Component as JSON

JSON LogoWhile doing some preparation for a hackathon on client-side templating (ie javascript in the browser) on our upcoming SDL Tridion MVP retreat, I created a simple component JSON serializer TBB. This basically takes the TOM.NET Component object and converts it into a JSON format which is friendly for Javascript templating frameworks like Knockout.

This is just a proof-of-concept, so it doesn’t cover everything – and the focus is on keeping the JSON structure as shallow and simple as possible. The output should be something like the following:

{ "id":1693,
  "title":"Lets create templates with Javascript",
  "summary":"By publishing content as JSON, retrieving it using webservices and using a framework like Knockout, we can do templating client-side.",
    "metadata":{"alt":"JSON Logo"}
      "keywords":"this, page, is, cool",

The full source code of the TBB is shown below, a few things worth noting are:

  • For easy access, there is no fields, or content container element for content fields – they are added directly to the root element, metadata fields are added to a sub element; metadata
  • For component link fields, which link to MM component, we publish the binary and add published url and metadata to the output(see the image field example above). For non MM component link fields, just the component uri is output
  • For keyword fields, we add the keyword id, key, title and description.
  • For date fields, we convert to JSON friendly ISO 8601 format (this will save some pain)
  • For embedded schema fields, we build the substructure you would expect (see the standard metadata field above)
  • Rich Text fields are skipped – these tend to be very heavy and serialize messily, and I want to keep my JSON lightweight – I don’t intend to use RTF in my JS templates anyway – we will use traditional templating methods for that.
This entry was posted in Development and templating and tagged , by Will Price. Bookmark the permalink.

About Will Price

Will is a seasoned web application consultant having worked on web projects for clients all over the world for the last 14 years. He has a deep technical and functional understanding of SDL Tridion solutions from his 6+ years working at SDL as a Principal Consultant in Amsterdam. Since 2012 he has been working freelance and continues to be involved in SDL Tridion projects.

One thought on “Quick TBB – Serialize Component as JSON

  1. Pingback: Client-side Templating with JSON, oData and Angular | SDL Tridion Developer

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>