Extension Pointers - JS SDK Series#7: Managing records, handling attachments, and adding notes from a widget

Zoho CRM JS SDK supports APIs that help manage records, attach files, and add notes to a record, all from within the widget itself. The term record refers to the detailed information about an individual entity in the Zoho CRM module. Attachments and notes are additional information that add extra context to the record details for a variety of purposes, including sales, SLAs, proofs, etc.

Let's first look at the syntax of each API followed by a working example demonstrating the purpose of the different APIs.

ZOHO.CRM.UI.Record

Syntax:

This API can help with multiple functionalities in managing records, such as:

➤ ZOHO.CRM.UI.Record.create(data) - open CreatePage of the specified Record.

➤ ZOHO.CRM.UI.Record.edit(data) - open EditPage of the specified Record.

➤ ZOHO.CRM.UI.Record.open(data) - open DetailPage of the specified Record.

Here, data refers to the configuration object of 'object' type.

Configuration Object

Name	Type	Description
Entity	String	SysRefName of the module.
RecordID	String	The ID of the record to open or edit.
Target	String	Allowed values "_blank". To open the create/edit/open page of the record in a new tab.

ZOHO.CRM.API.attachFile

This API is used to attach files to a record in a module.

➤ The attachment will appear under the 'Attachments' related list section of the record.

➤ The maximum attachment limit for a record is 100MB.

➤ All attachment formats are supported except exe files.

➤ The API can be used in all modules that support the 'Attachments' section.

Syntax:

ZOHO.CRM.API.attachFile(config)

Here, config refers to the configuration object.

Configuration Object

Name	Type	Description
Entity	String	SysRefName of the module.
RecordID	String	The record ID for which the attachment is to be associated.
File	Object	File object to be attached.

The file object holds two properties.

Name	Type	Description
Name	String	The name of the file.
Content	Object	The file content.

ZOHO.CRM.API.addNotes

This API is used to add notes to a specific record in a module.

Syntax:

ZOHO.CRM.API.addNotes(config)

Here, config refers to the configuration object.

Configuration Object

Name	Type	Description
Entity	String	SysRefName of the module.
RecordID	String	The record ID for which the note is to be associated.
Title	String	The title for the note.
Content	String	The note content.

Consider a simple scenario where a user is running an ecommerce store using their Zoho CRM account. Their store offers a wide range of hardware and software products. There are also certain discount deals that are offered for several products in accordance with their sales strategy. Let's say that, after a good turnover, the user wants to delink a product from a certain discount deal. Besides delinking, the user would like to attach some of the relevant files and add notes to the deal in order to provide additional information on the reason for the delinking. The user would also like to view the full details of the product before delinking it from the deal. Let's see how all these features can be done from a widget.

Record.js code snippet:

Util={};

var EntityIds;

var EntityName;

var temp;

//Subscribe to the EmbeddedApp onPageLoad event before initializing the widget

ZOHO.embeddedApp.on("PageLoad",function(data)

{

EntityIds=data.EntityId[0];

EntityName=data.Entity;

//Getting the product-related details of the deal using getRelatedRecords API

ZOHO.CRM.API.getRelatedRecords({Entity:EntityName,RecordID:EntityIds,RelatedList:"Products",page:1,per_page:200})

.then(function(data){

temp=data;

rec=data.data;

console.log(data);

$('#prodidlist').empty();

//Looping through the products

for (i = 0; i < rec.length; i++)

{

/*populating the prodidlist list with the product names of all the products associated with the deal*/

prodid=rec[i].id;

prodname=rec[i].Product_Name;

var prodidlist = document.getElementById("prodidlist");

var option = document.createElement("OPTION");

option.innerHTML = prodname;

option.value = prodid;

prodidlist.appendChild(option);

}

})

/*Viewing the complete details page of the selected product from the prodidlist using the record open API*/

Util.view=function()

{

ZOHO.CRM.UI.Record.open({Entity:"Products",RecordID:document.getElementById("prodidlist").value,Target:"_blank"})

.then(function(data){

console.log(data)

})

}

Util.delink=function()

{

//Delinking the product selected from the product list and thereby dissociating it from the deal

ZOHO.CRM.API.delinkRelatedRecord({Entity:EntityName,RecordID:EntityIds,RelatedList:"Products",RelatedRecordID:document.getElementById("prodidlist").value})

.then(function(data){

console.log(data)

})

var filesToLoad = document.getElementById("fileInputTag").files;

var filename=filesToLoad[0].name;

if(filesToLoad)

{

var file = filesToLoad[0];

ZOHO.CRM.API.attachFile({Entity:EntityName,RecordID:EntityIds,File:{Name:filename,Content:file}})

.then(function(data){

console.log(data);

});

}

// Adding the input value provided as a note to be associated with the deal

ZOHO.CRM.API.addNotes({Entity:EntityName,RecordID:EntityIds,Title:"Delink Notes",Content:document.getElementById("notes").value}).then(function(datas){

console.log(datas);

});

ZOHO.CRM.UI.Popup.close()

.then(function(data){

console.log(data)

})

};

})

In the above code snippet, the entity ID and entity name are fetched on page load.
The retrieved ID and entity name are then passed to the 'getRelatedRecords' API to fetch the complete 'Products' related list details of the specific deal.
The products associated with the deal are then populated into a select list so the user can choose the product they would like to delink.
The ZOHO.CRM.UI.Record.open API is used with the target property set to "_blank" to open the detail page of the chosen product. This displays the complete details of the product in a new tab upon clicking the 'View product details' button in the widget.
Finally, upon clicking the 'Delink' button, three functions occur. Namely:

The chosen product is delinked from the associated deal.
The attachment file chosen is attached and will be available in the 'Attachments' section of the record using the ZOHO.CRM.API.attachFile API.
The notes provided by the user will be added to the notes section using the ZOHO.CRM.API.addNotes API.

The product is now delinked from the deal. The attachment is added under the 'Attachments' section, and the note is added under the 'Notes' section.

As stated in the above scenario, the user can choose the product they want to delink, attach a document, and add a note that is relevant to the delinking process, all from within a widget.

There are multiple APIs in the Zoho CRM JS SDK that serve and help to build extensions efficiently. Please refer to our JS SDK series for posts on other API functionalities and keep track of this space for more information.

Extension pointers: Working with widgets to power-up extension capabilities (Part-2)

Extension Pointers JS SDK Series #3: Delinking a related record in a Zoho CRM module from a widget

<<Previous

Next>>

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Nanditha Somasundaram Somasundaram

Sticky Posts
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes
Extension pointers: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers: Extend end-user benefits and allow personalization by implementing extensions with custom actions
From our earlier post on custom actions, we know that we can create templated actions, share them with end users, and allow them to reuse those actions to achieve personalized outcomes. In this post, we'll look at how custom actions make it easy for users
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select