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

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)
})
}; 
})

  1. In the above code snippet, the entity ID and entity name are fetched on page load.
  2. 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.
  3. 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.
  4. 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.
  5. 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.


SEE ALSO



      Zoho SalesIQ Resources



            Zoho TeamInbox Resources

              Zoho DataPrep Resources


                  Zoho CRM Plus Resources

                    Zoho Books Resources


                      Zoho Subscriptions Resources

                        Zoho Desk Resources

                          Zoho Projects Resources


                            Zoho Sprints Resources


                              Qntrl Resources


                                Zoho Creator Resources


                                  Zoho WorkDrive Resources




                                      Zoho Campaigns Resources

                                        Zoho CRM Resources

                                                    Design. Discuss. Deliver.

                                                    Create visually engaging stories with Zoho Show.

                                                    Get Started Now


                                                      Zoho Show Resources


                                                        Zoho Writer Writer

                                                        Get Started. Write Away!

                                                        Writer is a powerful online word processor, designed for collaborative work.

                                                                  有料プランをご利用の方