Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP

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 ={
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 ={
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.

SEE ALSO


    Nederlandse Hulpbronnen


      • Recent Topics

      • Sent emails not going and showing "Processing"

        Hello Team, Could you please assist with sent emails showing "processing" and not actually going through? Many thanks and regards, Cycology

      • LinkedIn verification link and otp not receiving

        For the last 2 to 3 weeks I'm trying to verify my LinkedIn account to access my company's LinkedIn page, Linkedin is sending verification links and codes to this email address but I have not received any codes or links. Please help me here. Looking forward

      • Admin Control for Default Email Templates in Zoho Desk

        Hi Zoho Desk Team, We would like to request a feature enhancement related to default email templates. Currently, agents can select and set their own default email templates when replying to tickets. However, we believe this setting should be managed centrally

      • Unlocking New Horizons: A Year in Review

        As we bid farewell to 2024, let's celebrate and revisit the key highlights of the year. From adding a new edition to cross-platform enhancements, here’s a roundup of all the feature updates designed to simplify accounting, optimize financial management,

      • Zoho desk desktop application

        does zoho desk has a destop applicaion?

      • send file to ftp or another external service

        i'v created a zoho creator application for take a picture and rename it by phone. Now i need to send Each renamed pictures to my ftp or to specific folder on google drive...then, delete it from creator. (every picture recived it will processed by another program and stored on my Erp) HOW CAN I DO ??

      • Error 403: Forbidden When Updating Email Signature via API

        Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

      • Has anyone built a ticket export that allows Help Center users to export the tickets shown in the My Area list they are looking at?

        Hi, We are moving to Zoho Desk soon. Our current support system displays an option in our help center allowing customers to export their Open, Closed, or all tickets based on which list they are looking at. We need to offer the same in Zoho Desk help

      • Mass pdfs into OCR field

        I am working on a Creator app that my org will use internally. Is there any way to mass upload pfs through a form with an OCR file upload field? Is Creator capable of this, or would I need to use Catalyst?

      • How to upload a file to form file upload field from deluge script.

        Hi guys, I need to store API response into Form File upload field . I'm not getting any errors but PDF file is not assigned to file upload field. You can check possibilities using below details: Method: POST URL: https://v2.convertapi.com/convert/web/to/pdf?Secret=<<SecretKey>>&Token=<<APIKey>>&Url=https://www.google.com You need to generate secretKey and APIKey by Login to https://www.convertapi.com/a/su Response: { "ConversionCost": 4, "Files": { "FileName": "www_google_com.pdf", "FileSize": 68342,

      • Export view via deluge.

        Hi, Is it possible to export a view (as a spreadsheet) via deluge? I would like to be able to export a view as a spreadsheet when a user clicks a button. Thanks     

      • Subform Time field showing as null in script.

        Good Afternoon everyone. I am trying to take the information from my subform and populate it into a multiline field in the CRM. The code below works with no errors. The problem is, it shows that the Open and Close (Time fields) are null. But they are

      • Zoho Payroll's Year in Review 2024

        As we roll into 2025, we'd like to pay tribute to all the milestones we hit in 2024! From releasing out new features that streamlined your workflows to updates that made payroll management smoother, we’ve had a prolific year—all while keeping you, our

      • Is there a way to sort report on record template by a specific field like date field

        Hi, Is it possible to sort the report on the record template by the date field and not the default Added Time. Please check the example bellow: The records are sorting by the added time I wand to change that by the date field,

      • Shared subfolders

        Am I right in thinking that there is no Zoho email application that allows me to create a shared inbox and then add additional folders/subfolders under that inbox? If so, this is really quite incredible and probably a deal breaker for us to start using

      • Update Multi select field values to another form table as individual record

        Hi, I am new to coding and do basics within deluge. I need help with the deluge script to meet the following requirement. Form Student Attendance The fields are : Attendance Date Course (Lookup to Course Form) Class (Lookup to Class Form) Students (Multi

      • Shared Mailbox - Mark as read for all users

        Hi all, Maybe someone can help me out. At the moment we have a shared mailbox without streams. When a users reads an mail or marks it as read other users will not see this. How can we resolve this? We now archive the mails when read and followed up. However

      • Allocate emails to user in a shared mailbox

        Hi, This might be obvious, but I cannot find the answer. I have 3 shared mailboxes so any team member can see the emails. Is there a way of allocating a specific email to a user so that it is their responsibility to deal with it? Thanks in advance.

      • How to view shared mailbox in Outlook

        How to view shared mailbox in Outlook or in another software

      • Search mails in shared mailbox

        Hi everyone, is there a way to search mails in shared mailbox's? Search in streams or mail doesn't return anything from mails in shared mailboxes. Thanks! Rafal

      • How to send binary data in invokeurl task?

        Hello, I am using Adobe's Protect PDF API. Source: https://developer.adobe.com/document-services/docs/overview/pdf-services-api/ Everything works fine in Postman. But for some reason after encrypting the file, it is empty after password protecting the

      • Customising the approval email

        Is there anyway to customise the Approval email or to add further fields as the default looks so basic and unlike any of the other email notifications from Desk. My users just thought it was spam.

      • Feature request - pin or flag note

        Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less important

      • Pushing GCLID info from Gravity Forms to ZohoCRM

        We are switching to Gravity Forms from Zoho Forms and I cannot find any good info on how to make sure my GCLID tracking info is pushed through to the CRM through my new forms. There was an article in the documentation about placing something within the

      • Issue Configuring SSO Integration with Cognito in Zoho Help Center

        Dear Zoho Support Team, We have been working on configuring SSO integration for our Zoho Help Center using Amazon Cognito. While the setup appears to be completed successfully, we are encountering an issue when attempting to access the Help Center. The

      • Need manual aggregate column pathing help

        See linked video here: https://workdrive.zohoexternal.com/external/a5bef0f0889c18a02f722e59399979c604ce0660a1caf50b5fdc61d92166b3e7

      • Add blueprint buttons to listview and kanban

        Hello, just started to use the Blueprints feature - really useful. I have one suggestion to help this work even better - can there be transition buttons that appear on the top of listview & Kanban? Maybe an option as well - "Blueprint transitions appear

      • Merging contacts does fail because of help center membership

        I'm trying to merge two contact records (they are the same contact) where one of them is a member on the help center. The system warns me about this situation and then I de-activate this contact as an "End User" for the help center. Right now the system

      • Duplicate Contacts - how to get merge or delete

        I have noticed that our list of contacts in Zoho Desk duplicates contacts periodically.  I have yet to identify when or why.  How do I merge or delete them?  I see there is a "Deduplicate" but I am unable to find anything that explains this feature.

      • Admin Access to Direct Messages in Zoho Cliq

        Hi Zoho Cliq Team, We would like to request a feature enhancement to enable admin access to one-on-one conversations (direct messages) conducted through Zoho Cliq. Use Case: As administrators, there are situations where it becomes essential to access

      • "Mark as Spam" not working as expected

        Dear support, in the below scenario, clicking on "Mark as spam" identifies only the first of the checked emails as spam, removes that email from the visible list and leaves the rest of the list still visible & unchecked. I've tried check-marking them

      • Massive price increase for user licenses of Zoho Portal

        This actually a complaint about this announcement: https://help.zoho.com/portal/en/community/topic/free-user-licenses-across-all-portal-user-types You present this as an enhancement. And, yes, while reading the main part, I'd agree that (for smaller companies),

      • Elevating Email Security on Zoho Desk: DKIM Now Mandatory

        Hello Zoho Desk Users! It has been a wonderful journey with you on Zoho Desk. As we welcome 2025, we are strengthening our efforts to ensure a secure and seamless experience for you. To enhance email security, DKIM configuration will be mandatory for

      • Free user licenses across all Portal user types

        Greetings everyone, We're here with some exciting and extensive changes to the availability of free user licenses in CRM Portals. This update provides users with access to all Portal user types for free to help them diversify their user licenses and explore

      • Calendar - "super compact" week view

        every time i go to my calendar i have to re-engage the "super-compact view" for the week view...is there a way to make "super-compact" a default view so I dont have to keep on setting it manually?

      • Calendar - "pop up" locations

        One of the attractive features of google calendar and outlook calendar is that locations for events will start to automatically populate the location drop down menu as you type. Adding this feature to zoho calendar would be the final feature i need.

      • Using Zia in Zoho Sheet data to research the internet and return answer to a cell in Zoho Sheet

        I'm trying to see if Zia (connected with OpenAI key) can take data parameters stored in a Zoho Sheet to conduct research out on the internet then return an answer into the same Sheet. I'm trying to do the equivalent of using something like the =AI() function

      • [Free Webinar] Learning Table Series - Creator for the Education Industry

        Hello Everyone! We're thrilled to invite you to the Learning Table Series—a year-long initiative to demonstrate how Zoho Creator can transform industries with innovative and automated solutions. Each month focuses on a specific industry, and this time,

      • Remove the [## XXXX ###] from subject replies

        For our organisation we would like to have the [## XXXX ###] removed from subject replies. Cheers, Jurgen 365VitaalWerken

      • Self Client Authorization Issue

        Hi. Trying to test the api integration for Zoho Desk with the Self Client - Client Credintials flow method. I've created the self client, obtained the client id and secret, inputted "Desk.tickets.ALL" as my scope, and "ZohoDesk.[My Zoho Desk Org ID]"

      • Next Page