Google Docs and DDLs in Liferay

Tables tables tables. Tables are used all over the web. Some people hate them, some people love them. No matter your opinion on tables, there are many cases where html tables are effective and efficent ways to display content and convey information. Many times it is helpful to use them to show things such as form submissions or with dynamic information. I recently worked on a site for the company retreat and we had a number of tables displaying sign up information or details that people needed to know that pertained to themeselves. We implemented two different strategies for displaying this content in Liferay, I thought it might be helpful to share what we did with those of you out there who are building websites with Liferay.

The first strategy, which isn't limited to Liferay alone, is pulling from google docs. Often times planning, organization of details, and information is stored in google's friendly and free docs interface. Google provides great APIs for how to pull from their apps, but I will do a basic walk through of the process.

  • First, create and share your document with the public at docs.google.com
  • Go to File > Publish to web...
  • In the pop up click "Start Publishing"
  • Copy the "key" which is in the url or in the "Get a link to publish data" section of the pop up.

Now that the google doc is all set, the next step is to create the url which will give us a jsonp with our content. Looking at the google spreadsheet pulling APIs we see how to create the url which will give us the jsonp we will use. The url will look like this:

https://spreadsheets.google.com/feeds/list/YOUR_DOC_KEY/YOUR_SHEET_NUMBER/public/values?alt=json-in-script&callback=importGSS

Essentially all you need to do is is place your key in the YOUR_DOC_KEY place and the sheet number in the YOUR_SHEET_NUMBER place. Give it try. Just paste that url into your browser and you will see the jsonp content.

Last step is to pull that information to your site. Basically all you need to do is create a Web Content Template that contains this code (remember to replace the url variable with the url we created in the previous step).

<div id="lodgingSearchBox">
	<table id="lodgingList">
		<tbody></tbody>
	</table>
</div>
<script>
	AUI().ready(
		'jsonp',
		'jsonp-url',
		function(A) {
			var url = "https://spreadsheets.google.com/feeds/list/0AiezzBRgPCVPdGZnTThvSEJsUFFZUVBHUW5QZnNHN3c/1/public/values?alt=json-in-script&callback=importGSS";

			function handleJSONP(response) {
				for (var i = 0; i < response.feed.entry.length; i++) {
					A.one("#lodgingList").one('tbody').append(
						'<tr class="table-info"><td>' + response.feed.entry[i].gsx$name.$t + '</td><td>' + response.feed.entry[i].gsx$department.$t + '</td><td>' + response.feed.entry[i].gsx$numberoffamilymembers.$t + '</td></tr>'
					);
				}

			}

			A.jsonp(url, handleJSONP);
		}
	);
</script>

Our table ended up looking like this:

All it does is provides a list of people who signed up already, which is dynamically updated through a google doc. We added the aui-live search module to help people search for there name at the top, but it ended up being a clean, easy solution to let people know if they were signed up for the retreat.

This method of pulling data can be very useful because often times you are already using google docs/forms, or they can just be easier to maintain and collaborate with. However, being dependant on 3rd party API's always has its risks and drawbacks. Loading google docs will have a lag time and can be easily broken if heading titles get changed or there are gmail login conflicts. Liferay has a less known solution that offers a large amount of versatility and similar benefits of google docs being used in this way. This solution is Dynamic Data Lists, aka DDLs.

There are a number of good blog posts and other documentation on DDLs which already exist, so I am not going to explain how to use them here. However, there are some great features I think deserve highlighting. DDL's are super useful because they are similar to the article/template/structure system which most are familiar with, yet they provide a centeralized place to add and edit entries. All you have to do is add the "Dynamic Data List Display" and create a new "Data Definition" (comparable to structure in Web Content) and a "Data List".

These features are all available out-of-box, and are very useful for recording and display data. There is a spreadsheet view (found in the portlet configuration) which is extremely useful in that you can click and edit you entries right there on the screen, just like google docs. You can also use velocity to create "List Template" just like Web Content templates and now you can display your content exactly like you want to.

One of the things we used DDLs for on the Liferay retreat site was to sign up for childcare.

The DDL Display portlet gives you the sign up button, so it is easy for employees to simply click sign up and add their name to the list.

These are just a few of the features that make DDLs a useful tool in Liferay. You can even deploy the Dynamic Data List Form portlet and use it to create and record surveys. On the Web Team we have plans to use DDLs much more in the future, and I think they are great features which are worth all of you spending some time to get familiar with them.

Blogues
Hi Ryan,

When I goto docs.google.com I was redirected to my drives.google.com my-drive page.Is this the same page you are pulling data from, because I couldn't find "File > Publish to web..." anywhere on this page? Could you post a screenshot where "File > Publish to web..." is?

Thanks!
Gwowen
The problem I have is that I disabled the Administrator account, and is the only user that I have in the database. My question is as habilito from the database?

Please anyone who can help me?, I appreciate much
thanks

regards,
Hello,

I trying this but I get this message

"invalid query parameter value for grid id"

Any idea?

Thanks
Hi Angel,
I think that error has something to do with naming or the sheet number of your spreadsheet. What does your url look like?
Hi,

I solved this error putting the right sheeet number but copying your code (changing the url variable) I can't see my spreedsheet. I see nothing.