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 scr="http://creator.zoho.com/appcreator/js/jsonform.js" type="text/javascript"></script>
<script scr="http://creator.zoho.com/<app Owner Name>/form/json/<form Linkid>/<encryptedLink>" type="text/javascript"></script>
where,
<app Owner Name> is the name of the application owner.
<form Linkid> is the form number that is displayed in the url when the form is
accessed in edit mode.
For example, http://creator.zoho.com/zchelp/form/839/edit/
<encryptedLink> is an optional parameter used to access the form without zoho login. To get the encrypted link, click on More Actions -> Permalink option from the Form's live mode and select the "click here" link in the text "To access the form
without login". You will now find the encrypted code added to the permalink.
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="<app owner name>" linkid="<form linkid>" nexturl="<redirecturl_on_submit>" 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. The linkid parameter is the form number that is displayed in the url when the form is accessed in edit mode. For example, http://creator.zoho.com/zchelp/form/839/edit/
2. The nexturl parameter redirects the page to the mentioned url, on successful submission of the form.
3.
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>
3. 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. Only the form actions On Add -> On Success and On Add -> Validate are supported.
