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


    • Recent Topics

    • MA 2.0 Email Footer

      Good day, I recently went through the nightmare of upgrading from MA 1.0 to MA 2.0 and continue to experience more problems or missing features and settings. In this particular case, I am trying to find where and how to edit the Email Footer in MA 2.0.

    • books+POS+ tap to pay+ stripe

      So in the UK we now have tap to pay with stripe. So we can use the stripe app as a POS terminal. Brilliant news. Can we hope that the Books App might add this feature ASAP. It would be great to have one system rather than using the not very good Square

    • Instantly refine your CRM dashboard using Filters and download underlying data – all in a few clicks!

      Hello everyone, Imagine you’re a sales manager overseeing multiple product lines across different regions. You're viewing your sales dashboard in Zoho CRM, which gives a powerful overview, but you often need to drill down to see how a specific product

    • Custom Related List anchor tag with tel protocol

      The following code worked great for about a year to create clickable tel and mailto links in a related list in the Deals module. Just this morning, it started displaying the HTML as text. For example: <a href='tel:8882490100'>8882490100</a> Zoho support

    • Zoho Creator Upcoming Updates - March 2025

      Hello everyone, We hope you’ve had the chance to explore Release Projection 1 for 2025! This month, we’re keeping up the momentum by bringing even more powerful features and enhancements to Zoho Creator. Here's what you can expect in March: App menu builder

    • How to create a contract using Zoho Contracts API and have the systemStatus directly assigned as "Active"?

      Hi Team, How do I create a contract using Zoho Contracts API and have the systemStatus directly assigned as "Active" instead of "Draft"? Currently, I'm able to create a contract but the systemStatus is "draft". Kindly help.

    • Python - code studio

      Hi, I see the code studio is "coming soon". We have some files that will require some more complex transformation, is this feature far off? It appears to have been released in Zoho Analytics already

    • Syncing with Google calendar, Tasks and Events

      Is it possible to sync Zoho CRM calendar, task and events with Google Calendar's tasks and events. With the increasing adoption by many major tool suppliers to sync seamlessly with Google's offerings (for instance I use the excellent Any.do task planning

    • Filtert products by multi select custom field

      Hello, this is seems like a must addition, why it can not be done now?

    • CRM quotes and sub forms.

      Recently upgraded to Enterprise CRM - now some added hopes/questions * In a subform in quotes, if I add a "Percent" field, called Overage for instance. I would expect it to allow me to enter a percent like "10%" and carry the percent forward to formulas

    • Is there a notification API when a new note is addeding

      Trying to push to Cliq, or email notification when there's a new note added in module. How to implement this?

    • Problem with WorkDrive and Vivo X200 Pro

      Hey there, after a long odyssey of searching for a new phone, several issues and defects with a phone from another brand and many reinstallations and transfers I stuck to the Vivo X200 Pro. So far, so great. Only thing not working is the Zoho WorkDrive,

    • Cambiar nombre de usuario

      Hola. Tengo una cuenta en zoho, por ejemplo Minombre @ midominio.es Y quiero cambiarlo a Miotronombre @ midominio.es Se puede cambiar??? Con la cuenta gratuita de zoho, cuantos nombres puedo tener en un dominio??? Gracias y buen dia

    • Can't add company logo and favicon as a superadmin

      I am logged in as the superadmin but can't add company logo and favicon - the fields are greyed out. Any idea as to what the problem could be?

    • Inquiry regarding B2B website through Zoho Commerce

      We are looking to build an online B2B customer portal for Consumer Goods primarily for order placement, with an e-commerce-style layout. Additionally, we would like to offer our customers features such as: 1.Viewing past orders and order updates 2.Accessing

    • ASAP Chrome Extension not loading

      We have ASAP enabled in Zoho Desk. I installed the ASAP Chrome Extension (Windows 10), but when I click the extension button while on our site, it never fully loads. I just get what's shown below.

    • Why is the Zoho portal not mobile friendly?

      I just got started with the portal and im sort of shocked how it looks. I already filled a hint/complaint about this. On the website you see a wonderful site with a modern design. Yet in real life its a mid 2000 look and feel. One major issue i see thats

    • New Asap Widget How to update my code

      I know you're still working on updating the documentation for calling the Asap Widget, the existing documentation is no longer valid. In the old 1.0 version I was able to do many things programmatically in javascript. I could open an article directly

    • Condition in templates

      Is it possible for me to add merge field conditionally in my templates. For example Dear ${Leads.Gender == "Male" ? "Sir" : "Ma"},

    • How to Dynamicaly display image in the Detailed View Report ?

      I have an "Add Employee" form that includes an image field for uploading an employee's profile picture from their local computer. In the "Apply Leave" form, I also have an image field where I want the employee's profile picture to be auto-populated based

    • Zoho Flow Custom Function to Register Sale in Zoho Thrive

      Hi Thrive team, I want to create a custom function which sends purchase information back into Thrive for Affiliate commission. I'm stuck on how to setup the connection, specifically creating an OAuth connection through https://api-console.zoho.eu/ Please

    • Sending User-centric reports to all users

      I would like to automate an e-mail report to all users that sends them a weekly e-mail listing their open Potentials.  I've created a Report that uses the ${CURRENTUSER} criterion and scheduled the report to send to several users, but they all receive

    • How do I add new line and format text in zoho desk ticket?

      I am generating a ticket via API and looking to update "description" field of ticket whenever I need. Is there a document where I can find supported formatting for description field on a ticket.  I need to find: Adding a new line and adding bold text,

    • Automation #6 - Prevent Re-opening of Closed Tickets

      This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Typically when a customer submits

    • Feature Request - Insert URL Links in Folders

      I would love to see the ability to create simple URL links with titles in WorkDrive. or perhaps a WorkDrive extension to allow it. Example use case: A team is working on a project and there is project folder in WordDrive. The team uses LucidChart to create a drawing/s for the project. The team member could create a link to the LucidChart drawing/s and allow WordDrive to truly be a repository for ALL the project documents, even those outside of WorkDrive. A folder is dedicated to a CRM account. A

    • ZOHO DESK ヘルプセンターの言語選択メニューの表示方法

      ZOHO DESK のヘルプセンターを構築し、多言語化設定をしました。 顧客のヘルプセンター画面右上に言語選択メニューが表示されないため、弊社の契約先会社に問い合わせましたが、「通常は多言語化をオンにすると表示するためCSS を触り過ぎではないか」 という指摘のみでした。 試行中ですが表示できません。 何か要因となる情報をお持ちの方がいましたらご教授いただけますと幸いです。 ↓の赤枠を表示したいのですが、表示できません。

    • How to reply to thread via API

      We have built a webapp for our customers that uses the Zoho Desk API to enable each customer to view their full list of tickets, view individual tickets and raise new tickets. The Zoho Desk API doesn't have the ability to reply to a ticket/thread. Replies

    • Email Builder Editor is not functioning or loading correctly

      Email editor function is not working or loading correctly in any template, new or old. Cleared my cache, restarted browser, problem unchanged.

    • Create Tasklist with Tasklist Template using API v3

      In the old API, we could mention the parameter 'task_template_id' when creating a tasklist via API to apply a tasklist template: https://www.zoho.com/projects/help/rest-api/tasklists-api.html#create-tasklist In API v3 there does not seem to be a way to

    • Issue in downloading the sent logs

      Hi Team, I'm unable to export the sent file for any email campaign. When selecting all fields, the system indicates that the document will be sent via email, but I haven't received it. At times, it shows a download option, but the file doesn’t get downloaded.

    • Integrate Google Chat with Zoho CRM for seamless collaboration

      Hello everyone, Sales is a team sport and sales reps have to be in constant communication with people inside and outside their organization. While email remains the most effective channel for important conversations, sales reps often collaborate via chat.

    • customers enter orders?

      Anyway we can let a customer into CRM and enter their own orders , no access to anything else except history reports, no access to any other contacts. Greg Aanes 2109 Queen Street Bellingha WA USA

    • Zoho Learn - URL Parameters for Externally Shared Articles?

      Hey Folks, Are there any parameters one can append to URLs for externally-shared articles? Specifically, can I add a parameter that hides the Manual name (use case being I want to embed the article in another webpage)? Also, can one password-protect an

    • Why Sharing Rules do Not support relative date comparison???

      I am creating a Sharing Rule and simply want to share where "Last Day of Coverage" (Date field) is Greater than TODAY (Starting Tomorrow). However, sharing rules don't have the option to compare a date field to a relative date (like today), only to Static

    • Post message to a channel using a simple one-line command!

      Hi Everybody! This post is all about posting a message in a Channel using cURL, Wget and PowerShell. cURL is a light-weight, command interface used to transfer data to a server. The steps are pretty easy!  The three most important points here are  Generating an Auth token Get your Channel Unique Name Form your message as a JSON structure Generating an Auth token To use the 'Messaging API' you'll need Cliq's authentication token from Zoho Accounts. Generate an auth token by hitting the below-given

    • Activity or History Log User Login

      Hi Everyone, I have Zoho Customer Portal, which has pages and reports. Is it possible to create 1 field such as true/false to find out users who have opened the customer portal? Like a kind of user activity log. Thank you so much.

    • How to associate a document sent in Zoho Sign with an deal in the CRM?

      Hi, often documents are loaded in Zoho sign and sent for signature. These sometimes are linked to a deal in the Zoho CRM and would be nice to see the status of the document within the CRM. I am aware of the integration, but that assumes that the document

    • Invalid Emails in CRM

      Is there a way to get a report or create a view that shows all email addresses that are invalid for any reason? I keep coming across them and want to ensure that they are flagged with users to update. This is on a custom module.

    • Add Custom Reports To Dashboard or Home Tab

      Hi there, I think it would be great to be able to add our custom reports to the Home Tab or Dashboards. Thanks! Chad

    • Associating an Email from CRM Email Parser to Contact Record via Function

      Is it possible to create a custom function that will associate email records from zCRM's Email Parser functionality to a contact record where specific fields match? Our use-case is that we have service providers using third-party event booking systems

    • Next Page