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?

Go to Setup > Developer Space > Widgets.
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

<!DOCTYPE html>
<html>
<head>
<title>User Details</title>
<link rel="stylesheet" href="index.css">
<script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
//Import this JS SDK to use SDK methods
<script src="index.js"></script>
</head>
<body>
<div class="container">
<h1>User Details</h1>
<div class="details">
<h2>Basic Details</h2>
<p><strong>Name:</strong> <span id="name"></span></p>
<p><strong>Email:</strong> <span id="email"></span></p>
<p><strong>PAN ID</strong> <span id="panId"></span></p>
<p><strong>Address</strong> <span id="address"></span></p>

</div>
<div class="details">
<h2>Current Loan Requests</h2>
<p><strong>Loan ID:</strong> <span id="loanId"></span></p>
<p><strong>Loan Type:</strong> <span id="loanType"></span></p>
<p><strong>Amount:</strong> <span id="amount"></span></p>

</div>
<div class="loan-history">
<h2>Loan History</h2>
<div class="loan-history-table">
<table>
<thead>
<tr>
<th>S. No</th>
<th>Bank Name</th>
.
.
.
</tr>
</thead>
<tbody id="loanHistoryTableBody">

</tbody>
</table>
</div>
</div>
</div>
<div class="buttons">
<button id="button1" onclick="closePopup()">Decline</button> //When the decline button is clicked, a method is called to close the widget pop-up
<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.
</div>
</body>
</html>

To use the Zoho CRM APIs in the widget, you can use the API helpers provided in the JS SDK.

index.js

ZOHO.embeddedApp.on("PageLoad", async function (data)
//This event is used to get the page load data
{
console.log(data);
const loanRec = await ZOHO.CRM.API.getRecord({
Entity: data.Entity, // Here, 'Entity' is 'Loans Module'
RecordID: data.EntityId //The 'ID' of the record
});
console.log(loanRec.data[0].Recipient.id);
const contactRec = await ZOHO.CRM.API.getRecord
//gettind contact details
({
Entity: "Contacts",
RecordID: loanRec.data[0].Recipient.id
});
const loanHistory = await ZOHO.CRM.API.getRelatedRecords
//getting related records of the contact
({
Entity: "Contacts",
RecordID: loanRec.data[0].Recipient.id,
RelatedList: "Loan_History",
page: 1,
per_page: 200
})
ZOHO.embeddedApp.init();
//used to initialize widget
function moveToNextState()
{
ZOHO.CRM.BLUEPRINT.proceed();
//ZOHO.CRM.BLUEPRINT.proceed() function from JS SDK, which helps in making the blueprint transition
}
//method used to move a record to the next state
function closePopup(){
ZOHO.CRM.UI.Popup.close();
}
//method used to close the widget
function displayBasicDetails(data) {
console.log(data);
document.getElementById('name').textContent = data.Full_Name;
.
.
}
}

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

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use API
Kaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes