Dynamic Widget Using Ajax and JSON

Many web services and applications offer powerful APIs for web developers to take advantage of, when it comes to performing integrations between websites and 3rd party web services.

The following example will illustrate how to build a simple widget that can communicate with Rotten Tomatoes APIs and dynamically pull in information based on a keyword. This example does not require authentication into the web service. It will work only with a custom key provided by Rotten Tomatoes API.

Before starting this tutorial, please visit http://developer.rottentomatoes.com/ and register to access your API key and documentation regarding how to use the API.

Once you obtain your key, you will be ready to begin creating your custom widget within Percussion’s Widget Builder

Step 1:

Access Widget Builder. 

Step 2:

Click on the “Click to Create New Widget” icon to begin creating your new widget.

Step 3:

Populate the necessary fields to begin building your widget.

Step 4:

Under the “Content” Tab, determine and declare the variables that are expected to be collected from the user of this widget.

In this example, I will be using two fields; one for the API key, the other for the keyword I would like to generate the movie list based off of. 

Once all necessary fields are created, please note the names of these fields as we will be using them later on in the “Display” tab. 

Step 5:

Attach necessary Javascript and CSS files that your widget requires.

In this example, we are not going to need any Javascript or CSS files attached to the widget so we will leave these fields blank. 

Step 6:

“Display” tab is where the widget output is declared. I am going to be referring to Rotten Tomatoes’ documentation to determine how the widget output is displayed.

The following example that I extracted from Rotten Tomatoes’ documentation will generate a list of movies based on the keyword entered. It uses AJAX to pass the keyword into the API and return JSON objects then parse them to display the results. So go ahead and copy/paste the following in your “Display” tab.

<script>

var apikey = "YOUR API KEY VARIABLE WILL GO HERE";

var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;

var query = "YOUR KEYWORD VARIABLE WILL GO HERE";

jQuery(document).ready(function() {

jQuery.ajax({

 url: moviesSearchUrl + '&q=' + encodeURI(query),

 dataType: "jsonp",

 success: searchCallback

});

});

function searchCallback(data) {

jQuery(".here").append('Found ' + data.total + ' results for ' + query);

var movies = data.movies;

jQuery.each(movies, function(index, movie) {

jQuery(".here").append('<h1>' + movie.title + '</h1>');

jQuery(".here").append('
});
}
</script>
<div class ="here"> </div>

Step 7:

Replace YOUR API KEY VARIABLE WILL GO HERE with your field name for the API KEY, starting with a “$”. In my example, I am going to replace that with $APIkey. 

var apikey = "$APIkey";

And replace KEYWORD VARIABLE WILL GO HEREwith your field name for the keyword, starting with a “$”. In my example, I am going to replace that with $keyword.

var query = "$keyword";

So your final code should look like this:

<script>

var apikey = "$APIkey";

var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;

var query = "$keyword";

jQuery(document).ready(function() {

jQuery.ajax({

 url: moviesSearchUrl + '&q=' + encodeURI(query),

 dataType: "jsonp",

 success: searchCallback

});

});

function searchCallback(data) {

jQuery(".here").append('Found ' + data.total + ' results for ' + query);

var movies = data.movies;

jQuery.each(movies, function(index, movie) {

jQuery(".here").append('<h1>' + movie.title + '</h1>');

jQuery(".here").append('
});
}
</script>
<div class ="here"> </div>

Step 8:

Save your changes then remember to deploy your widget.

Step 9:

Once deployed, your widget will appear within your widget tray and will be ready to use on your pages.

Step 10:

Drag and drop your new widget into an available region and Save your changes.

In the “Content” tab, you will be able to edit this widget and populate your fields/variables.  

Step 11:

Once saved, you should see your widget generating a dynamic list of movies that has the word “Office” in it directly from Rotten Tomatoes, using Rotten Tomatoes’ simple API.