Land of Zoho Creator

Hi everyone…my name is Doug Lockwood (AKA Lockworld), and I’ve been invited to join the Land of ZC blog. I’m excited to be here! I first started using Zoho Creator over a year ago, and was amazed at what I could do. However, I could never think of anything to do with it until a few months ago when I decided to start using it to build an online catalog of products/services for my Web site. Since then, I’ve been busy pushing the limits of Zoho Creator, and I’m very impressed! I’m also quite impressed with the Land of ZC…Pete has done an outstanding job of delving deep into the heart of Zoho Creator, and I’ve used the tips and tricks he’s provided to help get me through some of the rough spots. Naturally, when he invited me to share some of my ideas on this blog, I couldn’t resist. I am excited about this opportunity, and I hope you find my contributions useful.

If you’ve used Zoho Creator, you’re probably already familiar with exporting your forms and views as iframes or JavaScript codes to embed on your own Web site. In addition, you can find links to PDF, RSS, HTML, XLS, CSV, and other views of the data you have collected. These are very nice features, but there was one exportable feature that I had a little trouble figuring out…JSON feeds. If you click on the link to a JSON feed, you might see a bunch of garbled HTML. For example, I created a sample online catalog application to showcase my e-commerce solution a while back. I wanted to see what the JSON feed was all about, but when I clicked on the link, I saw quite a mess in my browser, as you can see in this link.

Little did I know how useful JSON would prove to be!

I did a Google search for JSON, and was able to find out a little more about it. Essentially, JSON is a very simplified JavaScript code that can turn your entire Zoho Creator view into a single variable using a form of nested arrays.

Parsing the codes out was a little bit tricky at first, but once I got the hang of it, it became fairly easy. You can add a simple tag to your Web page to load the JSON/JavaScript variable by using a script tag:


<script
src="http://creator.zoho.com/{USERNAME}/json/{VIEWNUMBER}/" mce_src="http://creator.zoho.com/{USERNAME}/json/{VIEWNUMBER}/"
></script>


Then in a separate script tag you can begin to parse out the values. Let’s try a simple example using the JSON feed described above…

Here’s a basic script that will display all of the product information available on this sample catalog directly in your Web site:


<script src="http://creator.zoho.com/lockworld/json/6/" mce_src="http://creator.zoho.com/lockworld/json/6/"></script>
<script>
for (var j=0; j<zoholockworldview6.catalog_example.length; j++){
var NewArray=zoholockworldview6.catalog_example[j];
var ItemName = NewArray.Item_name;
var ItemPrice = NewArray.Item_price;
var PayPal = NewArray.PayPal;
var Description = NewArray.Description;
var DetailLink = NewArray.DetailLink;
document.writeln("<p><b><i>" + ItemName + "</i></b>");
document.writeln(" $" + ItemPrice);
document.writeln("<br>");
document.writeln(PayPal);
document.writeln("<br>");
document.writeln(Description);
document.writeln("<br>");
document.writeln(DetailLink);
document.writeln("</p><hr>");
}
</script>


Please keep in mind that Zoho Creator sometimes changes your field names to avoid using spaces or unsupported characters, so look through your code to be sure that you have all of the correct field names or you’ll end up with nothing on your page.

Why use JSON instead of the default JavaScript Zoho Creator provides?

As a general rule, the JavaScript codes provided by Zoho Creator (look for the “Embed in your website” link under “More Actions” in any of your forms or views) are adequate for most users. However, there may be times when you need to customize the way the information is displayed in a way that Zoho Creator cannot support by default (by specifying font colors/attributes for specific fields, etc.).

Privacy

One benefit to JSON scripts is that you can use them on your Web page to display information from an otherwise private Zoho Creator view (if you enable private hyperlinks). So, if you don’t want people to be able to access the information in your application from the Zoho Creator site, you can keep the view private and use a private hyperlink to display the information on your own site exclusively.

Filtering

Furthermore, you can use this powerful scripting tool to filter out certain elements to further customize your page. You might want to pass some attributes to your Web site through the URL that can be compared to fields within the JSON feed to determine whether or not to display the information. I could very easily add a condition to the script above to only display items with a price below, say, $5.00. So it would be very easy to add another page to my online catalog that would only display the cheapest items for those who did not want to fish through all of my products.

Variable data

Another use for JSON feeds is to display variable data on a single Web page. For an example, see my online catalog ? I realize that I only have one product currently for sale, but you should get the idea about how this can work. Each of my products contains a “details” link (automatically created when I enter a new product into my Zoho Creator application) that takes you to the same ProductDetails.aspx page and passes a specific product code via the URL. The scripts on my page look at this value and determine which product information from the JSON script to display. So I only have to create one Web page to display any and all of my product details, regardless of how many (or few!) I have.

Combining Applications

If you want to get even more advanced, you can combine information from multiple Zoho Creator applications by accessing more than one JSON feed on a single page…this might be a way to provide a level of security to your page by requiring that a person enter a unique ID or confirmation code from one Zoho Creator application on your page before displaying information from a different application…so you can have your “authorized users” application and all of your other applications available separately, but working together on your page. You should warn your users that this information can be hacked quite easily, so they shouldn’t provide a real username/password combination, or provide any other information they want to protect, but for a general level of usability, this provides some strong functionality.

Conclusion

Using Zoho Creator and JSON scripts, I have not only been able to create an online catalog with full PayPal support, but I have also created a content management system that allows me to add, remove, or edit records directly in Zoho Creator and have the updates automatically applied directly on my Web site. I will talk more about using Zoho Creator’s JSON feeds to create a content management system for your entire Web site in upcoming posts on The Web for You.

Now that’s powerful stuff, especially from a free Web tool!