JS SDK Library - Zoho People (Custom widget and Web tab)

JS SDK Library - Zoho People (Custom widget and Web tab)

The JS SDK library is a set of APIs which can be used in the widget and web tab to fetch form data from Zoho People without setting any authorization in the API request. For other Zoho People APIs, you must set up connections, refer to Invoke API via Connections.

JS SDK URL to be included in your code before calling the following SDK methods:
https://static.zohocdn.com/zp5/widgets/zpwidgetsdk.min.js
To register listeners with widgets:
Use the following code snippet to initialize your widget and start listening to events in your Zoho People application.
ZOHO.embeddedApp.init();
Supported only for Related list and custom button widgets.
To get form id where the widget is currently rendered, use:
ZOHO.People.API.getFormId()

Response

String(record id)

Get form field components

To get form field components, use:
ZOHO.People.API.getFormComponents(inputData)
inputData
JSON Input
{formName:<form name>};

 For formName - Refer here.


Response
[{
"comptype": "Text",
"ismandatory": true,
"descriptionType": 0,
"displayname": "EmployeeID",
"autofillvalue": "",
"description": "",
"formcomponentid": "115782000000020183",
"labelname": "EmployeeID",
"maxLength": 100
}, {
"comptype": "Text",
"ismandatory": true,
"descriptionType": 0,
"displayname": "Last Name",
"autofillvalue": "",
"description": "",
"formcomponentid": "115782000000020187",
"labelname": "LastName",
"maxLength": 100
}]

Add form record

To add a form record, use:
ZOHO.People.API.addFormData(inputData);
 
 inputData
 JSON Input: 
 
 {formName:<form name>, input:{LabelName:value, LabelName1:value}};

  For formName - Refer here

 For LabelName - Refer here

 

Response

Success Response: Data added successfully
Failure Response: Error occurred

Update form record

To update the form record, use:
ZOHO.People.API.updateFormData(inputData);
 
 inputData
 JSON Input: 
 
 {formName:<form name>, input:{LabelName:value,   LabelName1:value},recordId:   <form record id>};

 For formName - Refer here

Response

Success Response: Data updated successfully
Failure Response: Error occurred

Get record id

Supported only for Related list and custom button widgets.
To get record id of the record in which the widget is currently rendered, use:
ZOHO.People.API.getRecord()

Get form data by record id

To get form data by record id use:
ZOHO.People.API.getFormRecord(inputData):

 
 inputData

 JSON Input: 

 {recordId:<record id>,formName: <form name>};
 For formName - Refer here

 

Current form record id can be get from ZOHO.People.API.getRecord()

Response  

{"LabelName": value, "LabelName1":value2,"LabelName_downloadUrl":file upload field download url}

Get bulk form records

To get bulk form records, use:
ZOHO.People.API.getBulkRecords(inputData)
 inputData



 JSON Input: 
 
 {formName:<form name>,startIndex:<from limit>,limit:<to limit>}


 startIndex- not mandatory, default value -1
 limit- not mandatory, default value - 200

Response

[{"LabelName": value, "LabelName1":value2,"LabelName_downloadUrl":file upload field download url}, {"LabelName": value1, "LabelName1":value22,"LabelName_downloadUrl":file upload field download url},
]

Get form data sectionalise

To get form data by section, use
ZOHO.People.API.getFormDatabySection(inputData)
inputData
 JSON Input: 
 
 {formName:<formName>,recordId:<record id>}

For formName - Refer here

Response

[
{
"Section1": {
"Label name": value, "Label name": value
},
"Section2": {
"Label name": value, "Label name": value
},
"tabularSections": {
"Label name": [
{
"Label name": value, "Label name": value
}
],
"ApprovalStatus": "Approval Not Enabled"
}
]

Download form file

To download the form file, use:
ZOHO.People.API.downloadFormFile(inputData);
 
 inputData
 JSON Input: 
 
 {fcId:<form component id>,recordId:<form record id>,formId:<form id>}

Response

File Content

Get file categories

To get file categories, use:
ZOHO.People.API.getFileCategories();

Response

[{"CatID":"1","CatName":"Test"},{"CatID":"2","CatName":"Test1"}]

Upload employee files

To upload a file, use:
ZOHO.People.API.uploadEmployeeFile(fileInput);
 
 fileInput
 JSON Input: 
 
 {uploadfile:<Blob or file>, fileName: <File name>, employeeId:<empId>,fileDesc:   <Description>,catId:<CategoryId>};

 To get catId, use:
Quote
ZOHO.People.API.getFileCategories();

Response


Success Response: Data added successfully

Call third party APIs

To call third party APIs, use:
ZOHO.People.Http.post(requestObj);
 
 inputData
 JSON Input: 
 
 var requestObj = {
            url : url,
            header:  {'Authorization'':"Zoho-oauthtoken-__token"}
 params: {};
 };

Notes
Zoho-oauth is for invoking Zoho Services api.

Response

Response from the api.

Invoke API via Connections

To invoke API via Connections, use:
ZOHO.People.API.invokeUrl(requestData);
Set up Connections in Zoho People to invoke API via Connections, refer to Connections - Zoho People.
For Zoho People APIs, refer to Zoho People API.
inputData






JSON Input

  var input = {url: <url to invoke>,
connectiondetails:"name=<connection-name>",
params : <url params>, // url parameters optional
methodType: <GET|POST|PUT|DELETE>;
extraParam: <url headers>}; // url headers optional
};  


Example : 
var input = {
            url:"target_url", 
            connectiondetails: "connection name",
            method: "POST",
            apiParams : {
              "id" : "12121212121212",
              "name" : "john",
            },
            extraParam : {
              "Content-Type" : "application/json"
            },
 };

Response

Response from the api.

Invoke Standalone function

To invoke a standalone function using JS SDK in widgets or webtab, use:
Functions can be invoked only by Zoho People administrators or users with automation admin permissions.
ZOHO.People.API.invokeStandaloneFunction(requestData);
InputData










JSON Input

var requestData = {
      fnName : {Function Name}*,
      params : {pass arguments as stringify json format} - Optional
}

Example: 
var requestData = {
      fnName : Approve,
      params : '{"name":"kiran","num":"999","status":"true"}'
}

Response

Success Response: {Status : Success}
Failure Response: Error Json

Get Current Logged-In User Info

To get current logged in user information, use:
ZOHO.People.API.getCurrUserInfo();

Response

JsonObject

Get Organization ID

To get current logged in Organization Id, use:
ZOHO.People.API.getOrganizationId();

Response

Example: OrgId : 90120123

Sample codes for Widgets and Webtabs

Fetch Data from the Form - Widget (RelatedList and Custom button)

Ensure that all JS SDK API calls in your HTML file are enclosed within ZOHO.embeddedApp.init() for the application initialization.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://static.zohocdn.com/zp5/widgets/zpwidgetsdk.min.js"></script>
  6.     <script>
  7.     window.onload = function () {
  8.       // initialize the widget, before invoking any js sdk method
  9.       // The Api "ZOHO.People.API.getRecord()" only works with RelatedList and Custombutton type widgets. For other types of widgets and web tabs, the record ID needs to be added manually.
  10.       // Additionally, please edit the form name wisely.
  11.       ZOHO.embeddedApp.init().then(function() {
  12.         ZOHO.People.API.getRecord().then(function(record) { 
  13.           ZOHO.People.API.getFormRecord({formName:"employee",recordId:record}).then(function(recordData){
  14.             console.log(recordData);
  15.           });
  16.         });
  17.       });
  18.     }       
  19.   </script>
  20.   </head>
  21.   <body>
  22.     <h2>This is a sample widget to get form record.</h2>
  23.   </body>
  24. </html>

Fetch Data from the Form - Webtab

Ensure that all JS SDK API calls in your HTML file are enclosed within ZOHO.embeddedApp.init() for the application initialization.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://static.zohocdn.com/zp5/widgets/zpwidgetsdk.min.js"></script>
  6.     <script>
  7.     window.onload = function () {
  8.       // initialize the widget, before invoking any js sdk method
  9.       // Additionally, please edit the form name wisely.
  10.       ZOHO.embeddedApp.init().then(function() {
  11.           ZOHO.People.API.getFormRecord({formName:"employee",recordId:"{Place the specific record ID here}"}).then(function(recordData){
  12.             console.log(recordData);
  13.           });
  14.       });
  15.     }       
  16.   </script>
  17.   </head>
  18.   <body>
  19.     <h2>This is a sample widget to get form record.</h2>
  20.   </body>
  21. </html>

Using Multiple SDK APIs in a Single Widget

IdeaEnsure that all JS SDK API calls in your HTML file are enclosed within ZOHO.embeddedApp.init() for the application initialization.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://static.zohocdn.com/zp5/widgets/zpwidgetsdk.min.js"></script>
  6.     <script>
  7.     window.onload = function () {

  9.         ZOHO.embeddedApp.init().then(function () {
  10.             
  11.          ZOHO.People.API.getRecord().then(function (record) {  // Fetching current record id

  13.             ZOHO.People.API.getFormRecord({ formName: "{ FORM NAME HERE }", recordId: record }).then(function (recordData) { // Fetching the Form data
  14.               console.log(recordData);
  15.               //From the response, check the file upload field key and split the values for the download API call. For supported file downloads in the API, the key will end with "downloadUrl."
  16.               //For example, if the field name is "Survey," the key will look like "Survey_downloadUrl."
  17.               const data_image = recordData.cskfile_downloadUrl.split('&'); 
  18.               const fcId = data_image[0].split("fcId=")[1];
  19.               const recId = data_image[1].split("=")[1];
  20.               const formId = data_image[2].split("=")[1];

  22.               ZOHO.People.API.downloadFormFile({ fcId: fcId, recordId: recId, formId: formId }).then(function (fileBinary) {
  23.                 var blob = new Blob([fileBinary], { type: 'image/png' }); //Here, based on the file uploaded in that field, you need to update accordingly.
  24.                 var imageUrl = URL.createObjectURL(blob);
  25.                 var iframeElement = document.getElementById("image");
  26.                 iframeElement.src = imageUrl;
  27.                 iframeElement.style.display = "block";
  28.               });
  29.             });
  30.           });
  31.        });
  32.       }       

  34.   </script>
  35.   </head>
  36.   <body>
  37.     <h2>This is a sample widget to get form record.</h2>
  38.     <div id="imageContainer">
  39.       <img id="image" style="max-width: 100%; max-height: 400px; display:none;" />
  40.   </div>
  41.   </body>
  42. </html>

Invoking the Zoho People API call using the JS SDK with Connections support

Ensure that all JS SDK API calls in your HTML file are enclosed within ZOHO.embeddedApp.init() for the application initialization.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://static.zohocdn.com/zp5/widgets/zpwidgetsdk.min.js"></script>
  6.     <script>
  7.     window.onload = function () {
  8.       ZOHO.embeddedApp.init().then(function() {

  10.         var requestData = {
  11.             url:"https://people.zoho.com/people/api/attendance/getUserReport?", // Refer Zoho People Apis for more apis
  12.             connectiondetails: "{Connection Name Here}", // Create a connection with the specified scope and use the connection name here. remove the {}
  13.             method: "POST",
  14.             apiParams : {
  15.               sdate : "2025-02-11",
  16.               edate : "2025-02-12",
  17.               dateFormat : "YYYY-MM-DD",
  18.               startIndex : "0"
  19.             },
  20.           };

  22.         ZOHO.People.API.invokeUrl(requestData).then(function(recordData) {
  23.           console.log(recordData);
  24.         }).catch(function(error) {
  25.           console.error("Error invoking the API:", error);
  26.         });

  28.       });
  29.     }       
  30.   </script>
  31.   </head>
  32.   <body>
  33.     <h2>This is a sample widget to get form record.</h2>
  34.   </body>
  35. </html>

Initialize the ZOHO.embeddedApp.init() call first, before using any JS SDK APIs

Here the JS SDK API function calls are called outside the ZOHO.embeddedApp.init().
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.   </head>
  6.   <script src="https://static.zohocdn.com/zp5/widgets/zpwidgetsdk.min.js"></script>
  7.   <script>

  9.       ZOHO.embeddedApp.init();

  11.        function getEmployeeRecord() {
  12.           ZOHO.People.API.getFormRecord({ formName: "employee", recordId: "153045000000357005" })
  13.             .then(function (recordData) {
  14.               console.log(recordData);
  15.             })
  16.             .catch(function (error) {
  17.               console.error('Error retrieving record:', error);
  18.             });
  19.         }

  21.         function getFormComponents() {
  22.           ZOHO.People.API.getFormComponents({formName : "employee"}).then(function (components) {
  23.                 console.log(components);
  24.           })
  25.          }


  28.   </script>
  29.   <body>
  30.     <h2>This is a sample Widget built using Zoho Extension toolkit.</h2>
  31.     <button onclick="getEmployeeRecord()">Get Employee Record</button>
  32.     <button onclick="getFormComponents()">Get Form Components</button>
  33.   </body>
  34. </html>