Kaizen #181 - Mandating Subform Data for Blueprint Transitions using Widget

Kaizen #181 - Mandating Subform Data for Blueprint Transitions using Widget



Hello Developers!

Welcome back to another week of Kaizen! 

This time, we are tackling a common challenge on how to enforce subform data from a different module before allowing a blueprint transition in Zoho CRM Deals module.

Many CRM workflows require checking and collecting related records' data across modules before advancing a deal, case, or order to the next stage. Zoho CRM Blueprint natively support subforms from Quotes, Sales Orders, and Invoices for the Deals module with the help of Associated Items in the transition settings. 

Let us explore how to mandate custom subforms' data from a different module for a blueprint transition.

Why Mandate Subform Data from a Different Module?

In Zoho CRM, subforms manage multiple data entries under a single parent record. However, certain blueprint transitions may depend on subform data from related modules, such as:  
  • A Deal's transition may depend on the document data stored in the associated Contact’s subform.
  • A Service Request requiring validation against a subform in the related Account before processing.  
  • A Loan Application requiring income proof from the Customer’s subform before approval.  
Since blueprint transition rules only validate fields within the same module, you can use a custom widget to check and update subform data across modules before proceeding.

Business Scenario: Insurance Deals Qualification

Consider Zylker, an insurance company, using Zoho CRM to manage customers and streamline processes. Their sales process follows this blueprint when a deal reaches the Qualification stage:
Insurance Sales Blueprint

Steps to Build a Blueprint Widget

Step 1 - Review Basics

Refer to our earlier Kaizen on CLI Installation, Creating a Widget Project, and Internal hosting of the same.

Step 2 - Develop your Widget

After setting up the widget project using CLI, implement the logic based on your business case.

Here’s the logic for the sample use case we are discussing:

Widget Execution During Transition
  • When the user clicks the Collect Requirements transition, the widget loads.
  • Using the PageLoad event listener, retrieve the current record's ID and module name.
  • Use the GET Records API via its JS SDK to fetch the Contact ID linked to the Deal. 
ZOHO.embeddedApp.on("PageLoad", function(data) {
      // Fetch the current page's record details
      const recordId = data.EntityId;
      const moduleName = data.Entity;
      ZOHO.CRM.API.getRecord({Entity: moduleName, RecordID: recordId})
        .then(function(response) {
          const record = response.data[0];
          console.log("Current Record Details:", record);
          // Fetch the associated contact ID
 contactId = record.Contact_Name.id;

Check and Collect Required Document Details
  • Using the Contact ID, run a COQL query using Connection JS SDK to check if each Document Category has at least one entry in the Document Details subform.
Notes
Notes
In invoke connection JS SDK, use param type 2 for the API request payload inside the parameter key and param type 1 for regular parameters.

Explore the Working with Connections help page and create a connection with the necessary scopes to invoke the COQL API.
  • If all four categories (Address Proof, ID Proof, Income Proof, Medical Report) have at least one entry, the widget allows the transition immediately.
  • If any category is missing, the widget prompts the user to enter the details in a table that mirrors the Document Details subform in the Contacts module.
// Make a query API call 
          const query = {
            "select_query": `select Document_Category,COUNT(id) from Document_Details where id is not null and Parent_Id='${contactId}' group by Document_Category`
          };
          ZOHO.CRM.CONNECTION.invoke("crm_oauth_connection", {
            method: "POST",
            url: "https://www.zohoapis.com/crm/v7/coql",
            parameters: query,
            param_type: 2,
            headers: {
              "Content-Type": "application/json"
            }
 }).then(function(response) {
     const data = response.details.statusMessage.data;
            if (response.details.statusMessage === "" || (data && data.length < 4)) {
              createSubformUI();
              document.getElementById('contentContainer').style.display = 'block';
            } else if (data && data.length === 4) {
              document.getElementById('messageContainer').style.display = 'block';
              // Enable the "Move to Next State" button if all files are already updated
              const nextStateButton = document.querySelector('.nextStateButton');
              nextStateButton.disabled = false;
              nextStateButton.style.backgroundColor = ''; 
            }
 })

Update the Contact's Subform
  • The user enters the document details and clicks the Save button in the widget. 
  • Since subform updates act like a PATCH request, any existing record IDs must be included in the update payload to retain them. To get the existing subform record IDs make a  GET Records API call via its JS SDK
async function getExisitingSubFormRecords(contactId) {
let exisitingRecords = [];
awaitasync function getExisitingSubFormRecords(contactId) {
let exisitingRecords = [];
await ZOHO.CRM.API.getRecord({ Entity: "Contacts", RecordID: contactId })
.then(function (response) {
const record = response.data[0];
console.log("Current Record Details:", record);

if (record.Document_Details)
{
record.Document_Details.forEach(function (document) {
exisitingRecords.push({id: document.id});
});
}
})
.catch(function (error) {
console.error("Error fetching records:", error);
});
return exisitingRecords;
} ZOHO.CRM.API.getRecord({ Entity: "Contacts", RecordID: contactId })
.then(function (response) {
const record = response.data[0];
console.log("Current Record Details:", record);
record.Document_Details.forEach(function (document) {
exisitingRecords.push({id: document.id});
});
})
.catch(function (error) {
console.error("Error fetching records:", error);
});
return exisitingRecords;
}
  • Clicking the Save button executes the following actions:
    -> Uploads the selected file to Zoho File System (ZFS) using the Upload File API through its JS SDK.
    -> Updates the Document Details subform in the associated Contact record by adding the file ID from the upload response and each row's entry using the Update Records API (via the Update Record JS SDK).
  • Once the subform is successfully updated, the widget allows the transition to next Blueprint state.
async function updateRecord(event) {
event.preventDefault();
// Collect user entries from each row
const rows = document.querySelectorAll('#documentsTable tbody tr');
const documentDetails = await Promise.all(Array.from(rows).map(async (row, index) => {
const documentCategory = row.querySelector('select[name="documentCategory"]').value;
const documentNumber = row.querySelector('input[name="documentNumber"]').value;
const documentName = row.querySelector('input[name="documentName"]').value;
const documentFile = row.querySelector('input[name="upload"]').files[0];
const fileId = await uploadFile(documentFile);
return {
Document_Category: documentCategory,
Document_Number: documentNumber,
Document_Name: documentName,
Upload: [
{
file_id: fileId
}
]
};
}));
// Get the existing subform records
const existingRecords = await getExisitingSubFormRecords(contactId);
// Merge the existing records with the new records
existingRecords.forEach(record => documentDetails.push(record));
// Prepare the payload for the update API call
const payload = {
id: contactId,
Document_Details: documentDetails
};
// Make the update API call
ZOHO.CRM.API.updateRecord({
Entity: "Contacts",
APIData: payload
}).then(function (updateResponse) {
console.log("Update response:", updateResponse);
const saveButton = document.querySelector('.saveButton');
saveButton.textContent = "Saved";
saveButton.disabled = false;
saveButton.style.backgroundColor = 'grey';
// Enable the "Move to Next State" button after saving
const nextStateButton = document.querySelector('.nextStateButton');
nextStateButton.disabled = false;
nextStateButton.style.backgroundColor = ''; 
})

Step 3 - Validate and Pack the Widget

  • Follow the steps given in the Widget help page to validate and package the widget.
  • Go to Zoho CRM > Setup > Developer Hub > Widgets and click Create New Widget.
  • Fill in the required details as shown in this image and ensure to select Blueprint as the widget type.
    Creating a Blueprint Widget

Step 4 - Associate the Widget with the Blueprint

  • Navigate to Setup > Process Management > Blueprint and open the Deals Blueprint created for this use case.
  • Click on the Collect Requirements transition.
    Associate Widget to a Blueprint Transition
  • In the During tab on the left pane, select Widgets and associate the newly created widget.
  • Publish the Blueprint to activate the changes.

Try it Out! 

A complete working code sample of this widget is attached at the bottom of this post for reference. 
 
Now, let us see how this Blueprint works from the Deals page:  
  1. All required document details are available: The widget validates the Contact’s subform and allows the transition.  



  2. Missing or incomplete document details: The widget prompts the user to enter the missing details, updates the Contact’s subform, and then enables the transition.  



This approach ensures that required subform data from another module is validated and captured before proceeding with a Blueprint transition.  

Would you like us to address any of your pain-points or have a topic to discuss? Let us know in the comments or reach out to us via support@zohocrm.com.

Until next time, Happy Coding! 

---------------------------------------------------------------------------------------------------------------------------------------

Additional Reading

---------------------------------------------------------------------------------------------------------------------------------------


Info
More enhancements in the COQL API are now live in Zoho CRM API Version 7. Check out the V7 Changelog for detailed information on these updates.

    • Recent Topics

    • Single and group checkboxes in Zoho Writer's fillable forms

      Hey Writer Fam, Are you making the most out of single and group checkboxes in fillable forms in Zoho Writer? Here is a handy tip to optimize your use of checkboxes, both single and group, and enhance your data collection process. Single checkboxes: Single
    • Collaborate efficiently with Zoho Writer's track changes feature

      Hi Zoho Writer Community, Zoho Writer's track changes feature is a simple, built-in solution that helps you and your team work together efficiently. Instead of juggling multiple versions of a document or building up a long email chain of comments, each
    • Zoho Writer's WordPress extensions

      Hey Zoho Writer users! Say goodbye to all your WordPress content publishing woes with Zoho Writer's WordPress extensions. Publish content with all your formatting and images, republish content when you update a document, and more—from a single window
    • Time-saving table hacks

      Hey Zoho Writer Community, Do you find yourself using a lot of tables in your documents? We're here to share some of our time-saving hacks that will help you work more efficiently, organize your data, and make your documents look neat and professional.
    • Automating document approval and signing with Zoho Writer and Zoho Sign

      Hey Zoho Writer Community! Here's another automation tip to make your processes more efficient! Question: Can I send a document for client approval first, then automatically send it for signing with Zoho Sign if they approve? Since it's the same person
    • Customization hacks in Zoho Writer - Part 2

      Hey community, We're back with some more tricks to personalize your documents, save time, and get in the zone when you work in Writer. Check out part 1 of this post if you haven't already. Let's dive right in! Document ruler units Imagine you're creating
    • Simplify your tax calculations with Zoho Writer

      Hello Zoho Writer Community! Tax season can be stressful, but with Zoho Writer, managing your income tax calculations becomes straightforward and efficient. Here’s an example of how you can use the tables and formulae of Zoho Writer to calculate income
    • Enhance document navigation with headings and TOC

      Hey Zoho Writer Community! We're back with some useful features in Zoho Writer that can simplify your document creation and navigation process. Let's dive right in! Check out our video on how to make the most of Zoho Writer's heading and table of contents
    • Use and download in PDF format of Zoho wirter Merge template using deluge

      Hello Zoho Developers. Here is some information about Zoho Writer. Writer is not just another online word processor, it's a powerful tool for editing, collaboration, and publishing. Even with its wide range of features, Writer's pared-down user interface
    • Customization hacks in Zoho Writer - Part 3

      Hello everyone, Welcome back to Part 3 of our customization tips in Zoho Writer! In this third installment, we'll be diving into some essential customization settings that can enhance your document creation experience. Sender email address in mail merge
    • Daytime saving timezones messing up writer pdf

      Hi, I need help for something I can't figure out. I created a Form to collect data and it is set up with my current Daylight Saving Time (GMT-3). This form is used to generate a contract (pdf Writer) with dates from an event that is being held in 4 months
    • Issue with locked content in Writer

      Hi, I have seen the documentation which outlines how to lock specific content within a Writer document so that it can't be modified by collaborators, but I have come across an issue. When the editor locks a paragraph for example, then a collaborator can't
    • Deprecation of certain URL patterns for published Zoho Writer documents

      Hi Zoho Writer users! We'd like to let you know that we have deprecated certain URL patterns for published and embedded documents in Zoho Writer due to security reasons. If the published or embedded documents are in any of these URL patterns, then their
    • [Announcement] Enhanced Merge APIs of Zoho Writer for automating document generation using Zoho Apps data

      Hi users, With the record_id parameter in Zoho Writer's Merge APIs, fields related to the given record id is automatically fetched from the Zoho app. You don't have to spend time manually mapping the records and fields in the Deluge code. Here is a sample
    • [Important announcement] Removal of Zoho Writer's DocuFiller Add-on

      Hi users, Effective 21st Feb. 2025, we will be removing the DocuFiller add-on for Zoho Writer's Fillable Templates. From that point on, the add-on's functionalities, such as sharing or publishing fillable forms for data collection and receiving submissions
    • Using Mail Merge Template to Print Documents with One Subform Record's Fields per Document

      Hello, We have a Mail Merge template created in Zoho Writer which is not able to perform the functionality which is currently required to automate the documentation task portion of our process. The CRM module we are primarily using is based on a "Loans"
    • Zoho Writer - Option to Export as .zdoc format

      I've noticed that it's not possible to export a Zoho Writer Document in the .zdoc format. Isn't zdoc, Zoho Writer's own format? My use case is that I sometimes need to create quite complex documents with floating elements, which sometimes need to become
    • Problem with Writer and Workdrive

      Hi team, I’m the super admin for our Zoho One org. WorkDrive is active, and Zoho Docs is deprecated for our org. However, Zoho Writer cannot connect to WorkDrive at all — we’ve cleared cache, tried incognito, and restarted several times. I was able to
    • Set to Review for all

      We are testing the use of Writer as part of an internal review process for statement of work documents and have found that when the document is changed from Compose to Review by one person, that is not reflected for all others who view the document. Is
    • I’ve noticed that Zoho Sheet currently doesn’t have a feature similar to the QUERY formula in Google Sheets or Power Query in Microsoft Excel.

      These tools are extremely helpful for: Filtering and extracting data using simple SQL-like queries Combining or transforming data from multiple sheets or tables Creating dynamic reports without using complex formulas Having a Query-like function in Zoho
    • Shortcut to fill a range of cells

      Good evening: I'm writing because I haven't been able to find a feature that allows you to select a range of cells, type in one of them, and then use a key combination to type in all of them. In Excel, the keyboard shortcut is Ctrl+Enter. I haven't found
    • stock

      bom/bse : stock details or price =STOCK(C14;"price") not showing issue is #N/A! kindly resolve this problem
    • SOME FEATURES ARE NOT IN THE ZOHO SHEET IN COMPARISION TO ZOHO SHEET

      TO ZOHO sir/maam with due to respect i want to say that i am using ZOHO tool which is spreadsheet i want to say that some features are not there in zoho sheet as comparison to MS EXCEL like advance filter and other Features which should be there in ZOHO
    • Zoho sheet for desktop

      Hi is zoho sheets available for desktop version for windows
    • Slicers are now available in Zoho Sheet—filter your data interactively

      At Zoho Sheet, we diligently track user requests and feedback. In line with this, based on extensive user requests, we've integrated Slicers to pivot tables and are delighted to announce its release. Slicers are interactive visual filters that have add,
    • Tip #18: 6 Trendlines and when to use them in your spreadsheet data?

      Charts are a great tool for visualizing and interpreting large chunks of data in spreadsheets. Zoho Sheet offers you 35+ chart options, along with AI-powered chart recommendations based on the data set you select. There are various chart elements that
    • Feature enhancement: Highlight rows based on a cell value

      Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to draw
    • Perform customized calculations with the new LAMBDA functions!

      We released the LAMBDA function in Zoho Sheet in 2021, enabling customized calculations inside predefined functions. Now, we're extending LAMBDA's capabilities with six new functions. Each of these functions applies LAMBDA to the given input, performs
    • No chat option

      Chat option is not supported.
    • Tip #17: Easily share spreadsheets with non-Zoho account users

      With efficient, collaboration-friendly options, Zoho Sheet is a popular choice among users. Sheet's external share links help you collaborate more effectively by sharing your spreadsheets with anyone outside your organization, including users who do not
    • Work seamlessly with Sheet's shortcuts without affecting the browser

      Navigating your worksheets and performing specific actions should be a quick and easy process. That's where keyboard shortcuts come in. Shortcut keys help you accomplish tasks more efficiently, eliminating the need to move away from the keyboard. What
    • Zoho Sheet for iPad: Improved UI, external keyboard support, and more!

      The portability and capabilities of the iPad have made it an essential device in the business world. With this in mind, we had launched an exclusive Zoho Sheet app for iPad, with device-specific improvements and enhanced usability. Now, we're improving
    • Updated font library: New font styles and custom font options in Zoho Sheet

      Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you can
    • The new Zoho Sheet for Android: Seamless UI and advanced features

      At Zoho Sheet, we know mobile apps have become the go-to platforms for creating, sharing, and storing information. And we understand the importance of an efficient and seamless app experience. We've been working hard on improving the overall user experience
    • Zia in Zoho Sheet now makes suggestions on conditional formats, picklists, and checkboxes

      Zia, Zoho's popular AI assistant, has been helping users succeed across Zoho applications since inception. In Zoho Sheet, Zia helps users efficiently build reports and analyze data with recommendations about data cleaning, charts, and pivot table. Also,
    • Introducing Data Bars: Graphically represent changes in data within the cells

      Conditional formatting has helped millions of spreadsheet users analyze and highlight their data more efficiently. In addition to the classic rules, color scales, and icon sets available in Zoho Sheet, you can now apply Data Bars, a convenient method
    • VBA attached to button no longer works on external shared sheet

      Hi - we have a Sheet that our clients use, which requires them to press a button once they've entered data. The button then triggers a flow via a webhook. The button works fine when editing within Zoho Sheet - however when shared externally it no longer
    • can I use zoho sheet for survey?

      Hi I wanna use zoho sheet for my ARY to know consumer better so i wanna have permission to do so
    • How to Avoid Impacting Other Users When Hiding Columns in Zoho Sheet

      Hi Team, We’re experiencing a challenge with the column-hiding feature on Zoho Sheet during collaborative sessions. When one user hides a column, it becomes hidden for all users working on the file, which disrupts others' workflows. In comparison, Excel
    • Tip #19 - Create checkbox tracker in your spreadsheet

      Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sample
    • Next Page