Zoho Creator - Client API

Tags:  

Zoho Creator - Client Side API


Overview

Zoho Creator supports client APIs to customize the look of your HTML forms, to suite your website. Though Zoho Creator provides a quick way of embedding forms through iframe snippet, it does not enable users to place the input fields and labels in the desired location.The client side APIs are JavaScript APIs that enable field level embedding to integrate form input fields and labels tightly in the source code of your website.

Benefits
  •   Look and feel of the forms can be customized to suite your website.
  •   Each input field in the form can be individually positioned, providing a perfect fit and finish to your web page.

Steps to integrate your form in external websites through API script


1. Add the following script tags in the head section of your HTML document. 


<script src="http://creator.zoho.com/appcreator/js/jsonform.js" type="text/javascript"></script>
<script src="http://creator.zoho.com/<applicationOwnerName>/form/json/<formLinkid>/" type="text/javascript"></script>


2. To create a form input field, add the following script tag. This will generate the form input required to enter the value for the specified field.  
You need to give Deluge field name as the parameter to the Zoho.writeInput() javascript function. To get the deluge field name, refer http://creator.zoho.com/api/reference.

<script type="text/javascript">Zoho.writeInput("<Deluge Script name of the field>");</script>


3. To attach a label to the above input,  add the following script tag. The Zoho.writeLabel generates the label for the specified column.  You need to give Deluge field name 
as the parameter to the Zoho.writeLabel() javascript function. To get the deluge field name, refer http://creator.zoho.com/api/reference 

<script type="text/javascript">Zoho.writeLabel("<Deluge Script name of the column>");</script>



4.  Add "Submit" and "Reset" buttons using the format given below using . Parameter to Zoho.writeSubmit () and Zoho.writeReset () is optional. If you want to have the button name other than "Submit" and "Reset", you can pass them in the parameter.


<script type="text/javascript">Zoho.writeSubmit("<specify submit button label name>");</script>
<script type="text/javascript">Zoho.writeReset("<specify reset button label name>");</script>


Sample HTML Form Builder for the Employee Form

For example, let us take a simple "Employee application" with application owner name as "zoho". It consists of "Employee Form" whose
formlink id is "175", with the following fields.
Name — Text
Email_Id — Email 
Address — Multi-line text
Contact — Number
Qualification — Drop-down
Department— Import from "Department form"
The code to build this form using the Zoho Creator client API is given below:

<script src="http://creator.zoho.com/appcreator/js/jsonform.js" type="text/javascript"></script>
<script src="http://creator.zoho.com/zoho/form/json/175/" type="text/javascript"></script>
<form user="zoho" linkid="175" nexturl="http://creator.zoho.com" onsubmit='Zoho.submit(this); return false;'>
	<table>
		<tr>
			<td><script type="text/javascript">Zoho.writeLabel("<Name>");</script></td>
			<td><script type="text/javascript">Zoho.writeInput("<Name>");</script></td>
		</tr>
		<tr>
			<td><script type="text/javascript">Zoho.writeLabel("Email_Id");</script></td>
			<td><script type="text/javascript">Zoho.writeInput("Email_Id");</script></td>
		</tr>
		<tr>
			<td><script type="text/javascript">Zoho.writeLabel("Address");</script></td>
			<td><script type="text/javascript">Zoho.writeInput("Address");</script></td>
		</tr>
		<tr>
			<td><script type="text/javascript">Zoho.writeLabel("Contact");</script></td>
			<td><script type="text/javascript">Zoho.writeInput("Contact");</script></td>
		</tr>
	<tr>
			<td><script type="text/javascript">Zoho.writeLabel("Qualification");</script></td>
			<td><script type="text/javascript">Zoho.writeInput("Qualification");</script></td>
		</tr>
		<tr>
			<td><script type="text/javascript">Zoho.writeLabel("Department");</script></td>
			<td><script type="text/javascript">Zoho.writeInput("Department");</script></td>
		</tr>
	</table>
<br>
	<script type="text/javascript">Zoho.writeSubmit("Button Label Name");</script>
	<script type="text/javascript">Zoho.writeReset("Button Label Name");</script>
</form>


Note:

 1. For image field type, input fields for image source, alt tag, link and title will be automatically generated. If you want to have control over each of the fields, you have to specify the following variables as 2nd parameter to the function.

Zoho.imgSrc
Zoho.imgAlt 
Zoho.imgLink
Zoho.imgTitle

Sample code snippet is given below:

<script type="text/javascript">Zoho.writeLabel("Image_1");</script>
<script type="text/javascript">Zoho.writeInput("Image_1");</script>

<script type="text/javascript">Zoho.writeLabel("Image_1",Zoho.imgSrc);</script>
<script type="text/javascript">Zoho.writeInput("Image_1",Zoho.imgSrc);</script>

<script type="text/javascript">Zoho.writeLabel("Image_1",Zoho.imgAlt);</script>
<script type="text/javascript">Zoho.writeInput("Image_1",Zoho.imgAlt);</script>

<script type="text/javascript">Zoho.writeLabel("Image_1",Zoho.imgLink);</script>
<script type="text/javascript">Zoho.writeInput("Image_1",Zoho.imgLink);</script>

<script type="text/javascript">Zoho.writeLabel("Image_1",Zoho.imgTitle);</script>
<script type="text/javascript">Zoho.writeInput("Image_1",Zoho.imgTitle);</script>


2. For url field type, input fields for image source, alt tag, link and title will be automatically be generated.   If you want to have control over each of the fields, you have to 
specify the following variables as 2nd parameter to the function

Zoho.urlUrl   
Zoho.urlLink  
Zoho.urlTitle 

Sample code snippet is given below : 

<script type="text/javascript">Zoho.writeLabel("Url_1");</script>
<script type="text/javascript">Zoho.writeInput("Url_1");</script>

<script type="text/javascript">Zoho.writeLabel("Url_1",Zoho.urlUrl);</script>
<script type="text/javascript">Zoho.writeInput("Url_1",Zoho.urlUrl);</script>

<script type="text/javascript">Zoho.writeLabel("Url_1",Zoho.urlLink);</script>
<script type="text/javascript">Zoho.writeInput("Url_1",Zoho.urlLink);</script>

<script type="text/javascript">Zoho.writeLabel("Url_1",Zoho.urlTitle);</script>
<script type="text/javascript">Zoho.writeInput("Url_1",Zoho.urlTitle);</script>



Form Meta Data for Third Party Integration

Zoho Creator's form metadata can be exported in JSON format so that it can be used by any third parties. Form metadata in JSON format can be obtained using the following link:

a. To get the raw data without any JavaScript variable, add the parameter raw=true as given below:

http://creator.zoho.com/<application_owner_name>/form/json/<formLinkid>/raw=true


b. For call back functionality in javascript, you need to add an extra parameter callback=UserFunctionName, where UserFunctionName is the name of the function that will be called.

http://creator.zoho.com/<application_owner_name>/form/json/<formLinkid>/callback=UserFunctionName


Limitations

1. Browser should support Java Script


          2. Form Actions On Add -> On Success and On Add -> Validation is not supported.  



 RSS of this page

Written by:   Written by:   Version:   Last Edited By:   Modified