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

      • Introducing Configure, Price, Quote (CPQ) in Zoho CRM | Public early access 2023

        Greetings Customers! We're excited to announce that the CPQ feature will soon be available in Zoho CRM and accessible to all accounts using the Professional, Enterprise, and Ultimate editions. We've opened this feature to select customers, and it'll be

      • how to edit the converted lead records?

        so I can fetch the converted leads records using API (COQL), using this endpoint https://www.zohoapis.com/crm/v5/coql and using COQL filter Converted__s=true for some reasons I need to change the value from a field in a converted lead record. When I try

      • Zoho Bookings <> CRM integration

        Hello Zoho community! We are enabling our Zoho Bookings <> CRM integration. What is the workflow if the integration detects that the contact already exists in the CRM? Does it create a duplicate record? Overwrite the record? Merge the record? (in this

      • Cannot reject empty expense report

        Hello, We are currently having issues with two empty expense reports where if we try to reject them, either manually or through the REST API, we get error 114016, which says some of the expenses have already been billed and must be removed. I'd appreciate

      • Use of Zia within Forms

        I have noticed that recently you have added Zia to help create forms from scratch. Would it be possible to add Zia functionality to free text fields for form submissions or if this is already on the roadmap an ETA for this please? We have a lot of field

      • Default in fields on Form B based on the user selection in Form A

        Hi Everyone, I have added an action button to a form report to bring up a new form based on user selection, see it indicated in red below: Then when the ne form loads, I want to default in some of the fields based on the record the user was selected on.

      • Auto-sync field of lookup value

        This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.

      • Last activity time is acting like last modified time

        When i edit the description or any field in the potential, account, contact and lead, the Last Activity Time is being updated like the Modified Time. This is messing all workflows and reports and we are unable to track real last time of activities like

      • Enhancements to the formula field in Zoho CRM: Auto-refresh formulas with the "Now" function, stop formula executions based on criteria, and include formulas within formulas

        Dear Customers, We hope you're well! By their nature, modern businesses rely every day on computations, whether it's to calculate the price of a product, assess ROI, evaluate the lifetime value of a customer, or even determine the age of a record. With

      • HEX/RGB Color Input in Visual Editor

        Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to improve the color selection options in the Pagesense popup editor. Current Limitation: Currently, to set text colors, users must move the color slider manually.

      • Add Comprehensive Accessibility Features to Zoho Writer

        Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current

      • CRM and Campaigns- tags not integrating?

        Hi! I am setting up an automation in zoho campaigns and it says the crm is integrated...but when I want to use a trigger of a certain tag I created for people in the crm to denote those who purchased, it doesnt have that tag available as an option in

      • Maximum limit of rows exceeded

        I am trying to add a row to a spreadsheets that has fewer than 60 rows. I keep getting an error message that says I have exceeded the maximum limit of 65,536 rows. Any ideas out there?

      • Can't change form's original name in URL

        Hi all, I have been duplicating + editing forms for jobs regarding the same department to maintain formatting + styling. The issue I've not run into is because I've duplicated it from an existing form, the URL doesn't seem to want to update with the new

      • 【参加無料】今年最後のZoho ユーザー交流会｜東京・大阪・名古屋で開催！ 活用事例＆ユーザー同士の情報交換

        ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 11月に東京、大阪、名古屋の3都市でZoho ユーザー交流会を開催します！ 毎回ご好評いただいている本イベントでは、実際の Zohoユーザーによるリアルな活用事例の共有や 参加者同士でノウハウを交換し合うグループワークを予定しています。 「他社の活用を参考にしたい」「Zoho をもっと使いこなしたい」方にぴったりの場です。 初参加の方もぜひお気軽にご参加ください！ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

      • Introducing parent-child ticketing in Zoho Desk [Early access]

        Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

      • Tip #7: 5 formas de mantener tus listas de correo electrónico

        Tips and Tricks #7, adaptado de Susmit Sen ¡Hola, comunidad! Esta semana volvemos con nuestros Tips and Tricks para Zoho Campaigns. En esta ocasión, voy a darte algunos consejos para mantener limpias tus listas de correo electrónico, y empezar el 2021

      • Mail Merge related Lists

        When I try to merge an associated list the fields do not have a checkbox to choose them as it does in the tutorials. Am I missing something? Any ideas would be appreciated.

      • create-a-purchase-receive API issues

        Hello all, I'm trying to use the create a purchase receive inventory API documented here (https://www.zoho.com/inventory/api/v1/purchasereceives/#create-a-purchase-receive) however when I do am getting the following error {"code":9,"message":"The purchase

      • Zoho Pagesense really this slow??? 5s delay...

        I put the pagesense on my website (hosted by webflow and fast) and it caused a 5s delay to load. do other people face similar delays?

      • Heatmap: Missing Content Elements - Zoho Page Sense

        Hi there, I'm trying out Zoho Page Sense to generate heatmaps for my Wix pages. My problem: Some parts of my Wix pages don't show on my heatmap, the heatmap is just empty there. Maybe Wix default lazy loading setting causes this error? Is there a way

      • Marketing Tip #3: Use social proof to build trust

        People trust people. Showcasing reviews, testimonials, or “bestseller” badges on your product pages can nudge hesitant buyers toward purchase. Try this today: Add one customer testimonial or highlight your top-selling product on your homepage. Or, do

      • Writing by Hand in "Write" Notes

        Hi there! I just downloaded this app a few moments ago, and I was wondering if there was a way to write things by hand in "Write" mode instead of just typing in the keyboard. It would make things a bit more efficient for me in this moment. Thanks!

      • Client scripts for Zoho Books ?

        Good day everyone, I am looking for a way to be able to interact with the Quotes and Invoices as they are being created. Think of it like Zoho client script in Zoho CRM. But for the life of me I dont see a way to do this. The issue with having function

      • Make CAMPAIGNS email look as simple as possible

        Hi there I'm trying to make my Campaigns email look as much like a normal email as possible. I'm a bit stuck with the "justification" of the email email block. Can I LEFT JUSTIFY the "whole email" to make it look "normal"? (Please see screenshot attached)

      • Zoho Sign Reminder email template

        Is there a template we can edit for the reminder emails? I don't see it in Settings / Choose a template

      • Object required error

        Hi, I am getting an 'Object required' error on the line Call HideColumnsOutsideRange(ws, startOfWeek, endOfWeek) when I run the ShowCurrentWeek macro but not when I run the ShowCurrentMonth macro. Any ideas? Regards, GW Option Explicit Sub HideColumnsOutsideRange(ws

      • Preview an upload PDF or File

        I have a form where the customer has to upload a file (normally PDF - never jpeg)  When in report view I want to be able to preview the uploaded file without having to download it.  If I click on the upload it downloads to my computer, I want to be able

      • How to filter emails by Reply-to field?

        I receive a very particular newsletter from an association A registered on a website W (that is used by many associations), and the emails fields are not great: the From just contains the generic website's W's email, while A is only mentioned in the Reply-to

      • How to invite friends on other social media platforms to one of my group chats in arattai?

        Hello, I have formed chat groups in arattai. I want to invite my friends on other social media platforms like WhatsApp/ FB to one of my groups. Different friends would be invited to different groups. How to share an invite link of one of my groups to

      • Line spacing

        I coudn't decrease the line spacing to space smaller then a single line. There is too much space between the lines that make the document look ugly. Please fix that. Liran. fonar

      • Google Fonts Integration in Pagesense Popup Editor

        Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance Zoho Pagesense’s popup editor with Google Fonts support. Current Limitation: Currently, Pagesense offers a limited set of default fonts. Google Fonts

      • Control Position of “X” (Close) Button in Popup Editor

        Hello Zoho PageSense Team, We hope you're doing well. We would like to request a customization improvement in the PageSense popup editor. Current Limitation: Currently, the position of the “X” (close) button is fixed and cannot be customized in the popup

      • Add Standalone “Save” Button in Pagesense Popup Editor

        Hello Zoho Pagesense Team, We hope you're doing well. We would like to request an important usability improvement in the Pagesense popup editor. Current Limitation: There is currently no dedicated Save button while building a popup. The only way to save

      • Text Direction Control in Pagesense Popup Editor

        Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to add text direction control in the Pagesense popup editor. Current Limitation: Currently, the popup editor does not provide native support for RTL (Right-to-Left)

      • Autosave in Pagesense Popup Editor

        Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance the Pagesense editor with an autosave functionality. Current Limitation: Currently, changes made in the Pagesense editor must be manually saved. In

      • Billing frequency is not displayed correctly.

        Hello There is an issue while displaying the billing frequency on a subscription quote. I am able to activate the subscription details and get this lovely overview: If I am adding a Plan which I charge quarterly, first of all it should be possible to

      • Creating Secret via Vault API

        Hi I am trying to create a secret through vault api.  This is the response I get. One thing I am not sure is how to decrypt the secretdata, how to get the secrettypeid? {     "operation": {         "result": {             "error_code": "",             "message": "Sorry, we are unable to process your request.",

      • Zoho CRM custom fields not showing in zoho creator

        Hi Team, I have created a Products form with Zoho CRM integration and connected it to Products module of CRM. But when I see the reports of Products in Zoho creator then I am not able to see custom fields of Products module. Only standard fields of Products

      • Is It Possible to Hide Menu Option from Main Navigation?

        Is it possible to hide a menu option, e.g. Admin, from the Main Navigation based on some criteria, e.g. login = zoho.adminuser

      • Next Page