Extension pointers - JS SDK Series #1: Learn how to invoke a REST API function from a widget using the execute method

Extension pointers - JS SDK Series #1: Learn how to invoke a REST API function from a widget using the execute method

Software development kits (SDK) are sets of tools that are useful when building applications on a platform. They wrap up APIs in the form of libraries, and include sample code, utilities, and documentation that guides you in building your applications. 

In our earlier posts we discussed building embeddable widgets for Zoho CRM. These widgets help to seamlessly integrate Zoho CRM with other applications and provide contextual information along with the application's data. Zoho CRM provides the JS SDK bundled with the necessary APIs and utilities to build these widgets using JavaScript. It serves as a mode of interaction between the JavaScript code and Zoho CRM. Through this JS SDK series of extension pointers, we aim to help you gain a deeper understanding of JS SDKs, and how to build efficient extensions.

The JS SDK bundle of Zoho CRM APIs is significant in helping you develop powerful widgets using JavaScript.

The Zoho CRM JS SDK, includes most of the APIs that help you operate with Zoho CRM data. It also includes event listeners that are useful for registering your application's events. The JS SDK also provides support to manage your widget's UI, handle configurations and connections with third party applications, and more. We're going to look at the different options available in the JS SDK, one at a time, throughout this series.

In this post, let's take a look at the ZOHO.CRM.FUNCTIONS.execute() function, its benefits,and how it can be incorporated while building extensions. It's designed to help you invoke and execute a custom function from a widget. Only a standalone REST API function can be invoked from your widget. A few major pointers regarding this API are:

➤ The ZOHO.CRM.FUNCTIONS.execute() function lets you invoke only the REST API function from a widget
➤ It requires that you input the API name of the function along with the constructed set of request data


ZOHO.CRM.FUNCTIONS.execute(func_name, req_data)

Here, 'func_name' is the API name of the REST API function. 'req_data' is the constructed argument set that needs to be passed to the function.


var func_name = "sample_function";
var req_data ={
"arguments": JSON.stringify({
"Company" : "Zoho",
"Email" : "saxxxx@xxxxx@.com",
ZOHO.CRM.FUNCTIONS.execute(func_name, req_data)
console.log("REST API function invoked from widget."+data);

Here, 'sample_function' is the API name of the REST API function. The arguments, namely 'Company' and 'Email',are constructed and passed as the 'req_data' parameter to the ZOHO.CRM.FUNCTIONS.execute() function.

Now let's see how the execute function can be incorporated while creating widgets to build an extension.
Note: Widgets are embeddable GUI components that help extend Zoho CRM's functionality. To get detailed information on widgets and how they work,please refer here.

To demonstrate the use of ZOHO.CRM.FUNCTIONS.execute(), let's assume a scenario in Zoho CRM involving raised product issues or concerns are registered as Cases by an organization. In general, cases originate through different modes, for example through phone, web, or email. Let's build a widget with a customized UI that allows a user to key in certain values pertaining to the 'Cases' module. This widget will fetch the necessary values and pass them to a REST API function that will create a record in the Cases module. This could help the support user on a phone call with the client to quickly build a case by filling out only the specific details.

Code snippet:

//assigning api name of REST API function to 'func_name' parameter of the execute function
var func_name="jssdkextension__executesdkfunction";
console.log("inside function");
//fetching the values provided in the UI
var subject = document.getElementById("subject").value;
var phoneno = document.getElementById("phnumber").value;
var email = document.getElementById("email").value;
var x = document.getElementById("cases").selectedIndex;
var x1 = document.getElementById("cases").options;
var cases=x1[x].text;
var y = document.getElementById("status").selectedIndex;
var y1 = document.getElementById("status").options;
var status=y1[y].text;
//constructing the 'req_data' parameter with the values fed by the user through the UI
var req_data ={
"arguments": JSON.stringify({
"sub" : subject,  
"phone" : phoneno,
"cases" : cases,
"status" : status,
"email" : email
//Invoking the execute function to execute the REST API function
ZOHO.CRM.FUNCTIONS.execute(func_name, req_data).then(function(data){
var resp=JSON.stringify(data);

executesdkfunction Rest API function

//retrieving the parameters of the request
params = crmAPIRequest.get("params");
//retrieving the set of values from 'arguments' passed as 'req_data' in the javascript code
args = params.get("arguments");
data = Map();
sub = args.get("sub");
phone = args.get("phone");
caseorigin = args.get("cases");
status = args.get("status");
email = args.get("email");
//creating a new record in the Cases module
resp = zoho.crm.createRecord("Cases",data);
return args;

The highlighted text in the code snippet above is used to fetch the values provided by the user through the variable 'arguments' that is passed as the 'req_data' parameter to the REST API function.

Note: You can obtain the API name of the function from the sandbox URL or production URL obtained while using the option 'Invoke as REST API' in the script editor function.

Sample Output of Widget Screen

A new record is inserted in the Cases module according to the inputs provided.

Hope you found this information useful! For more about JS SDKs, keep following this space.


<<Previous                                                                                                                                                    Next>>