Loading

Kentico Cloud: client side solution

Last year’s we can see a huge shift towards client side solution in the world of web. Development of JavaScript frameworks like Angular JS, React JS allows us to build rich and interactive UI, moving more and more business rules to a client. This change introduces new requirements to a server and highlights a need in lightweight and stateless solutions. One of such solutions is Kentico Cloud – new warehouse for your content. 

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

Let’s take a look at pure JavaScript function that retrieves content:
 

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();

    }


See the entire implementation here.

Here is jQuery AJAX call that fetches content:
 

$.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);

      }

    })


See the entire implementation here.

 And the last one is Angular JS code that does, in fact, what two previous do:
 

$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'});

  }


As you can see I'm calling $scope.LoadData method with different parameters each time to get different results. 

This is the beauty of Kentico Cloud and the main point of this post: it is possible to implement a centralized access point to all the data stored in Kentico Cloud. Genius is simplicity!