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

        • CLIENT PORTAL (If clients can place orders directly on the portal)

          Zoho client portal is excellent. Everything is there except one thing. Client should be able to place orders directly on the portal. This would enhance the portal and end users will be extremely happy. This suggestion infact came from one of our client.
        • Portal Default View

          Hello! My company is about roll out portals for some users, but we were wondering if it was possible to set the Record Detail Page View to default to a custom view that we made. That way the information they need would be streamlined and easier to see.
        • Macro Email to be determined by a ticket field

          Hi, we are a commercial energy brokerage and are implementing Desk as our helpdesk tool to replace manual emails, personal whataspp and telephone. We have setup a macro rule when we can trigger an email, update ticket status and trigger a task.... but
        • Welcome Link Expired

          Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>
        • Zoho expense linked with Campaign instead of customers

          Hi, Is there a development planned for linked an expense or a report to a zoho campaign? Indeed, suppose I created a campain in which I add different clients (for example a trip to a foreign country where I meet 3 different clients), I would like this campaign to be linked to the expenses I have. Say I have a plane ticket, taxis and 1 hotel night, I would like those expenses to be linked to the 3 clients. With Zoho expense, it is not possible at the time (or maybe it is but I do not know how!). thanks
        • 🎄 Jingle, Mingle, and Automate: Spread Christmas Cheer with Zoho Desk Auto-Replies! 🎄

          Hello Everyone! Welcome to this week's episode of the Community Learning Series. Christmas is in the air, and I’m sure we can all feel the jingle and the mingle of the season! The folks at Zylker Techfix are no exception—they’re busy with holiday plans
        • Adjusting Physical Inventory

          Not getting very far with support on this one, they say they are going to fix it but nothings happened since November. Please give this a thumbs up if you would like to see this feature or comment if you have some insight. Use Case: Inventory set to be
        • Print PO receipt

          Hi I would like to print the PO receipt. There does not seem to be any way to do this. I track batch numbers and printing the PO does not show this. Only the receipt would show the details of the receipt. Currently I print the screen which does not have
        • Create a purchase order in vendor's currency

          I am having a problem working this out and would appreciate some suggestions. We have Books and Inventory working in tandem. We are in Australia, our product is sold in Australia in $A and obviously all our invoices, accounts and reports need to be in
        • Work Orders / Bundle Requests

          Zoho Inventory needs a work order / bundle request system. This record would be analogous to a purchase order in the purchasing workflow or a sales order in the sales cycle. It would be non-journaling, but it would reserve the appropriate inventory of
        • Getting error during inserting a record in form of zoho people using zoho api

          import requests import json # Set your access token and Zoho People API base URL access_token = '1000.XXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXXXXX' api_base_url = 'https://people.zoho.in/people/api/' # Set the form name and data to be inserted form_link_name
        • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

          I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the
        • Change script to add fields

          Hi, I have a custom function (writen by a different implementation company in the beginning) which I would like to edit to add a different field as well. Can't get it to work on my own though. - The script now adds the address fields to a new quote (needs
        • 1 API to all channel

          hi zoho team: I am the product manager of anywheel, we are planning to integrate zoho, we want to integrate multiple channels through 1 API, please can you send me the integration document and guideline?
        • Revamped Print in Zoho Sheet—customized for paper

          The latest enhancements to Zoho Sheet's Print settings allows you to print a worksheet or a selected range, with customizations that make the data comprehensible, even on paper.   Customize header and footer Make your spreadsheets meaningful with a relevant header and footer. You can now choose to display the file name, sheet name, current page number, total pages, date, and time as the header and footer in your print view. Besides the predefined elements, you can also give a custom text for header/footer.
        • Adding Bluesky channel

          Hello, Is Bluesky (AT protocol) soon added on Social ? Bluesky is being developped and is now open to anyone (no more invitation) Thank you
        • How Can i put a form in Zobot

          Hi,how can i integrate a form which has a multiple options to choose from.the form should be opened or displayed by zobot after it meets a requirement in the conversation. Thanks in advance !
        • Unified customer portal login

          As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is that
        • message on click of button

          Hi, i added insert task on 'Quick view' below  'Action'  of report just below 'Delete' button,  so i am trying to add a message on click of button that, "This item is now added into Pending Request" like this .... So, how can i achieve this ; because
        • Is it possible to disable Chat Waiting Time, or to make it indefinite?

          We have used many online chat services over the years. However, Zoho's SalesIQ appears to be the only one we've tried that has a mandatory time limit where we must respond to new customer queries. We are a small business so we have no dedicated staff
        • Is Drawing feature supported in zoho Sheets?

          Is there any option to draw arrows and some basic shapes such as circle , rectangle etc in zoho sheets? if so, can someone help me find it 
        • Access CRM Variables from Formula field

          Is it possible to use a CRM variable (defined in Developer Space -> CRM Variables) in a formula field for calculations ?
        • Client Script: $Client.refresh({ triggerOnLoad: true }); not triggering onLoad Client Scripts

          Hey friends! I'm trying to store a temporary var, refresh the page for the user, then check that temporary var and do some actions. Theoretically using the title's code: $Client.refresh({ triggerOnLoad: true }); should refresh the page and trigger on
        • Super Admin login to delete certain folders and passwords and clearing the trash folder, they are still appearing on my dashboard

          Hi Zoho Team, I need help with an issue I've encountered. Despite using the Super Admin login to delete certain folders and passwords and clearing the trash folder, they are still appearing on my dashboard. I would like to understand why this is happening
        • Pulling Specific Products from Sales Orders in Books to a CRM Record

          We currently process orders directly through our website (woocommerce) as well as through manual sales orders in zoho books. When an order comes through the website, all of the individual products from that order show up in the CRM record of that customer.
        • Automatically add a retainer to every estimate

          Hi all, I've been trying to find a way to automatically add a retainer at a set % to every estimate we create and send. So far I haven't been successful, does anyone know of a way to do this? Thanks,
        • Clear String field based on the value of other field

          Hello everyone, We would like to be able to clear a string field (delete whatever has been written and make it empty) when another field (picklist) is changed to a specific value. While I can empty other types of fields, I noticed that I can't do this
        • Custom Deal Name in Lead Conversion Mapping

          I know there are ways to change the name of a Deal after conversion using a custom function, so no need to repost that information. I would like to see the CRM Improved with Deal Name Customisation and I think the Lead Conversion Mapping page would be
        • Within the Basic KPI component in Analytics, it is impossible to set "next" day range as a filter

          Hi there, I am currently setting up a deal dashboard for the Sales team. While it is possible to filter deal records to show records that were created LAST X days only, it looks like a NEXT X days Closing date filter is not available. Would it be possible
        • Invoice status on write-off is "Paid" - how do I change this to "Written off"

          HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way
        • For each loop with available time slots

          I am very new to Deluge, and this question was unable to be answered by Zoho Creator tech support upon request. Task at hand: I have a Form with 4 fields: - Date Start - Date End - Dropdown: Time Start: contains time slots (12:00PM, 12:15PM, etc) - Dropdown:
        • Can we have Backorder Management ?

          Can we have Backorder Management ?
        • Converting Amazon Sales Order to Invoice

          Hi there, We need  advice on the Amazon integration with Zoho Inventory. Now, we want to convert all the Sales orders synced from Amazon to Invoices. We want also to include and record the Amazon fees associated with the sales (Amazon fees, FBA fees, Cost of Advertising etc.) However, Sales order only captures the sales proceeds (Gross Sales) in Zoho Inventory. Does anyone currently work with Amazon and can suggest how to correctly process the sales and Amazon payments through Zoho Inventory and
        • Zoho Inventory | Can't uncheck/turn off Advance Tracking

          Hi, I wanted to know if there's a way to turn off Advanced Tracking (such as Serial Number or Batch Tracking) for an item in Zoho Inventory. I’ve read that you might need to delete associated transactions and clear the opening stock to disable these features.
        • Landed Cost application to Vendor Bills from dropship Purchase Orders

          When trying to apply a Landed Cost to a Vendor Bill generated from a dropship Purchase Order, the Landed Cost pop-up window generates a message that "Landed Cost cannot be applied to Bills from dropship Purchase Orders" when trying to save the landed
        • Condition-based data sharing rules are now available in CRM

          Dear All,   We are excited to introduce a much awaited feature: condition-based data sharing rules. We'd love to explain more about this enhancement.   Specify record conditions in data sharing rules Data sharing rules enable you to share all the CRM
        • 2 serial numbers for 1 item (Mac address and Serial number)

          There is a way to track 2 serial number type for 1 Item. Ex: Some electronic devices have a MAC address and a serial number. I need to track those 2 numbers
        • Zoho Projects Roadshow, USA - 2024

          Dear Users, We are happy to announce the Zoho Projects Roadshows 2024 in USA. This is an excellent opportunity to learn more about Zoho Projects and gain in-depth knowledge of the advanced features. Our team will also discuss industry specific solutions
        • [Zoho Writer Webinar] Tips on collaboration control in Writer

          Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for the month of October 2023: Tips on collaboration control in Writer. This webinar will help you understand the various features available in Writer to control collaboration. We'll
        • [Zoho Writer Webinar] Working with tables in Zoho Writer

          Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for the month of September 2023: Working with tables. This webinar will help you understand the various ways you can use tables to meet your specific needs. The webinar will take
        • Next Page