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

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
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
Extension pointers: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers: Extend end-user benefits and allow personalization by implementing extensions with custom actions
From our earlier post on custom actions, we know that we can create templated actions, share them with end users, and allow them to reuse those actions to achieve personalized outcomes. In this post, we'll look at how custom actions make it easy for users
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select