Kaizen #59 - Creating alerts and custom messages using Client Script
Hello everyone!
We are happy to resume our Zoho CRM Developer Community series - The Kaizen series!
Welcome back to the new start of Kaizen!
This post is about
Client Script and its simple use cases involving ZDK Client functions.
What is Client Script?
The
Client Script feature
gives you a seamless platform for achieving and extending your business cases in Zoho CRM by allowing Java Script code execution in your browser. It enables you to configure events for the UI components and define the actions once those events are triggered.
ZDK Client Function | Description |
showMessage | To display a text message on create/clone/edit/detail(canvas) page. |
showConfirmation | To display a confirmation box with accept and reject message on create/clone/edit/detail(canvas) page. |
showAlert | To show alert message on create/clone/edit/detail(canvas) page. |
openMailer | To open mailer component from detail(canvas) page. |
Use Case
Let us consider that you want to achieve the following using Client Script.
- Calculate age based on Date of Birth and display the message "Age is more than 80" whenever the age is above 80 in create page of Policyholder module.
- Show the alert message "You cannot change the Rating of a verified account" whenever you try to update the field Rating in Accounts module.
- When you click the mail button on detail(canvas) page, ask for confirmation and open a mailer window.
Solution using Client Script
Note:
The solution listed in this post includes detail(canvas) page and create page.
To create a canvas page,
- Go to Setup > Customization > Canvas
- Click Create Record Detail Page.
- On the Create a Custom Record pop up that appears, select the module as "Accounts" and select the required layout for the canvas page
- Choose a template from the gallery and click Select.
- Enter a name and save the canvas page.
- Click Canvas Assignment and assign the page to the required profiles.
- Click here for more details on creating a canvas page(Customizing the record detail page).
1. Calculate age based on Date of Birth and display the message "Age is more than 80" whenever the age is above 80 in create page of Policyholder module
- Go to Setup > Developer Space > Client Script. Click +New Script.
- Specify the details to create a script and click Next.
- Enter the following script in the Client Script IDE and click save.
- function getAge(dateString)
- {
- var today = new Date();
- var birthDate = new Date(dateString);
- var age = today.getFullYear() - birthDate.getFullYear();
- var m = today.getMonth() - birthDate.getMonth();
- if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate()))
- {
- age--;
- }
- return age;
- }
- let age = getAge(value);
- var age_field = ZDK.Page.getField("Age");
- var category_field = await ZDK.Page.getField("Category");
- age_field.setValue(age);
- if (age > 80) {
- ZDK.Client.showMessage('Age is more than 80', { type: 'info' });
- }
- You can see the code working from the create page. You can also see how the client script works using the Run component of the Client Script IDE.
- You can use any of the following types in showMessage() function
Possible 'type'
| Script |
info | ZDK.Client.showMessage('message', { type: 'info' });
|
warning | ZDK.Client.showMessage('message', { type: warning });
|
error | ZDK.Client.showMessage('message', { type: error });
|
success | ZDK.Client.showMessage('message', { type: success }); |
2. Show the alert message whenever you try to update the field Rating
- Go to Setup > Developer Space > Client Script. Click +New Script.
- Specify the details to create a script and click Next.
- ZDK.Client.showAlert('You cannot change the Rating after account creation');
- Here is how the Client Script works. You can also see how the client script works using the Run component of the Client Script IDE.
3. Configure the mailer box with the click of a button
First of all, you need to add the button to the detail(canvas) page.
- Go to Setup > Customization > Canvas.
- Right click on the Canvas page for Accounts module and click Edit.
- Click Elements, drag and drop the button wherever required and specify a label for the button.
- Right click on the button, select Add Element ID and enter the ID of the button in the pop up that appears.
- Once the button is created, you can configure Client Script in two ways:
- Right click on the button--> Add Client Script-->onClick. The Client Script IDE appears with the event type as Canvas Button Event.
(or)
- Go to Setup > Developer Space > Client Script. Click +New Script.
- Specify the details to create a script and click Next.
- Enter the following script and click save.
- var isProceed = ZDK.Client.showConfirmation('Do you want to open the mailer window?','Proceed','Cancel');
- //If user clicks Proceed button
- if (isProceed) {
- ZDK.Client.openMailer({ from: '', to: [{ email: '', label: 'ABC Industries' }], cc: [{ email: '', label: 'ABC Industries' }], subject: 'Greetings from ABC Industries!', body: ' ' });
- }
- The showConfirmation() function will return a boolean value based on the user selection. You should capture this boolean value using a variable and write the actions based on the boolean value returned. Here the variable isProceed will capture the user response and based on that boolean value, the mailer box will get displayed.
- Here is how the client Script works,
We hope you found this post useful. We will meet you next week with another interesting topic!
If you have any questions let us know in the comment section.
Cheers!
Click here for more details on Client Script in Zoho CRM.
Related Links
Zoho Developer Community
Deliver unforgettable customer experiences
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
Zoho Desk Resources
-
Desk Community Learning Series
-
-
-
-
-
-
-
-
-
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
Zoho TeamInbox Resources
Zoho DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho WorkDrive Resources
Zoho Campaigns Resources
Zoho CRM Resources
Zoho Show Resources
Writer Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.