Part 1 - How to display Drupal 7 nodes on a html page using jquery

While working with Drupal 7 (internet) and SharePoint 2010 (intranet), I had a chance to bring Drupal 7 content into SharePoint publishing page. It was a fun project so I have decided to share my experience with anyone who wish to pursue the same venture. Basically, I have to bring news and announcements in list format within a "news/events" div (web page block) along with title, teaser and path to the article.

What I used in order to accomplish this task was a contribute module (in Drupal 7) called Services (3.x) along with REST server. In SharePoint (or any CMS/web servers), I have decided to use jQuery .ajax function. Since I had previously posted a blog regarding how to set up the Drupal 7 REST web server, I won't dive into this topic. For details, please refer to Part 1 - Set up Drupal 7 REST web server and create a .NET client to perform CRUD operations. Just make sure to check jsonp (JSON with padding) option if the page that consumes data is hosted in a different domain. If both servers are in the same domain, you don't need to enable jsonp.

First, I will start working with client side module to render the content. Being a back-end developer (more than 7 years), this is an unusual approach from my end, but I guess what matters the most in this example is how the information is presented in a publishing page. The block module that renders "news/event" list receives an array of items in json format:

[
{ "nid": "100", "created": "1376610108", "changed":  "1376610108", "title":"Article Title", "author": "John Doe", "teaser":"In order to create the durpal and sharepoint integration module, ...", "tid":"10", "path":"http://myserver.mydomain.com/news/how-to-integrate-druapl7-with-sharepoint"},
{ "nid": "101",  .... }
]

 and what I need to accomplish is something like this:

Let's get started with jQuery.

1. Create a div with id "happenings".

2. Add a script reference to jquery.js file.

3. Create a html template for happenings section.

4. Add the following javascript block. It retrieves data in jsonp format,  replaces {{path}}, {{title}} and {{body}} tags (defined in a template in step 3.) with appropriate data (repeated until the end of data array), and finally appends the replaced markups to a string that contains the enclosing markup (div with id "happenings").

In fact, I am done with the page that consumes JSON web service. The nicest thing about this approach is that I do not need to write server-side scripts to dynamically generate markups based on data retrieved from JSON web service. Everything is done in client-side using javascript (jQuery library). I think this approach can be used regardless of hosting platforms used (platform independent).

Now we need to create a custom resource (Drupal 7 module) to generate JSON data as described in this post. Unfortunately, I could not able to generate data without creating custom resource for services module. But it gave me an opportunity to investigate the custom module development as well as to learn the dynamic query in Drupal 7

I hope you had a great time reading this post, and I will continue the second part shortly.