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 tokens or JS SDK based on your business requirements. In this post, let's take a look at how the JS SDKs help manage data using a widget.

The JS SDK ZOHO.CRM.HTTP supports different HTTP methods and allows you to make Ajax calls from a widget.

The different HTTP methods are:

GET - To retrieve data/resources from the resource server.
DELETE - To delete a resource at a particular location.
PATCH - To update a specific detail of the resource. This method updates the target resource with the provided content without changing other data.
POST - To insert or upload any new resource to the server.
PUT - To update an existing resource. This replaces the target resource with the updated content.

In this post, let's assume a couple of scenarios that may be involved in an integration between Zoho CRM and Asana, a project management application. Let's explore how the HTTP methods GET and POST can be invoked from a widget while implementing the integration.

Consider a service-based software development company that manages its sales cycle in Zoho CRM and project management in Asana. Once they close a deal for a new app development, they kickstart their work and handle the project development and management processes in Asana. An integration between these two services can handle some valid use cases.

Scenario 1: Let's assume that a new project will be created in Asana as soon as a deal is closed in Zoho CRM. In this case, the details about the new project will need to be added into Asana with information from the Deals module of Zoho CRM in order to continue project management in Asana.

Lets see how to achieve this scenario using ZOHO.CRM.HTTP.post JS SDK.

Syntax: HTTP POST

ZOHO.CRM.HTTP.post(request)

Here request is the request object constructed with the following details:

Request Object

Name	Type	Description
params	Object	Request parameters to be constructed to invoke HTTP POST.
headers	Object	Request headers required.
body	Object	Request parameters to be constructed to invoke HTTP POST.

createproject.js Code snippet:

Util={};

var orgVal;

var json;

var jsonObj;

var EntityId;

var EntityName;

var rec3;

var wid="11**********71"; //hardcoded the workspace id for demonstration purposes

var projname;

function initializeWidget()

{

//Subscribe to the EmbeddedApp onPageLoad event before initializing the widget

ZOHO.embeddedApp.on("PageLoad",function(data)

{

EntityName=data.Entity;

EntityId=data.EntityId;

console.log(EntityId);

console.log(EntityName);.

//Fetching deal related details using getRecord API

ZOHO.CRM.API.getRecord({Entity:EntityName,RecordID:EntityId})

.then(function(data){

console.log(data)

projname= data.data[0].Deal_Name;

})

/*The personal access token of Asana has been stored in custom variable and retrieved using the getOrgVariable method */

ZOHO.CRM.API.getOrgVariable("jssdkextension__Accesskey").then(function(data){

org=data.Success;

orgVal="Bearer "+org.Content;

console.log

(org.Content);

console.log(orgVal);

})

Util.create=function()

{

setTimeout(function(){

/*Constructing the request parameter (header and body) to pass to the HTTP POST method */

var request ={

url : "https://app.asana.com/api/1.0/projects?workspace="+wid,

headers:{

Authorization : orgVal,

//Field values to create a project in Asana are passed in the body section

body:

{

"data": {

"name": projname,

"start_on": document.getElementById("dateproject").value,

"due_date": document.getElementById("lastdateproject").value,

"notes": document.getElementById("notes").value,

}

// Invoke the HTTP POST to create the project

ZOHO.CRM.HTTP.post(request)

.then(function(data){

jsonObj = JSON.parse(data);

console.log(jsonObj);

rec3=jsonObj.data.gid;

console.log(rec3);

})

},500)

}

})

//Initialize the widget

ZOHO.embeddedApp.init();

}

In this above code snippet, the Asana API to create a project is used. The deal-related details are fetched using getRecord Zoho CRM API. The fetched deal name, along with the input values (project start date, project due date and project notes), are constructed and passed to the body parameter of the API call. The project is created upon clicking the 'Create project in asana' button. Similarly, you can modify and enhance the above functionality according to your business needs.

Scenario 2: Assume after creating the project in Asana you have gone ahead and added some tasks for that project in Asana to manage the project. Now, while you're looking at the Zoho CRM contact associated with this particular project, you'd like to look at the tasks associated with that project, from within Zoho CRM itself.

Lets see how to achieve this scenario using ZOHO.CRM.HTTP.get JS SDK.

Syntax: HTTP GET

ZOHO.CRM.HTTP.get(request)

Here request is the request object constructed with the following details:

Request Object

Name	Type	Description
params	Object	Request parameters to be constructed to invoke HTTP GET.
headers	Object	Request headers required.

associatedTasks.js Code snippet:

Util={};

var orgVal;

var json;

var jsonObj;

var rec;

var pid="1**********3"; //hardcoded the project id for demonstration purposes

function initializeWidget()

{

//Subscribe to the EmbeddedApp onPageLoad event before initializing the widget

ZOHO.embeddedApp.on("PageLoad",function(data)

{

/*The personal access token of Asana has been stored in custom variable and retrieved using the getOrgVariable method */

ZOHO.CRM.API.getOrgVariable("jssdkextension__Accesskey").then(function(data){

org=data.Success;

orgVal="Bearer "+org.Content;

console.log

(org.Content);

console.log(orgVal);

})

setTimeout(function(){

/*Constructing the request parameters to pass to the HTTP GET method for fetching tasks associated to the specific project*/

var request ={

url : "https://app.asana.com/api/1.0/tasks?project="+pid,

headers:{

Authorization : orgVal,

}

// Invoke the HTTP GET to receive the response of the initiated request

ZOHO.CRM.HTTP.get(request)

.then(function(data){

jsonObj = JSON.parse(data);

console.log(jsonObj);

rec=jsonObj.data;

console.log(jsonObj.data);

//Looping through every task detail and retrieving the task names

for (i = 0; i < rec.length; i++)

{

/*Creating a list and populating the task name of the different tasks associated with the respective project*/

var taskname=rec[i].name;

var node = document.createElement("LI");

var textnode = document.createTextNode(taskname);

node.appendChild(textnode);

document.getElementById("myList").appendChild(node);

}

})

},500)

})

//Initialize the widget.

ZOHO.embeddedApp.init();

}

In the above code snippet, we used the Asana APIs to get tasks. The list of tasks for a particular project is fetched using the get tasks API and populated in a list. Similarly, you can modify and enhance the above functionality according to your business needs.

In this way, you can use the JS SDK ZOHO.CRM.HTTP to manage data through different HTTP methods. We hope you found this information useful. Keep following for more inputs.

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

Asana API Documentation

<<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