JS API documentation

Download the latest JS SDK library from the CDN URL given below and link it using the script tag.

• CDN URL - https://js.zohostatic.com/creator/widgets/version/1.0/widgetsdk-min.js

Initialize the SDK using the below method and use then block to write the logic:

ZOHO.CREATOR.init()
                .then(function() {
                  //Code goes here
               });

To get the value from the parameters configured in pages, use the below method:

var queryParams = ZOHO.CREATOR.UTIL.getQueryParams();

The values of the image field will be an API endpoint in case the image is uploaded from computer or phone, use the below method to convert the endpoint to image data and assign the value to the source of the image tag. In another case, the image can be a public image link, and this method works for both cases.

var imageTag = document.getElementById("imgtag");
        var imageURL =
        "/api/v2/zylker/Contacts/view/All_Contacts/66359000000015039/Upload/download";
        ZOHO.CREATOR.UTIL.setImageData(imageTag, imageURL, callbackFunction);

Widget API allows customers to push and pull data from other apps in their Creator account. The success of the API call to push or pull data in other apps depends on the permissions provided for users of that app.

Record APIs

These APIs help you perform different tasks with the records of the application. The various Record APIs are as follows:

• Add Record
• Update Record
• Get All Records
• Get Specific Record Using ID
• Get Record Count
• Delete Record
• Upload File
• Read File
• Download image API

Add Record

Method : addRecord

Syntax :

   //configuration json
           config = {     
           appName : "${APPNAME}",
           formName : "${FORMNAME}",
                   data : "${FORMDATA}"
           } 
            //add record API
            ZOHO.CREATOR.API.addRecord(config).then(function(response){
                //callback block
           });

Example : 

    var config = { 
                   appName : "zylker"
                   formName : "timesheet", 
            ​       data : formData 
            } 
            ZOHO.CREATOR.API.addRecord(config).then(function(response){ 
                if(response.code == 3000){
                 console.log("Record added successfully");
                }
            });

Form data :

formData = {
                "data" : {
                    "Name": {
                        "first_name": "James",
                        "last_name": "Kyle",
                    },
                    "Address": {
                        "address_line_1": "Dari Mart",
                        "address_line_2": "Hayden Bridge Rd",
                        "district_city" : "Springfield",
                        "state_province" : "Oregon",
                        "postal_code" : "97477",
                        "country" : "United States"
                    },
                    "Rich_Text" : "The phone number is <b>+1541-726-4051</b>",
                    "Phone_Number": "+15417264051",
                    "Single_Line": "A simple one line text",
                    "Email": "james@zylker.com",
                    "Dropdown" : "Open",
                    "Radio" : "Closed",
                    "Multi_Select" : ["New", "Used"],
                    "Checkbox" : ["Refurbished", "Used"],
                    "Number": "1000",
                    "Decimal" : "1000.00",
                    "Percent": "60.00",
                    "Date_field" : "10-Jan-2020",
                    "Date_Time" : "23-Mar-2020 12:25:43 PM",
                    "Image" : "/sites/zweb/images/creator/profile-01.jpg",
                    "Ur1": {
                        "value": "Dari Mart",
                        "url": "www.darimart.com",
                        "title": "Dari mart provisional store"
                    },
                    "Lookup_Single_Select" : "521270000078464",
                    "Lookup_Multi_Select" : ["5212750000247932","5212750000564867"],
                    "SubForm" : [
                        {
                            "Single_Line" : "Service Equipment",
                            "Dropdown" : "New Order"
                        },
                        {
                            "Single_Line" : "Rotary Machine",
                            "Dropdown" : "Replacement",
                        }
                    ]
                }
            }

Response :

 response = {
                "code": 3000,
                "data": {        
                    "ID": "2000000245119"
                },
                "message": "success"
            }

Update Record

Method : updateRecord

Syntax : 

//configuration json
            config = {
                    appName : "${APPNAME}",
                reportName : "${REPORTNAME}",
                id: "${RECORDID}",
                data : "${FORMDATA}"
            }
            
            //update record API
            ZOHO.CREATOR.API.updateRecord(config).then(function(response){
             //callback block
            });

Example :

var config = { 
                   appName : "zylker"
                   reportName : "All-Timesheet", 
                   id : "2000000245119"
                   data : formData 
            } 
            
            ZOHO.CREATOR.API.updateRecord(config).then(function(response){
                if(response.code == 3000){
                    console.log("Record updated successfully");
                } 
            });

Response :

response = {
             "code": 3000,
             "data": {  
              "ID": "2000000245119"
                },
             "message": "success"
            }

Get All Records

Method : getAllRecords
Configuration :

Syntax :

//configuration json
            config = {
                    appName : "${APPNAME}",
                reportName : "${REPORTNAME}",
                criteria: "${CRITERIA}",
                page : "${PAGENUMBER}",
                pageSize : "${PAGESIZE}"
            }
            
            //get all records API
            ZOHO.CREATOR.API.getAllRecords(config).then(function(response){
                //callback block
            });

Example :

var config = { 
                appName : "zylker"
                reportName : "All-Timesheet", 
                criteria : "(Status == \"Open\" && Priority = \"High\")",
                page : 1,
                pageSize : 10
            }
            
            ZOHO.CREATOR.API.getAllRecords(config).then(function(response){
                var recordArr = response.data;
                for(var index in recordArr){
                    console.log(recordArr[index]);
                }	
            });

Response :

response = {
              "code": 3000,
              "data": [
                {
                  "ID": "52129000000146011",
                  "Name": {
                    "first_name": "James",
                    "last_name": "Kyle",
                    "display_value": "James Kyle"
                  },
                  "Address": {
                    "address_line_1": "Dari Mart",
                    "address_line_2": "995 Hayden Bridge Rd",
                    "district_city": "Springfield",
                    "state_province": "Oregon",
                    "postal_code": "97477",
                    "country": "United States",
                    "latitude": "33.9307727",
                    "longitude": "-116.8767541",
                    "display_value": "Dari Mart, 995 Hayden Bridge Rd, Springfield, Oregon, United States"
                  },
                  "Rich_Text": "The phone number is <b>+1541-726-4051</b>",
                  "Phone_Number": "+15417264051",
                  "Single_Line": "A simple one line text",
                  "Email": "james@zylker.com",
                  "Number": "23",
                  "Decimal": "1000.00",
                  "Percent": "60.00",
                  "Date_field": "10-Jan-2020",
                  "Date_Time": "23-Mar-2020 12:25:43 PM",
                  "Dropdown": "Open",
                  "Radio": "Closed",
                  "Multi_Select": [
                    "New",
                    "Used"
                  ],
                  "Checkbox": [
                    "Refurbished",
                    "Used"
                  ],
                  "Image": "/sites/zweb/images/creator/profile-01.jpg",
                  "File_Upload": "/api/v2/zylker/Contacts/view/Contacts/635900380/Upload/download",
                  "Ur1": {
                    "value": "Dari Mart",
                    "url": "www.darimart.com",
                    "title": "Dari mart provisional store"
                  },
                  "Lookup_Single_Select": {
                    "display_value": "James - 4269",
                    "ID": "521270000078464"
                  },
                  "Lookup_Multi_Select": [
                    {
                      "display_value": "Door Step Delivery",
                      "ID": "5212750000247932"
                    },
                    {
                      "display_value": "Cash on Delivery",
                      "ID": "5212750000564867"
                    }
                  ],
                  "Subform": [
                    {
                      "display_value": "Service Equipment,New Order",
                      "ID": "5212750000433263"
                    },
                    {
                      "display_value": "Rotary Machine,Replacement",
                      "ID": "5212750000090778"
                    }
                  ]
                },
                {
                  //Record 2
                },
                {
                //Record 3
                }
              ]
            }

Get Specific Record Using ID

Method : getRecordById
Configuration :

Syntax :

//configuration json
            config = {
                    appName : "${APPNAME}",
                reportName : "${REPORTNAME}",
                id: "${RECORDID}"
            }
            
            //get specific record API
            ZOHO.CREATOR.API.getRecordById(config).then(function(response){
                //callback block
            });

Example :

var config = {
                   appName : "zylker"
                   reportName : "All-Timesheet", 
                   id : "2000000193171"
            } 
            
            ZOHO.CREATOR.API.getRecordById(config).then(function(response){
                console.log(response.data);
            });

Response :

response  = {
             "code": 3000,
             "data": {
                    "ID": "52129000000146011",
              "Name": {
                        "first_name": "James",
                        "last_name": "Kyle",
               "display_value": "James Kyle"
                      },
              "Address": {   
               "address_line_1": "Dari Mart",
                           "address_line_2": "995 Hayden Bridge Rd",
                           "district_city" : "Springfield",
                           "state_province" : "Oregon",
                           "postal_code" : "97477",
                           "country" : "United States"
               "latitude": "33.9307727",
               "longitude": "-116.8767541",
               "display_value": "Dari Mart, 995 Hayden Bridge Rd, Springfield, Oregon, United States"
              },
              "Rich_Text" : "The phone number is <b>+1541-726-4051</b>",
                      "Phone_Number": "+15417264051",
                      "Single_Line": "A simple one line text",
                      "Email": "james@zylker.com",
              "Number": "23",
                      "Decimal" : "1000.00",
              "Percent": "60.00",
                      "Date_field" : "10-Jan-2020",
                      "Date_Time" : "23-Mar-2020 12:25:43 PM",
              "Dropdown" : "Open",
                      "Radio" : "Closed",
                      "Multi_Select" : ["New", "Used"],
                      "Checkbox" : ["Refurbished", "Used"],
                    "Image" : "/sites/zweb/images/creator/profile-01.jpg",
                    "File_Upload" : "/api/v2/zylker/Contacts/view/Contacts/635900380/Upload/download",
              "Ur1": {
                           "value": "Dari Mart",
                           "url": "www.darimart.com",
                           "title": "Dari mart provisional store"
                      },
              "Lookup_Single_Select" : {
                        "display_value" : "James - 4269",
               "ID" : "521270000078464"
               
              },
              "Lookup_Multi_Select" : [{
               "display_value" : "Door Step Delivery",
                        "ID" : "5212750000247932"
              },
              {
               "display_value" : "Cash on Delivery",
                        "ID" : "5212750000564867"   
              }],
                 "Subform" : [{    
               "display_value" : "Service Equipment,New Order",
                        "ID" : "5212750000433263"
              },
              {   
                           "display_value" : "Rotary Machine,Replacement",
                        "ID" : "5212750000090778"
              }]  
             }
            }

Get Record Count

Method : getRecordCount
Configuration : 

Syntax :

//configuration json
            config = {
                appName: "first-application",
                reportName: "Form_Report",
                criteria: "(Single_Line = \"High\")" //optional
            }
            
            ZOHO.CREATOR.API.getRecordCount(config).then(function (response) {
                //your code goes here.
            });

Example :

var config = {
                   appName : "zylker"
                   reportName : "All-Timesheet", 
            } 
            
            ZOHO.CREATOR.API.getRecordCount(config).then(function (response){
                console.log(response);
            });

Response :

response  =
            {
                 "result": {
                        "records_count": "4"
                  },
                  "code": 3000
            }

Delete Record

Method : deleteRecord
Configuration : 

Syntax :

//configuration json
            config = {
                    appName : "${APPNAME}",
                reportName : "${REPORTNAME}",
                criteria: "${CRITERIA}"
            }
            
            //delete record API
            ZOHO.CREATOR.API.deleteRecord(config).then(function(response){
                //callback block
            });

Example :

var config = { 
                   appName : "zylker"
                   reportName : "All-Timesheet", 
                   criteria : "(Status == \"Invalid\" && Date '01-01-2019')"
            } 
            
            ZOHO.CREATOR.API.deleteRecord(config).then(function(response){
                console.log("Record has been deleted");
            });

Response :

response = {
                "result": [{
                    "code": 3000,
                    "data": {
                        "ID": "66359000000021016"
                      },
                    "message": "success"
                   },
                   {
                   "code": 3000,
                   "data": {
                       "ID": "66359000000024309"
                     },
                   "message": "success"
                  }
                ],
                "code": 3000
            }

Upload File

Method : uploadFile
Configuration : 

Syntax :

//configuration json
            config = {
                    appName : "${APPNAME}",
                reportName : "${REPORTNAME}",
                id: "${RECORDID}",
                    fieldName : "${SUBFORMFIELDNAME.FIELDNAME}",
                parentId : "${RECORDID}",
                    file : "${FILEOBJECT}"
            }
            
            //upload file API
            ZOHO.CREATOR.API.uploadFile(config).then(function(response){
             //callback block
            });

Example :

            var fileObject = document.getElementById("fileInput").files[0];
            
        var fileObject = document.getElementById("fileInput").files[0];
            
            var config = { 
                    appName : "zylker"
                reportName : "All-Timesheet", 
                id : "2000000193171",
                fieldName : "Attachments",
                file : fileObject
            } 
            
            ZOHO.CREATOR.API.uploadFile(config).then(function(response){
             console.log("File uploaded successfully");
            });

Response :

response = {
              "code": "3000",
              "data": {
                "filename": "Rental Agreement-March.pdf",
                "filepath": "1587402896598_Rental_Agreement-March.pdf",
                "message": "success"
              }
            }