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

        • How to refresh/update module fields in

          Hi, I created a Workspace for CRM years ago. Since that time I've updated the layouts in several modules in CRM but Zoho Analytics displays the previous state fields only. How to refresh the module fields to reflect the actual state in Analytics? BR
        • Data update/pull from a specific field or module

          Hi Team, Currently, if I need a data from a newly added field on a product like Zoho CRM, I need to refresh the whole module to get the new field. This is taking much time for the data to be visible. If the data pull/refresh can be granularized to fetch
        • Lookup field in User module cannot look up to custom modules!

          Hi there, Expense has been great so far but it's sad to see that a simple thing such as allowing a lookup to custom modules from the Users module is not yet implemented. Hope to see this in the next release. Do you have any plan for that?
        • Trigger Zoho Cliq Channel Workflows for API Messages

          Dear Zoho Cliq Team, I hope this message finds you well. We have noticed that reminders or messages posted to Zoho Cliq channels via the API do not trigger channel-based workflows. This limitation means that any bot configured with a participation handler
        • Webhook Trigger for New Messages in Cliq Channels

          Hello, I would like to request a feature to enable webhook triggers when a new message is added to a Cliq channel. This functionality would allow us to seamlessly send important information from Cliq to other relevant systems. This webhook trigger can
        • Ability to Edit the "Current Job Title" dropdown field

          Current experience/Issue: When a user (candidate) uploads resume to Zoho Recruit candidate portal, some fields are prefilled with the info from the resume/cv correctly. However, we've observed that; 1. the "Current Job Title" dropdown field is usually
        • I'm getting an "Invalid_scope" error, even though I used an access token generated with the correct scope.

          I'm getting an "Invalid_scope" error, even though I used an access token generated with the correct scope. Here’s what I did in Postman: Generated the code to create an access token using the following URL: https://accounts.zoho.eu/oauth/v2/auth?scope=ZohoCampaigns.contact.UPDATE&client_id=<client_id>&response_type=code&access_type=offline&redirect_uri=https://1882-2-26-193-161.ngrok-free.app
        • Problem configuring/customizing sales pipeline steps

          Hello, I have created several sales pipelines with different stages in them. Unfortunately I forgot to properly configure these steps (conversion probability, forecast category). How can I modify and customize all these steps? Thnak you by advance M
        • workflow for bounced email gets triggered, but email is status = opened

          Hello, I have a workflow that sends me an email if outgoing email are bounced. Now I got some kind of this emails, but the corrosponding contacts have status = open at the email. Why this bounce-workflow is triggered? Reports > Email Reports > Bounce
        • Power of Automation :: Automatically start / pause / stop timer on task status update.

          Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-
        • Website Access Blocked (from one pc only) when attempting unattended access to any device

          Hello From one of my laptops I cannot access any remote device using unattended access. A Zoho Assist error page didplays 'Website Access Blocked. See attached.
        • Zoho Analytics to Zoho Sheets - automatic update?

          Hi all, If I create a zoho sheet from an Analytics Report or Analytics Data, is there a way for the zoho sheet to automatically update as the Report / Data in analytics updates?
        • Fixed Assets Register

          Thank you Zoho Books for adding fixed assets register. BUT there are certian tweeks that needs to be implemented. I found the following issues and seek improvements. 1) Fixed Asset Register Report in the Report Section has columns which are so much confusing.
        • Why can't I sync my Zoho Mail tasks and notes with my mobile device, and is there a way to fix this issue?

          I'm having trouble syncing my Zoho Mail tasks and notes with my mobile device. Despite following the usual steps, the tasks and notes don't appear on my phone. Is there a way to fix this issue? Regards, Adamjes, Tekskills India Pvt Limited, India.
        • Link to Desk tickets

          Hello, We are using Analytics to analyze data in Desk. Is there a way to embed a link to a ticket in reports? We'd love to be able to see the drill down data, and click a value in a result row that would launch the Desk Ticket in another window/tab. Thanks
        • Announcing new features in Trident for macOS (v.1.11.0)

          Hello everyone! Trident for macOS (v.1.11.0) is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Export emails. You can now export emails in the .eml file format
        • Zoho Sign Product updates - H2 2024

          Hello! We have almost come to the end of 2024! Here's a list of features and enhancements that went live in the later half of the year. NOM 151 certification Witness signing Formula, conditional, and custom fields Zoho Sign's extension for Bigin by Zoho
        • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

          Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers
        • 【Zoho CRM】Webフォームに関するアップデート

          ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 「Zoho CRM アップデート情報」の中からWebフォームに関するアップデートについて紹介します。 今回、以下2点のアップデートがありました。 ダブルオプトイン(2段階の同意確認)後の確認メッセージのカスタマイズ 登録から確認まで一貫したユーザーエクスペリエンスを顧客に提供するために、カスタマイズされた確認メッセージを作成できるようになりました。 ダブルオプトイン認証メールのカスタマイズ 顧客に最初から興味を持ってもらえるよう、パーソナライズされたメールを作成できるようになりました。ユーザーのブランドに合った本文を作成し、パーソナライズすることで、様々な顧客に対応することができます。
        • Converting Time and Time Zones

          Hi Everyone I am trying to convert a time Zone to the local time of the user. I am fetching some data from an API, and it is coming back in this format: 2024-12-09T16:49:23Z This is in UTC/GMTZulu time. I am looking to convert it to the user time. In
        • Tip of the week 34 - 5 ways to maintain your email list

          A proper email list often reflects the reach of an institution. This reach is coveted by all but achieved by some. We often forget about drawbacks and incline towards numbers. Success is often reflected by quality and not quantity. This simple message reverberates in maintaining a hygienic email list. Here are five tips which will help you maintain a proper email list.    Organic email lists   Non-stop competition can make us susceptible to shortcuts like buying and renting lists from third party
        • Whatsapp Limitation Questions

          Good day, I would like to find out about the functionality or possibility of all the below points within the Zoho/WhatsApp integration. Will WhatsApp buttons ever be possible in the future? Will WhatsApp Re-directs to different users be possible based
        • Can not send campaign

          Hi, I'm trying to send a newsletter to my subscribers, but seems is not working - or maybe I did some wrong steps re. upgrades. I'm the admin for this account, no other person is using Zoho for my campaigns and I did not access the platform during last
        • Multilingual Newsletter

          Hi, Can Zoho campaign give the possibility to create and send a campaign in English and French, giving the possibility to the person receiving it to switch from default language chosen for a campaign? thnaks
        • Re: constant rejected email form and to my account

          Hi, have had several rejection when I sent an email to Zoho account as well as other people have sent emails to my as your health Centre they have account and all aspects have been ejected. i wonder why the email are rejecting to and from. If you see
        • Top Menu Disappeared from Blog Page

          Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.
        • Add Comment/Notes to Each Action in Zoho Flow for Internal Documentation

          It would be great if Zoho Flow could introduce a field to every action where we can make an internal note about why we are doing something with a specific action. This is especially helpful if more than one person from the organization handles automation
        • Questions about To Do

          1. I created a To Do note on Android and there is a line sorting option in the options drop down menu. But I didn’t find such an option in the PC client. I really need this option. 2. Why is there no search in To Do on the PC client? 3. Why is there no
        • Tip of the week 03 - Sending emails in batches

          Today's marketers not only want their email marketing to be efficient, but also smart. For an email campaign, you may think you have all the essential elements for lead conversion—a big mailing list, an attractive template design, and the most-engaging message content, but after hitting the ‘send’ button, you may not get the expected conversions. Wondering why? Here’s one of the major reasons. Many marketers miss out on sending the email campaign the right way. Did you know that you should not be
        • Sites Speed and Performance Grades

          I noticed that there are no recent inquiries or complaints about load speed or performance issues with Zoho Sites websites. However, I wanted to understand what Zoho has done to ensure that speed remains optimized, images are compressed and lazy loaded,
        • Feature Request - Configurable Payment Icons + Pay Now link in email.

          The PAY NOW buttons (icons) on invoices are really small. It would be great if we could make that a big, colored icon. Better would be to add a button to emails as well. 
        • Survey end date extension

          Hi, Is there any way to extend the end date of my survey? I needed more time in finding respondents that is why I need to extend the end date of my survey. Help. Thanks
        • AI read notes or explanation

          It would be such a great feature to have AI voices be able to read our Notes or Explanation If not having the AI speak the notes at run time, how about a feature where inside of Zoho Show you can have it look at all the notes of all the slides and have
        • Help with technical problem

          Hello, I want to make it so I can say how many days are left until a date is reached, and for it to give me a status on if its VALID, EXPIRED, or ABOUT TO EXPIRE, but the problem I'm having is I want it to be compared to the date every day, not just the
        • How do I redeem credits?

          How do I redeem credits that are shown in billing section?
        • Managing Prepaid Hours for Consulting

          We are a consulting firm that bills clients a flat upfront annual fee plus an hourly rate and offer a discount for pre-paying a block of hours. Hours that surpass the pre-paid block are billed monthly at the normal rate. If there are any pre-paid hours remaining at the end of the project they are banked for future use. I'm not seeing a method of doing this in Projects/Books/CRM... thoughts?
        • Email Verification Tool

          Hi there, just came across this tool for Google Sheets https://www.producthunt.com/posts/email-verification-tool-for-google-sheets-2 How would one do to automatically verify/validate email addresses entered on the CRM in a similar way?
        • Get DealID when Deal Created?

          Hi What's the easiest way to grab the DealID when a deal is created?  I want to add it to a custom field on the deal. Thanks
        • ZOHO Widget SDK not loading in html

          I have this code below, I have imported the widgetsdk however I get the error shown in the image, I have tried many different ways of importing and initiating the function ZOHO but nothing is working. can someone explain what I'm doing wrong, if I am
        • Enhancements to Zoho Corp Help Center "Team Requests" View

          Dear Zoho Team, I hope this message finds you well. The ability to view both my tickets and my team’s tickets in the Zoho Corp Help Center is a fantastic feature, especially as the focal point for Zoho in our organization. However, we’ve encountered a
        • Next Page