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>

      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        Access your files securely from anywhere

          Zoho CRM Training Programs

          Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

          Zoho CRM Training
            Redefine the way you work
            with Zoho Workplace
            Start your free trial

              Zoho DataPrep Personalized Demo

              If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

              Zoho CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsRetailOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceForms for Solopreneurs
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              		Forms for Government
                              Intake FormsLegal
                              		Mobile App
                              Form DesignerHR
                              		Mobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic FormsInsurance
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsWufoo alternativeEncrypted Forms
                              Accessible FormsTypeform alternativeSecure Forms

                              		WCAG

                                            What's new
                                            Help Guide
                                            Blogs
                                            Forums
                                            Webinars
                                            API
                                            Developers
                                            Build Extensions

                                          Create. Review. Publish.

                                          Write, edit, collaborate on, and publish documents to different content management platforms.

                                          Get Started Now




                                            Zoho Campaigns Resources




                                                        Zoho Pagesense Resources

                                                            You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.


                                                              Zoho Survey Resources
                                                                Features
                                                                Survey Templates
                                                                Integrations
                                                                Community
                                                                iOS Mobile Surveys
                                                                Pricing
                                                                Android Mobile Surveys
                                                                Insurvey Blogs
                                                                Insight Blogs
                                                                Tips & Tricks


                                                                Manage your brands on social media
                                                                Access Zoho Social

                                                                  What's New in Zoho Desk

                                                                  Use cases

                                                                  Make the most of Zoho Desk with the use cases.

                                                                   
                                                                    

                                                                  eBooks

                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                                                   
                                                                    

                                                                  Videos

                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                                                   
                                                                    

                                                                  Webinar

                                                                  Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                                   
                                                                    
                                                                  What's New in Zoho Desk

                                                                  • Desk Community Learning Series


                                                                  • Meetups


                                                                  • Ask the Experts


                                                                  • Kbase


                                                                  • Resources


                                                                  • Glossary


                                                                  • Desk Marketplace


                                                                  • MVP Corner



                                                                    Zoho Sheet Resources

                                                                     

                                                                        Zoho Forms Resources


                                                                          Features

                                                                          Form Templates

                                                                          Customers

                                                                          Mobile Forms

                                                                          Pricing

                                                                          Integrations

                                                                          Blogs

                                                                          Ebooks

                                                                          Tips & Tricks

                                                                          Community

                                                                          Terms of Use

                                                                          Secure your business
                                                                          communication with Zoho Mail
                                                                          Get started


                                                                          Mail on the move with
                                                                          Zoho Mail mobile application
                                                                          Go Mobile

                                                                            Stay on top of your schedule
                                                                            at all times
                                                                            Get started


                                                                            Carry your calendar with you
                                                                            Anytime, anywhere
                                                                            Get started


                                                                              Latest Announcements


                                                                                  Zoho Sign Resources

                                                                                    What's new
                                                                                    Help Guide
                                                                                    Solutions Guide
                                                                                    API
                                                                                    Blogs
                                                                                    FAQ's
                                                                                    Legal Guide
                                                                                    Forums
                                                                                    Webinars

                                                                                    Sign, Paperless!

                                                                                    Sign and send business documents on the go!

                                                                                    Get Started Now


                                                                                        Zoho SalesIQ Resources


                                                                                            Zoho TeamInbox Resources



                                                                                                  Latest Feature Updates
                                                                                                    Zoho DataPrep Resources


                                                                                                      Zoho DataPrep Demo

                                                                                                      Get a personalized demo or POC

                                                                                                      REGISTER NOW


                                                                                                        Design. Discuss. Deliver.

                                                                                                        Create visually engaging stories with Zoho Show.

                                                                                                        Get Started Now







                                                                                                                  Latest Feature Updates



                                                                                                                          Latest Feature Updates

                                                                                                                            • Related Articles

                                                                                                                            • Web Tab in Zoho People

                                                                                                                              What is Web Tab in Zoho People? Web Tab in Zoho People allows loading external websites or custom web pages/web apps created using Zoho CLI and JS SDK. It works similarly to the Custom Widgets feature in Zoho People. Where can Web Tabs be deployed in ...

                                                                                                                            • Create Internal Widget or Web tab Packages Using Zet-CLI Tool - Zoho People

                                                                                                                              The Zoho Extension Toolkit (ZET) is a command-line interface designed to assist developers in creating application packages for Widgets or Web tab for integration with Zoho People. Prerequisites Download the nodejs source code from ...

                                                                                                                            • Zoho People 5.0 - What has changed?

                                                                                                                              Changes in Home tab and Self Service Zoho People 4.0 Zoho People 5.0 Landing page is Home > Dashboard Self Service page: New Landing page is Home > My Space > Overview (Replacement for Self service in Zoho People 4.0 with additional features). ...

                                                                                                                            • Zoho People 5.0 Administrator Guide

                                                                                                                              What is Zoho People 5.0? Zoho People is a comprehensive cloud-based HR software that aims to streamline HR processes, enhance employee engagement, and improve workforce productivity. With this refreshing new version, Zoho People further aims to ...

                                                                                                                            • Custom Widget

                                                                                                                              Custom widgets are embeddable user interface components that you can create and add to your Zoho People application. Widgets can be used to extend the application's front-end capabilities according to your requirements. Use widgets to perform ...
                                                                                                                              Bootcamp
                                                                                                                              Community
                                                                                                                              Pricing
                                                                                                                              Webinars
                                                                                                                              What's New
                                                                                                                              Integrations
                                                                                                                              Contact Support
                                                                                                                              Contact Sales
                                                                                                                              Wherever you are is as good as
                                                                                                                              your workplace
                                                                                                                              Workplace on mobile

                                                                                                                                Resources

                                                                                                                                Videos

                                                                                                                                Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                                eBooks

                                                                                                                                Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                                Webinars

                                                                                                                                Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                                CRM Tips

                                                                                                                                Make the most of Zoho CRM with these useful tips.



                                                                                                                                  Zoho Show Resources