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

Syntax

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.

Example

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)

.then(function(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:

sdkwidget.js

Util={};

//assigning api name of REST API function to 'func_name' parameter of the execute function

var func_name="jssdkextension__executesdkfunction";

Util.check=function()

{

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");

data.putAll({"Subject":sub,"Phone":phone,"Case_Origin":caseorigin,"Status":status,"Email":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.

Extension pointers: Working with widgets to power-up extension capabilities (Part-2)

<<Previous Next>>

Access your files securely from anywhere

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use API
Kaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes