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

      • Purchase of Fixed Assets

        How can I record the purchase of assets using zoho books? For example, I purchased 4 laptop for 100000 $ each and paid it through my bank account. How can I record this transaction and maintain track of how much of the assets I bought?

      • Where is the Fixed Asset Register?

        I am a Zoho One user for 18 months, using invoicing and CRM and now ready to migrate my books to Zoho Books. Where do I keep the fixed asset register for the equipment that I use in my business? I have a service based business with a lot of gear and business

      • Kaizen #168 - Incremental Authorization

        Welcome to this week's post in the Kaizen series. In this post, we will discuss Incremental Authorization. What is Incremental Authorization? Incremental Authorization is an OAuth strategy that allows a client to request specific authorization scopes

      • Configure Notes Title for Blueprint Transition

        It'd be very helpful to be able to configure note titles on blueprint transitions when requiring notes. This would help tie back the history of notes to the blueprint actions. We have some approval processes in our blueprint and require notes for the

      • An update to improve email delivery | Email Authentication & Relay

        Dear Zoho Recruit Community, We hope this message finds you well. This post is to inform you about an important update regarding the authentication of all email domains in your Zoho Recruit account. Effective 31st December, 2024, emails sent using email

      • Stop adding Default ID column to xls exports

        When anything is exported to xls, Zoho adds a column with an ID.  WE DO NOT WANT THIS COLUMN.  We use an automated report to a team.  We have our own tracking number.  1. This makes the report messy, it just pushes OUR data off to the right.  2. We have

      • Zoho cases and remote work api

        How to use zoho cases listing api? When i try to hit the endpoint specified in the docs , i get the error : the page you are looking for does not exist with a 401.

      • Calendly does not show scheduled Meetings

        I use Calendly as my standard booking tool, but no matter what I am doing, Calendly shows any appointment as free (when in fact there already is an appointment in CRM Calendar or Zoho Calendar). Drives me nuts - cannot go away from Calendly due to various

      • I want the currency in my account to be Mexican pesos.

        Hello, I am a Mexican citizen and live in Ukraine. When I registered to your system, it was seen that I was from Ukraine, so the default currency is Euro. This is causing me a problem. Please change the standard currency in my account to Mexican Pes

      • Year-End Wrap: Don't rewrite - Switch to Email Templates

        As we're half-way through December, now is the perfect time to start sending out festive greetings. Whether it is to your clients or your team, it is important that every mail is tailored to the recipient and feels genuine, which allows you to make better

      • 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 prepare to 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

      • How to view shared mailbox in Outlook

        How to view shared mailbox in Outlook or in another software

      • Necesito el código ZB para mi cuenta

        Hice cambio de servidor y no encuentro el codigo unico de cname.

      • Privacy error

        Privacy error on Chrome for all embedded forms and reports, this is a huge issue: "Your connection is not private Attackers might be trying to steal your information from creator.zohopublic.com (for example, passwords, messages, or credit cards). NET::ERR_CERT_COMMON_NAME_INVALID"

      • Automate Backups

        This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.

      • Customise Search Bar in CRM

        Is there a way to customise this search bar in the CRM to add fields?

      • Counting downloads of a file

        Hello Could anyone help me, I would like to use a custom script to count how many times a file contained in a record has been downloaded. Is that something that is possible in Creator? Thanks Estelle

      • Is there any way to prevent emails from being sent from zoho crm without pressing email opt out?

        When I left my desk yesterday I excitedly thought I had fixed my problem, by making use of the "Inactive" field ... However after contacting the support chat, they have advised to stop emails being sent I need to update the "Email Opt Out" field - which

      • New Search Function

        Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display which

      • New permissions for accessing emails sent via Zoho CRM

        Last modified on Nov 4, 2024: Permissions for accessing emails sent via Zoho CRM have now been extended to the IN DC. With this rollout, the feature is now available to all users across all DCs. Resources: Data sharing for emails, Configuring email compose

      • is it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?

        so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assign

      • Request for Alerts on Workflow and Function Changes.

        I want to get an alert whenever a new workflow or function is added or an existing workflow or function is edited. Is there any way to do that? I need to log all changes whenever updates are made or new ones are added.

      • Transfer Amount from One Vendor to Another Vendor

        One of the vendors, who has a balance with us, has closed the business and has started a new business; Now he wants me to transfer the outstanding from the old account to the new Vendor Account. I am trying to do this using Payment Settlement a/c, But

      • How to make Branch compulsory in Zoho Books invoice?

        How I make Branches compulsory in Zoho Books invoice?

      • Regarding GST Report Issue in Zoho Books

        Hi, Right now, the very important point from my end is this Zoho Books issue. Here, you can see that we have created the invoice with the items of account sales and expenses. The journal is also correct. The profit and Loss statement is also correct.

      • Default Ship To Address on Purchase Orders cannot be different than Organization Address

        Our organization address is not where we want shipments delivered, it is just a mailing address. We would like to change the Ship To address on our PO's so that by default it is our warehouse (not the mailing address). I understand that when creating

      • Function #57: Automatically group items in invoices based on categories

        Hello everyone, and welcome back to our series! As a business expands and new product lines are launched, it becomes important to organize the items for better inventory management. The Category field in Zoho Books helps here by allowing you to add and

      • Differences between Zoho Books and Zoho Billing

        Without a long drawn out process to compare these. If you were looking at these Books and Billing, what made you opt for one and not the other. Thanks

      • unable to import transactions into zoho books

        I download a csv with separate columns for deposit and withdraw. The sample has zero's in the blank spaces so I ensure mine does too. When I try to import it says the fields must have values greater than zero.

      • Zoho Forms Unable to Save Account Numbers with a Leading Zero

        We are using Zoho Forms to for rental applications. It is working well, except for one thing:  when a user enters their bank account information, and that account number actually starts with a ZERO (like 00123456) the Zoho form will return the value without

      • How to include GST% in PO amount?

        Currently when I raise PO, the basic price of the item is used. However, the GST is not calculated and added along with the basic amount. I have added a Custom field for GST in the PO but I need Zoho Inventory to calculate the GST amount and add it with the Basic price to give me the final PO price.

      • sitemap in zoho sites not updating

        I checked my sitemap and it has not added any updates. Do I have to generate one manually all the time or is zoho sites suppose to generate and update it?

      • I trying to connect our PM tool but API shows failure

        Hi All, in ZOHO CRM when an enquiry stage is moved to WON then I have created a rule to trigger POST URL to thrid party AP and then create a function for mapping with below code void automation.kytesfunctions(String enquiryId) { // Fetch enquiry details

      • Sample Ticket - Created from Bot Preview

        Why is Zoho desk adding bot created tickets?

      • Webhook data is not being received

        We’ve set up the webhook with a public URL that returns a 200 status on Postman. However, when we ran a test, we didn’t receive anything in the req.body object or see any data from the POST request. As a team of freshers still learning the ropes of development,

      • Number of Workflow runs

        Is there a way in Zoho desk to see statistics regarding workflows, rules and other automation objects? Would be nice for several reasons: You could ensure that your workflows are actually running. You could determine which ones weren't being used so you

      • Mail is no longer populating CRM contacts

        Hi! For the last few days, my mail hasn't been populating my CRM contacts. Even people I email multiple times per day. In fact, it keeps trying to send mail to myself. Notice, I started typing Amy and only got as far as, "Am" and it suggested myself.

      • Zoho Support is indeed shocking and difficult to get a response with

        All our business emails have an auto-foward set up on them so that they also go to our GMAIL accounts so that we receive them to the relevenat people. The emails are indeed auto forwarding and arriving to our GMAIL accounts but when you log into your

      • How to get a list of selected records into a button-function? Here is how!

        So, you might know already how to get a button on a page somewhere and perform actions with a function when pressed, but how about a button that only works with the records you selected in the list view? The button selected is a custom button in the modules

      • How to Add Break line / Return on button click

        I need to return the text concate with difference field from lead with line break i try "\r" ,"\n" "<br>" return "ali \r\n <br> baba"; None of above work.  i expected result something like this  ali baba but got this  ali \r\n <br> baba so, how can i

      • Next Page