Kaizen #95 How is a Widget used in a Blueprint?

Kaizen #95 How is a Widget used in a Blueprint?

Hey folks!!
Let's continue the discussion from Kaizen #23 and focus on exploring the concept of Widgets in Blueprints.

What are Widgets?

Zoho CRM's widgets are custom components that you can add to your Zoho CRM system to extend its functionality, provide additional data, or integrate with external services. These widgets can be built using Zoho's widget SDK (Software Development Kit), which allows developers to build and integrate custom applications directly into Zoho CRM.

What are Blueprints?

Blueprints in CRM help you design processes with pre-defined conditions and enable the system to follow a specific flow. A record can only move to the next state if it satisfies the given condition; otherwise, it remains in the same state. Blueprints help in converting leads into customers and developing your business. A transition button acts as an intermediary between two states, holding the condition and facilitating the flow within the system.

For instance, when a person approaches a bank for a loan, the bank needs to check the person's previous loan's status. They need to verify whether he has any existing loans or any defaults from other banks or from the same bank. The bank will provide loans based on the person's current and past borrowing behaviours. This can be achieved using widgets in blueprints.

The Flow Representation

                                              
Let's consider that a person named Shane has applied for a loan. His details will be in the "Loans" Module in the CRM. The bank employee responsible for processing the loan applications will review Shane's credibility and decide whether to approve or reject the loan.
  • If Shane has not settled any of his previous loans and has a bad repayment history, the bank will decline his new loan request, and the record will be marked as 'Rejected' state.
  • If there are few current active loans with a good repayment history, the bank will approve the loan, and the status of the newly sanctioned loan will be 'Active.'
In this use case, we cannot use any inbuilt CRM's blueprint options to show a popup of Shane's previous loan details and make a decision. Therefore, we will associate a custom widget to assist the banker in making the decision during the Blueprint transition.

How do I create a widget in the Blueprint?

  1. Go to Setup > Developer Space > Widgets.
  2. Click Create New Widget.


Note : The widget is hosted internally (Zoho) in the post. Please refer to this page to view the source code.

Sample Codes

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>User Details</title>
  5.   <link rel="stylesheet" href="index.css">
  6.   <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script> 
  7. //Import this JS SDK to use SDK methods
  8.   <script src="index.js"></script>
  9. </head>
  10. <body>
  11.   <div class="container">
  12.     <h1>User Details</h1>
  13.     <div class="details">
  14.       <h2>Basic Details</h2>
  15.       <p><strong>Name:</strong> <span id="name"></span></p>
  16.       <p><strong>Email:</strong> <span id="email"></span></p>
  17.       <p><strong>PAN ID</strong> <span id="panId"></span></p>
  18.       <p><strong>Address</strong> <span id="address"></span></p>
  19.       <!-- Add more fields as needed -->
  20.     </div>
  21.     <div class="details">
  22.       <h2>Current Loan Requests</h2>
  23.       <p><strong>Loan ID:</strong> <span id="loanId"></span></p>
  24.       <p><strong>Loan Type:</strong> <span id="loanType"></span></p>
  25.       <p><strong>Amount:</strong> <span id="amount"></span></p>
  26.       <!-- Add more fields as needed -->
  27.     </div>
  28.     <div class="loan-history">
  29.       <h2>Loan History</h2>
  30.       <div class="loan-history-table">
  31.         <table>
  32.           <thead>
  33.             <tr>
  34.               <th>S. No</th>
  35.               <th>Bank Name</th>
  36.              .
  37.              .
  38.             .
  39.           </tr>
  40.           </thead>
  41.           <tbody id="loanHistoryTableBody">
  42.             <!-- Loan data will be dynamically populated here -->
  43.           </tbody> 
  44.         </table>
  45.       </div>
  46.     </div>
  47.   </div>
  48.   <div class="buttons">
  49.     <button id="button1" onclick="closePopup()">Decline</button>  //When the decline button is clicked, a method is called to close the widget pop-up
  50.     <button id="button2" onclick="moveToNextState()">Approve</button> //When the Approve button is clicked, a method is called to move the record to the next state.
  51.   </div>
  52. </body>
  53. </html>
To use the Zoho CRM APIs in the widget, you can use the API helpers provided in the JS SDK.

index.js

  1. ZOHO.embeddedApp.on("PageLoad", async function (data)
  2. //This event is used to get the page load data
  3.  {
  4.     console.log(data);
  5.     const loanRec = await ZOHO.CRM.API.getRecord({
  6.         Entity: data.Entity, // Here, 'Entity' is 'Loans Module'
  7.         RecordID: data.EntityId //The 'ID' of the record
  8.     });
  9.     console.log(loanRec.data[0].Recipient.id);
  10.     const contactRec = await ZOHO.CRM.API.getRecord
  11. //gettind contact details
  12. ({
  13.         Entity: "Contacts",
  14.         RecordID: loanRec.data[0].Recipient.id
  15.     });
  16.     const loanHistory = await ZOHO.CRM.API.getRelatedRecords
  17. //getting related records of the contact
  18. ({
  19.         Entity: "Contacts",
  20.         RecordID: loanRec.data[0].Recipient.id,
  21.         RelatedList: "Loan_History",
  22.         page: 1,
  23.         per_page: 200
  24.     })

  25. ZOHO.embeddedApp.init(); 
  26. //used to initialize widget
  27. function moveToNextState()
  28. {
  29.     ZOHO.CRM.BLUEPRINT.proceed(); 
  30. //ZOHO.CRM.BLUEPRINT.proceed() function from JS SDK, which helps in making the blueprint transition
  31. }
  32. //method used to move a record to the next state

  33. function closePopup(){
  34.     ZOHO.CRM.UI.Popup.close();
  35. }
  36. //method used to close the widget
  37. function displayBasicDetails(data) {
  38.     console.log(data);
  39.     document.getElementById('name').textContent = data.Full_Name;
  40.     .
  41.     .
  42. }
  43. }

Associating a Widget to the Blueprint

Add the hosted 'Check Profile' widget in the 'During' transition in the blueprint.
                  
Click Add > Widgets - The list of available widgets in your CRM will be displayed. 
States in this Blueprint:
  • Approval Pending : It is the default status of a newly created record in the loan module.
  • Active: If a person has a good loan repayment history, then the loan application will be sanctioned as per the banker's decision, and the status for the newly created loan will be 'Active'.
  • Closed : When a current loan is closed by the bank, the record's status will be 'Closed.'
  • Default : When any previous loans remain unsettled and the person is unavailable when a bank approaches for repayment on or after the payment due date, it is considered a fraudulent act. Such loans will be marked as "default". In such cases, the bank will decline the current loan request, and mark it as 'Rejected'.
  • Rejected : If a person has a bad repayment loan history or defaults, the bank will decline the loan, and the record's status will be 'Rejected'.
The below GIF represents a set of records waiting for approval from the bank under the Approval Pending custom view.

When the banker accesses the individual loan request, he/she will see the 'Check Profile' transition button. Using this transition, the banker can view the custom widget that displays the loan history and other details required to make a decision.
Here, the banking personnel can approve the loan by verifying the details. If the user has a goo   score and repayment history, the record will move to the Active state (newly requested loan).

If the applicant possesses any existing outstanding loans, lacks sufficient collateral, fails to provide verifiable income proof, or exhibits a history of defaults, the bank will decline the request, and the record will be moved to 'Rejected' state. This will help a bank to avoid fraudulent acts.


How will the CRM fetch a person's loan history from a third-party website?
To retrieve a person's current and previous loan status from a third-party website, banks employ different processes in different countries. 
The credit score will be tracked based on different Unique IDs issued by each country to their citizens. These details can be fetched from their respective websites using widgets.
For example :
  • USA - Social Security Number.
  • UK - The National Insurance Number.
  • Ireland - The Personal Public Service Number.
  • India - Permanent Account Number, etc.
We hope you found this post useful. Let us know your thoughts in the comment section or reach out to us at support@zohocrm.com
Cheers!!!
Further Reading

    Access your files securely from anywhere









                          Zoho Developer Community




                                                • Desk Community Learning Series


                                                • Digest


                                                • Functions


                                                • Meetups


                                                • Kbase


                                                • Resources


                                                • Glossary


                                                • Desk Marketplace


                                                • MVP Corner


                                                • Word of the Day


                                                • Ask the Experts





                                                          Manage your brands on social media



                                                                Zoho TeamInbox Resources



                                                                    Zoho CRM Plus Resources

                                                                      Zoho Books Resources


                                                                        Zoho Subscriptions Resources

                                                                          Zoho Projects Resources


                                                                            Zoho Sprints Resources


                                                                              Qntrl Resources


                                                                                Zoho Creator Resources



                                                                                    Zoho CRM Resources

                                                                                    • CRM Community Learning Series

                                                                                      CRM Community Learning Series


                                                                                    • Kaizen

                                                                                      Kaizen

                                                                                    • Functions

                                                                                      Functions

                                                                                    • Meetups

                                                                                      Meetups

                                                                                    • Kbase

                                                                                      Kbase

                                                                                    • Resources

                                                                                      Resources

                                                                                    • Digest

                                                                                      Digest

                                                                                    • CRM Marketplace

                                                                                      CRM Marketplace

                                                                                    • MVP Corner

                                                                                      MVP Corner







                                                                                        Design. Discuss. Deliver.

                                                                                        Create visually engaging stories with Zoho Show.

                                                                                        Get Started Now


                                                                                          Zoho Show Resources

                                                                                            Zoho Writer

                                                                                            Get Started. Write Away!

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

                                                                                              Zoho CRM コンテンツ






                                                                                                Nederlandse Hulpbronnen


                                                                                                    ご検討中の方




                                                                                                          • Recent Topics

                                                                                                          • Canvas View in Zoho Recruit

                                                                                                            Is it possible or would it be possible to have the new 'Canvas View' in Zoho Recruit?
                                                                                                          • Adding Reports to Portals

                                                                                                            Is there a way to add Reports to portals so only the user can see report templates relevant to them?
                                                                                                          • Update on the client portal URL for Guest users

                                                                                                            We’re updating the way Guest users access their Connect network. As part of this change, all client organization portals used by Guest users will now be accessible through a dedicated domain specific to each data center. The access URLs mentioned here
                                                                                                          • Preserve Ticket Issue Mapping When Migrating from Jira to Zoho Projects

                                                                                                            Hello Zoho Projects Team, We hope you are doing well. We are currently exploring a full migration from Jira to Zoho Projects, and we identified a critical limitation during the migration process involving Zoho Desk integration. Current Situation: We use
                                                                                                          • Enhancements to Zoho Map integration tasks

                                                                                                            Hello everyone, We're excited to announce enhancements to the Zoho Map integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need to
                                                                                                          • Unable to see Zoho contacts in Zoho app on ios

                                                                                                            Hi Support Team, I am a new user, I have created my account and installed zohomail app on iOS 16 which works. I was also able to import my Gmail contacts into Zoho Contacts, which I can see. The problem is that I can’t see these imported cobalts in Zohomail
                                                                                                          • Task Due Date greater than 10 years.

                                                                                                            We use recurring tasks in Projects where every week, month, year etc Some of our projects are greater than 10 years and we are unable to set a new due date because the difference between start date and due date is greater than 10 years. As an example
                                                                                                          • External User onboarding for zoho connect is not really intuitive.

                                                                                                            So the external user is sent an invite, which has a button that directs them to login to zoho to view the invite, but if they don't have a zoho account, they cannot access that invite, which seems kinda silly, as there is not real way on for them to create
                                                                                                          • Hosting external websites on Zoho?

                                                                                                            How can I host my external website on zoho? Do we have that option? I am currently with hostinger and am looking to switch to zoho. Kindly help. Thanks.
                                                                                                          • How to Add Time Formula Duration (hh:mm)

                                                                                                            Hi everyone — I’m trying to create a formula field in Zoho CRM that calculates the difference between a “Call Start Time” and “Call End Time” and displays the duration in HH:MM format (for example: 1:04 for one hour and four minutes). My current setup
                                                                                                          • How can I calculate the physical stock available for sale?

                                                                                                            Hey Zoho Team,  I've tried to calculate the physical stock on hand in various ways - but always receive a mismatch between what's displayed in Zoho Inventory & analytics.  Can you please let me know how the physical stock available for sale is calculated?
                                                                                                          • Set Custom Icon for Custom Modules in new Zoho CRM UI

                                                                                                          • Live Webinar: Getting Started with Zoho WorkDrive - A Complete Overview

                                                                                                            Hello everyone, We’re excited to invite you to our upcoming live webinar! Discover how to set up your team, bring in your data, and make the most of WorkDrive’s collaboration, organization, AI, and security capabilities. This session is perfect for anyone
                                                                                                          • Marketing Tip #4: Build your email list early

                                                                                                            Email marketing has one of the highest returns on investment. Don’t wait until later; start collecting subscribers now. When you've got their attention, you can send them emails about offers, new product launches, seasonal greetings, and more. Try this
                                                                                                          • Is anyone else having trouble saving a custom image in their email signature, or is it just me?

                                                                                                            When I try to save the image I get an error that says "Operation Failed" I opened a support ticket two weeks ago and received a response that it would be debugged, but it still isn’t working
                                                                                                          • Unify Overlapping Functionalities Across Zoho Products

                                                                                                            Hi Zoho One Team, We would like to raise a concern about the current overlap of core functionalities across various Zoho applications. While Zoho offers a rich suite of tools, many applications include similar or identical features—such as shift management,
                                                                                                          • Zoho Desk Domain mapping / Cloudflare CNAME not recognized

                                                                                                            Hello, my website is behind Cloudflare and SSL. From the Cloudflare control panel I added a CNAME record such as support.mydomain.com pointing to desk.cs.zohohost.com but I'm stuck with the message "Make sure you've mapped the CNAME entry..."
                                                                                                          • Create an Eye-Catching Announcement Widget for Your Help Center

                                                                                                            Hello Everyone! In this week’s edition, let’s explore how to keep your customers updated with exciting news in the Help Center. See how ZylkerMobile wowed their customers by bringing updates right to their portal. ZylkerMobile, the renowned brand for
                                                                                                          • I want to add my other zoho account in same pc

                                                                                                            why does zoho restrict me doing many things as i also want to add my second mail account bit its not allowing me to do that
                                                                                                          • Search in Zoho Community Not Working

                                                                                                            I realize this is a bit of a meta topic, but the search for the various Zoho Communities appears to not be working. I'm under the impression that they run on some version of the Zoho Desk platform, so I'm posting this here.
                                                                                                          • Capture Stripe’s Customer ID

                                                                                                            Does anyone know of a way to capture Stripe’s customer ID that is created when the form/payment is processed? I would like to have the customer ID stored in our CRM so we could utilize in some custom functions down the road.
                                                                                                          • Custom Modules - Where are Comments??

                                                                                                            In the standard ticket module and in the tasks module, we have an interactive comment box that we can post important details/notes and can tag others if needed. Where is this functionality for Custom Modules? Ideally, custom modules would have very similar,
                                                                                                          • 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
                                                                                                          • PUNJAB NATIONAL BANK (CORPORATE) INDIA - NOT AVAILABLE IN BANKING

                                                                                                            Dear sir, Kindly fix it. PUNJAB NATIONAL BANK (INDIA) is available but PUNJAB NATIONAL BANK (CORPORATE) is not available. Kindly enable this banking since we need to categorize the entries. Regards, Sanjay Jena email id/ user id : travewithmerchant@
                                                                                                          • Amazon invoice in Zoho Books

                                                                                                            I have just made my first few sales on Amazon India. Amazon Seller account generates invoices for the sales made on Amazon. These invoices are sent to customers also. Now when I was only making offline sales, I used to create Invoices in Zoho Book. Now
                                                                                                          • CUSTOM FUNCTION GIVE ERROR #EVAL!

                                                                                                            CUSTEM FUNCTION CREATE KYA ZOHOSHEET ME US FUNCTION KO USE KIYA LEKIN DATA TO SAHI HAI LAKIN DATA SHEET ME NAHI LAG LAHA HAI KRUPYA SOLVE KARE MY CODE IS float ADDTWO_TWO(float NO1, float NO2) { ADD = NO1 + NO2; return ADD; }
                                                                                                          • Zoho ShowTime: Certificates of Completion - Award your learners with a sense of achievement

                                                                                                            In our increasingly competitive market, professional trainers need to differentiate themselves if they are to survive. One way to do this is to focus on innovation and deliver an ideal learning experience. By developing a renowned certificate program that provides learners with a specialized skill set for a particular industry, both trainees and future prospects will recognize the trainer's leadership in that field. This can help with long-term growth, revenue generation, and even marketing and branding.
                                                                                                          • IMAP Migration from Gmail

                                                                                                            I have been trying to import my email from a Gmail server and keep receiving the following error. I have reduced the security, activated imap and no improvement. The link to the Google support item has not helped. Unable to connect to your account. Please
                                                                                                          • Your Incoming has been blocked and the emails will not be fetched in your Zoho account and POP Accounts Click here to get unblocked.

                                                                                                            When entering my account, this error is thrown at me, and I deleted a good part of my deleted messages, but I still can not unblock it, I would appreciate your help. reservas@lineasperutravel.com
                                                                                                          • Request for Creating Multiple Email Accounts on One Mobile Number

                                                                                                            Dear Zoho Team, I am planning to shift all my work-related communication to Zoho Mail because of its reliability and features. For my work, I need to create 3–4 separate email accounts for different purposes. Could you please confirm if it is possible
                                                                                                          • Signature issue

                                                                                                            Problem: The signature does not appear when replying or forwarding an email. solve issue: settintgs/Signature Check option place a signature above the content with quotation marks
                                                                                                          • mail admin not loading

                                                                                                            i am trying to login to mailadmin ... gears keeps rotating forever... its not a password issue whats so ever ... not cookies issues whatsoever from android app i can login but there so few things to do from there .. i changed ip address the same... i
                                                                                                          • Unify All Zoho Video Meeting Experiences into One Standardized Platform

                                                                                                            Hi Zoho Team, We would like to share an important user experience concern regarding the current state of video meeting functionality across the Zoho ecosystem. The Problem Within Zoho, there are multiple ways to initiate or schedule a video meeting: Zoho
                                                                                                          • Changing Account in Quote form does not update address information.

                                                                                                            I am trying to update the address information in a quote I've created. I corrected the address in the "Account" but that did not change in the quote. If I re-enter the Account Name in the Quote form, nothing updates. How do I fix this?
                                                                                                          • Zoho One Backup of entire account

                                                                                                            Hello, When using Zoho one is there a way to backup your entire account of all apps that you are using \ activively using in a single step or do you have to backup each applications data individually? Thanks,
                                                                                                          • ZIA in Zoho Cliq

                                                                                                            Is It possible to use the ZIA feature from Zoho Analytics in the Zoho Cliq?
                                                                                                          • Issue with “CC” and “Subject Details” of the initial mail when reply / replied all / forward using Zoho Mail Client (Desktop / Web Mail / Mobile App)

                                                                                                            It is observed that when I reply / reply all / forward a mail using Zoho Mail Client (Desktop / Web Mail / Mobile App), the “CC” and “Subject Details” are omitted from the mail which was replied/forwarded. However this is not the case with outlook mail
                                                                                                          • Unable to send Emails - 452 4.3.1 Temporary System Error

                                                                                                            Whene ever i request smtp server to send the email (without attachment). i recieve error "452 4.3.1 Temporary System Error"
                                                                                                          • I can't receive email

                                                                                                            I cannot receive any email sent to my Zoho email after the free upgrade plan trial is finished.
                                                                                                          • Help for the alisa adding

                                                                                                            Sorry, I would like to add a paypal alias on my domain email address. However, the system blocked it. How can I do it?
                                                                                                          • Next Page