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

                                                                                                          • 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 をもっと使いこなしたい」方にぴったりの場です。 初参加の方もぜひお気軽にご参加ください! ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
                                                                                                          • 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
                                                                                                          • Unleash the power of detail, with Table View.

                                                                                                            What use is context that's not available where you need it? With this in mind, we bring you the Table View. This feature will add more power to the way you organize and work through your ticket load. Table View comes in handy when you want more control over the ticket information you see. This is a nifty tool for users who find themselves limited in terms of the level of information that is being offered in the Classic View and Compact View. With an upper limit of 15 columns, agents can glean most
                                                                                                          • Kaizen #126 - Circuits in Zoho CRM - Part 1

                                                                                                            Hello everyone! Welcome back to another week of Kaizen! Today, we will discuss an exciting topic—Circuits in Zoho CRM. For starters, we will discuss what Circuits are, how beneficial they are for businesses, different views of a Circuit, and the different
                                                                                                          • 'Statement of Accounts does not exist' error received, when creating PO using api in Zoho Inventory

                                                                                                            Here is request json -- JSONString = { "date": "2019-09-24", "purchaseorder_number": "PO-6-1", "delivery_date": null, "delivery_org_address_id": 36221200000056XXX, "vendor_id": 362212000000564XXX, "attention": "Testing", "line_items": [{ "unit": "Pieces", "account_id": 36221200000003XXX, "quantity": 1, "item_id": 362212000000049XXX, "tax_type": "", "tax_name": "", "name": "One HD", "purchase_rate": 85, "tax_percentage": 0, "item_total": 85.00, "tax_id": "", "warehouse_id": 362212000000564XXX }] }
                                                                                                          • Multiple clients in one project

                                                                                                            Hi team, What is the possibility to have more than one client to be linked for one project in the Zoho Books? Our business model is to have a project, and this project have expenses/bills, as well, we issue invoices for this same project to several customers.
                                                                                                          • Support Bots and Automations in External Channels

                                                                                                            Hello Zoho Cliq Team, How are you? We actively use Zoho Cliq for collaboration, including with our external developers. For this purpose, external channels are a key tool since they work seamlessly within the same interface as all of our other channels
                                                                                                          • Workdrive on Android - Gallery Photo Backups

                                                                                                            Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. Emma
                                                                                                          • Rendering PDF to view on page

                                                                                                            My company upload lots of PDF files onto Zoho. But every time we open it, it downloads the file instead of viewing it on the web page. Does Zoho allow uploaded PDF files to be rendered to view on web page yet? I've been trying to use <embed> or <object> but it cannot be loaded.  (similar thread: https://help.zoho.com/portal/community/topic/how-to-open-a-pdf-file-of-a-view-in-preview-mode)
                                                                                                          • Dynamically Fetching Lookup Field Display Value

                                                                                                            I have an audit trail form, Audit_Changes, that tracks old vs new values across different forms. For lookup fields, the old/new value is the ID, but I also need the display value. What's a best practice for dynamically fetching the display value of the
                                                                                                          • Ability to Create New Items When Zoho Trident is Minimized via tray or taskbar icon

                                                                                                            Allow users to create new items (emails, calendar events, tasks, etc.) directly from the system tray icon or by right clicking the task bar icon, even when the window is minimized or not actively running in the foreground. This enables quick access to
                                                                                                          • I can not see Undeliverable emails from my Mass Email Leads activity in CRM

                                                                                                            I am sending email templates and I can not see the Undeliverables? I only receive the "Out of Office" replies and any manual replies from the lead. Can you please let me know where the Undeliverable emails are sent so I can use the information to clean up the database?
                                                                                                          • Next Page