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

    • Tip of the week #27: Edit personal calendars in Zoho Calendar.

      In Zoho Calendar, the personal calendars you create can be edited to make changes you need to make. Edit a Personal Calendar The following changes can be made to the personal calendar by editing it: Calendar title Calendar color Reminders and Description

    • Tip of the week #28: Show/ hide, enable/ disable and empty/ delete your calendars in Zoho Calendar.

      The popularity of online calendars has soared in recent years. It's used both for personal and professional reasons. Calendars have evolved into an effective productivity tool in our lives, from creating events for birthdays and anniversaries to scheduling

    • Tip of the week #30: Share calendars publicly in Zoho Calendar.

      In Zoho Calendar, calendars that are created under My Calendars can be shared publicly. Making your calendar public allows others to view it. When you need to share your calendar with a larger group, public sharing can help. You can restrict others from

    • Tip of the week #31: Share your personal calendars within organization.

      Keep your Organization members aware of what's happening. In Zoho Calendar, you can share your personal calendar with all the members in your organization using the Share with org option.When you enable org sharing for a particular personal calendar,

    • Tip of the Week #33: Appointment scheduler in Zoho Calendar.

      In Zoho Calendar, you can use the Schedule Appointment option to share your appointment request form with the public, allowing people to fill out the form to request an appointment with you. This form can be embedded on your website or blog. Visitors

    • Tip of the Week #34: Embed Calendars using Zoho Calendar

      You can make your calendars public and visible to the general public by embedding them in your websites/blogs using Zoho Calendar. You can use the embed code to add your own calendars to your website's/ blog's HTML code, and the calendar will appear on

    • Tip of the week #35: Migrate to Zoho Calendar from Google Calendar.

      If you are looking to move your Google Calendar events to Zoho Calendar, never worry about missing out the events from your Google Calendar. You can migrate the events from Google Calendar using the export option and import it to Zoho Calendar and manage

    • Tip of the week #36: Migrate to Zoho Calendar from Outlook Calendar.

      If you've been using Outlook calendar and looking to migrate to Zoho Calendar, you can seamlessly export your calendars from Outlook and import them into Zoho Calendar without losing any events, participants, and the reminders set for each event. To migrate

    • Shared calendar issues and duplications

      Apparently there was a calendar update?  Now when I schedule an event for a team member that has shared his calendar with me, the event makes me the organizer and adds the event to my calendar as well.  Previous to this "update" I would scheduled an event

    • Subscribed Calendar

      Hi i have subscribed to a calendar for Holidays in Canada it shows all the holidays perfectly but every one of them has the word Canada before the rest of the name is there a way to remove that word Canada? It takes up a lot of space in the square on

    • The year that was at Zoho Calendar 2023- Part 1

      Hello, amazing community members! Happy new year from all of us here at Zoho Calendar. As we begin the new year, we'd like to thank each and everyone of our community members for your unwavering support and love that you have shown for Zoho Calendar.

    • Zoho Calendar 2024: A Year in Review

      Hello, community members! Happy new year from all of us here at Zoho Calendar. As we turn the page to a new year, we extend our heartfelt gratitude to every member of our Zoho Calendar community for your continued support and enthusiasm. Your feedback

    • Zoho Calendar not syncing correctly with personal Google Calendar

      Coming to this forum as Zoho Calendar support team is not responding, any more. For the past 8 weeks, I have been having an issue with Zoho Calendar not syncing with my personal Google Calendar correctly. I subscribed to Zoho Calendar iCal in my personal

    • MTA - BAD IP reputation by outlook/hotmail

      Messages to Microsoft email servers are bouncing back due to poor reputation. Message: 4.7.650 The mail server [136.143.188.206] has been temporarily rate limited due to IP reputation. For e-mail delivery information see https://postmaster.live.com (S775)

    • Zeptomail API error 500 internal server error

      Hi Everyone, getting this eror continuously! Can anyone please guide around the same! Zeptomail API error 500 internal server error Best Regards

    • Waiting multiple days to buy credits, causing my website to suffer

      So I own a fairly large website that gets a lot of registered users. I use transmail send activation emails, and also forgot password emails. I sent an email to zoho's presales team when I was only at 4K/10K emails sent, hoping to buy more credits before

    • Follow up

      Hello, I sent a message 2 days ago but I don't receive any response and I cannot find my ticket here. this is the ticket: Your ticket has been created with the ticket ID 68925465 and subject "Fwd: Fishing-alert" looking forward to seeing your response.

    • What's new in TransMail!

      Note: TransMail is now ZeptoMail. Click here to know more. Hello again, everyone! We've recently crossed the 6 months mark of TransMail's launch. In this time post our launch, we have been constantly working on updating our platform and adding new features

    • June 2021 in TransMail!

      Note: TransMail is now ZeptoMail. Click here to know more. Hello again, everyone! Hope you and your loved ones are doing well. If you're doing less than fine, we truly hope that things only get better for you.  We've had a few updates in the past month

    • TransMail has a new name—ZeptoMail!

      Tried navigating to TransMail's community forum but see a different name now? That's because TransMail has a new name. TransMail is now ZeptoMail! As we’ve grown from an internal service used mainly by other Zoho products to an up-and-coming competitor

    • July 2021 in ZeptoMail!

      Note: TransMail is now ZeptoMail. Click here to know more. Hello again, everyone! Hope you and your loved ones are doing well.  We've had a few updates in the past month in ZeptoMail—some new features and some important announcements. Take look at what

    • Send Email From the ZeptoMail BY API

      What is Zeptomail:- Transactional email service with reliable and fast delivery How we can Create a Connection for Zeptomail in Zoho CRM Go to the Setup Click on Connection Enter Connection Details:- Generate Consumer Key & Consumer Secret Using Zoho

    • Customer email on Opencart 3

      When I place an order, 2 emails are sent: 1) administrator 2) to the user The administrator receives a beautiful letter, but the user receives a damaged letter (see screenshot). What could be the problem?

    • [Zoho Writer Webinar] Learn how to simplify your day-to-day HR operations

      Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for June 2024: Learn how Zoho Writer can simplify your day-to-day HR operations. This webinar will focus on how to automate your entire hiring process and generate various types of

    • [Announcement] Insert image from URL changes in Zoho Writer

      Hi Zoho Writer users! We'd like to let you know that we've changed the behavior of the Insert image from URL option in Zoho Writer for security reasons. Earlier behavior Once you inserted an image URL in a Writer document, the image would be fetched from

    • [Zoho Writer Webinar] Learn how to simplify your HR operations: Part 2

      Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for July 2024: Learn how Zoho Writer can simplify your HR operations: Part 2. This webinar will focus on how Zoho Writer can help HR teams streamline and automate their entire hiring

    • [Webinar] Simplifying document workflows in financial services with Zoho Writer

      Creating, sharing, and distributing complex documents are constant challenges in the financial services industry. That's why our next webinar is focused on how to simplify these document workflows. Join us on April 10, 2025, for a Zoho Writer webinar

    • Dynamic Signature - Record owner

      Hi everyone, I’m using Zoho Writer merge templates from Zoho CRM and have two questions: Owner signature: How can I automatically insert the CRM record owner’s signature in the merged document? I’m not sure where this signature is stored or how to reference

    • Writer sing up problom

      Zoho writer sing up prolom face

    • Unable to copy into a new document

      Whe I create a new Writer doc and attemp to copy and past I get this message. The only way to copy into a document is I duplicate an existing document, erase the text and save it under a different name and then paste the information. Not ideal. Can you

    • 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

    • [Webinar] Zoho Writer for the manufacturing industry

      Creating, sharing, and distributing complex documents are constant challenges in the manufacturing services industry. That's why our next webinar is focused on how to simplify these document workflows. Join us on May 8, 2025, for a Zoho Writer webinar

    • [Webinar] Live demos and user Q&A with Zoho Writer product experts

      Join us on June 12, 2025 for live demos based on your use cases and real-world scenarios raised via form. This is also an opportunity to get your questions answered directly by product experts from the Zoho Writer team. Webinar agenda Live demos based

    • [Webinar] Zoho Writer for SCM and logistics

      Creating, sharing, and distributing complex documents are constant challenges in the SCM and logistics industry. That's why our next webinar is focused on how to simplify these document workflows. Join us on Jul 10, 2025 for a Zoho Writer webinar designed

    • Automate insurance document workflows with Zoho Writer

      Insurance companies have to deal with creating and managing complex documents and forms, such as policy applications, explanation of benefits documents, brochures, renewals, and claim forms. Handling all of this manually is hugely time and effort intensive,

    • [Webinar] Automate sales and presales workflows with Writer

      Sales involves sharing a wide range of documents with customers across the presales, sales, and post-sales stages: NDAs, quotes, invoices, sales orders, and delivery paperwork. Generating and managing these documents manually slows down the overall sales

    • Zoho Writer's built-in citation and bibliography generator

      Hey researchers and writers! Do you manually format citations and bibliographies, spending hours jumping between apps and tabs? If so, then check out Zoho Writer's built-in "Citations and Bibliography" feature. Imagine you're writing a thesis on the future

    • 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

    • Next Page