Kentico Cloud client side solution

Kentico Cloud is platform agnostic content management cloud solution. That means that you could consume it from any platform: mobile native applications, web site, Windows application using any programming language you like.

In one of my previous posts I suggested server side approach for fetching data from Kentico Cloud. In this post, I’m going to focus on retrieving of a content with JavaScript and some JS frameworks.

Kentico Cloud API

Kentico Cloud exposes REST API, that provides an interface to get content. It allows getting list of content items or a single item, list of content types or a single content type structure. Basically, we need to send a GET request and specify data/content we want to receive via query parameters in the request URL. We could specify content type of items we are requesting, columns (elements), order of items, how many items to skip and/or take, etc. Kentico Cloud API allows only reading data. All the details are available in the documentation.

So, we are going to implement client side (JavaScript) functionality that will grab some content stored in Kentico Cloud. Before we begin here is what we need in order to rich our goal:

• Kentico Cloud account – there is a free version, that limits the amount of API call, but it is more than enough in our case
• Create some project in Kentico Cloud
• Create at least one content type
• Create a couple of content items
• Get project ID at Kentico Cloud – we need to include it into request URL
• Text editor
• Browser 😊

For this particular sample, we don’t need any server side logic, so we are good to create simple HTML page with some markup and JavaScript functionality that will do the magic.
 

JS Code

function loadContent() {

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {

            var data = this.response;

            for (var i=0; i<data.items.length;i++){

                document.getElementById("demo").innerHTML += "Name: " + data.items[i].elements.name.value + "<br/>";

                document.getElementById("demo").innerHTML += "Descr: " + data.items[i].elements.description.value + "<br/>";

            }

        }

      };

      xhttp.responseType = 'json';

      xhttp.open("GET", "https://deliver.kenticocloud.com/6dea43b2-30ae-4f99-8da8-c29d0caa3870/items?element.sampletype", true);

      xhttp.send();

    }

$.ajax({

      url: "https://deliver.kenticocloud.com/projectId/items?element.sampletype",

      method: 'GET',



      success: function(response) {

        var markup = "";

        $.each(response.items, function(i, el) {

          markup += "Name: " + el.elements.name.value + '<br/>';

          markup += "Descr: " + el.elements.description.value + '<br/>';

        });

        $("#demo").html(markup);

      }

    })

$scope.dataSvc = $resource('https://deliver.kenticocloud.com/projectId/items?:contenttype&elements=:elements&order=:order&depth=:depth&skip=:skip&limit=:limit', {

    depth: 0,

    skip: 0,

    limit: 100000

  });

See the entire implementation here.

Looks simple, right? Someone might say that there are no doubts that we could consume Kentico Cloud API with JavaScript or JS frameworks. Yes, but let’s take a closer look into the Angular JS implementation: it creates a single resource factory that allows getting any content by specifying appropriate parameter like this:
 

$scope.dataSvc = $resource('https://deliver.kenticocloud.com/projectId/items?:contenttype&elements=:elements&order=:order&depth=:depth&skip=:skip&limit=:limit', {
    depth: 0,
    skip: 0,
    limit: 100000
  });

$scope.loadData = function(params) {

    $scope.dataSvc.get(params

    , function(response) {

      $scope.data = response.items;

    });

  }

  

  $scope.loadAll = function(){

    $scope.loadData({contenttype: 'element.sampletype'});

  }

  

  $scope.loadFirst = function(){

    $scope.loadData({contenttype: 'element.sampletype', limit: 1});

  }

  

  $scope.loadSecond = function(){

    $scope.loadData({contenttype: 'element.sampletype', skip: 1, limit: 1});

  }

  

  $scope.loadName = function(){

    $scope.loadData({contenttype: 'element.sampletype', elements: 'name'});

  }