Creator API

Zoho Creator - Client Side API (This Topic is Deprecated)

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="https://creator.zoho.com/appcreator/js/jsonform.js" type="text/javascript"></script>

<script src="https://creator.zoho.com/<app Owner Name>
/form/json/<form Linkid><encryptedLink>" type="text/javascript"></script>

where,
is the name of the application owner.

is the form number that is displayed in the url when the form is accessed in edit mode.
For example, https://creator.zoho.com/zchelp/form/839/edit/

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="https://creator.zoho.com/appcreator/js/jsonform.js" type="text/javascript"></script>
<script src="https://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:

  • 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/
  • The nexturl parameter redirects the page to the mentioned url, on successful submission of the form.
  • 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:

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>

a. To get the raw data without any JavaScript variable, add the parameter raw=true as given below:
https://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.
https://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.

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:

<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>

Top