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>>

Access your files securely from anywhere

Zoho Developer Community

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
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
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
Kaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
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