Example visualization using the original Content Delivery API

On this page we explain how a typical visualization web app is structured using the example of a visualization for the tutorial banner example. This example uses the original (legacy) Content Delivery API. Note that the original Content Delivery API returns data in JSON-LD format which you will need to convert to inlined format, so there are a few more steps in this example.

For more information about setting up and using visualizations see the developing visualizations page.

Note that to simplify this example you could use the Content Delivery SDK which will return the JSON content in inlined format without the need for any conversion. The Content Delivery SDK can be used with both Content Delivery 2 and the original Content Delivery API.

Retrieving the content

The virtual staging domain and the content ID is used to construct a URL to send to the Delivery API to retrieve the content to be visualized.

Here's an example of some code to construct the URL:


  const encodedQuery = encodeURIComponent(JSON.stringify({'sys.iri':`http://content.cms.amplience.com/${getQueryVar('content')}`}));
  const contentDeliveryUrl = `//${getQueryVar('api')}/cms/content/query?store=store&query=${encodedQuery}`;

The URL contains the standard Delivery API endpoint and the store from which to retrieve the content. The encodeURIComponent method is a standard utility method that is included with the full visualization example.

An example of a complete query URL used to retrieve some content is shown below:

//1vkz2i2i1hlau19hndnr03duvb.staging.bigcontent.io/cms/content/query?fullBodyObject=true&query=
%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com
%2F862e0be0-d085-4ca0-b789-67fe1c65688f%22%7D&scope=tree&store=store

and in decoded form:

//1vkz2i2i1hlau19hndnr03duvb.staging.bigcontent.io/cms/content/query?fullBodyObject=true&query= {"sys.iri":"http://content.cms.amplience.com /862e0be0-d085-4ca0-b789-67fe1c65688f"}&scope=tree&store=store

This requests content using the VSE domain 1vkz2i2i1hlau19hndnr03duvb.staging.bigcontent.io with the ID 862e0be0-d085-4ca0-b789-67fe1c65688f

This query is then sent in a GET request to the Content Delivery API. Here's the code used in the tutorial banner example:

  var deliveryRequest = $.ajax({url: contentDeliveryUrl});
  // render the content or display error response
  deliveryRequest
    .done(renderContent)
    .fail(showErrorMessage);

Rendering the content

The content is returned from the Content Delivery API in JSON-LD format. In order to render the content in the visualization window you need to do the following:

  • Convert the JSON-LD content into a content tree using the "inline" method of the CMS SDK
  • Combine the JSON with a handlebars template to generate the HTML to render the content. You can use whichever templating technology you chooose, but we use handlebars in the examples
  • Combine the HTML with CSS to display the content in the visualization window

Example code to perform these steps from the tutorial banner visualization is shown below.


function renderContent(data) {
  // use the Amplience CMS JavaScript SDK to manipulate the JSON-LD into a content tree
  const contentTree = amp.inlineContent(data)[0];
  // fetch the Handlebars template from the DOM
  const templateSource = $('#tutorial-template').html();
  const template = Handlebars.compile(templateSource);
  // render the content using the template
  const html = template(contentTree);

  $('#contentRender').html(html);
}

The handlebars used in the tutorial banner is shown below:

    <script id="tutorial-template" type="text/x-handlebars-template">
       <div class="banner">
        <div class="banner-editorial">
          <div class="banner-header">{{headline}}</div>
          <div class="banner-subheader">{{strapline}}</div>      
        </div>
              <img class="banner-background-image" src="https://{{background.defaultHost}}/i/{{background.endpoint}}/{{background.name}}">    
            <a class="banner-call-to-action" href="{{calltoactionurl}}">{{calltoactiontext}}</a>
      </div>      
      </script>
    <script>

Complete example

You can download the complete tutorial banner visualization, including the code shown on this page and the utility methods that you can use in your own code.

Using the visualization

The example below shows the tutorial banner content being previewed in the content editing window. See the Using visualizations page for more details on how users make use of visualizations to preview a content item.

The tutorial banner visualization
The tutorial banner visualization

Original Content Delivery API

Content Delivery 2

Blog Post: Preview native apps with Dynamic Content & Appetize.io

results matching ""

    No results matching ""