Navigate between pages

Hello everyone!

Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script.

In this Kaizen post,

Need to Navigate to different Pages
Client Script ZDKs related to navigation
A. navigateTo()
B. navigation_data
Use Case
Solution
Summary
Related Links

1. Need to Navigate to different Module's Pages in Zoho CRM

Often navigation between Module pages is required for improved user experience and streamlined workflows. Seamless transitions between related modules ensure quick access to relevant data and actions, enhancing productivity. For example, whenever the status of Account is updated to "Deal Creation", you can open the Deal Create Page.

2. ZDKs to navigate to different pages

A. navigateTo()

Using this ZDK method, you can open any modules' detail/create/clone/edit page in a new tab or in same tab. Here is the syntax.

Click here to know more details.

B. navigation_data

Using The Constant , $Page.navigation_data, you can get the data passed from navigateTo() method.

Click here to know more details.

3. Use Case

Zylker is a manufacturing organisation uses Zoho CRM. The admin wants to automatically open the Deal Create Page whenever the status in the Detail Page of Account is "Deal Creation". Also Deal Create Page should have the "Account Name" prefilled from the Detail Page of Account record."

4. Solution

If the user updates the status to "Deal Creation" in Accounts module you need get confirmation from the user and open a new Deal Create Page automatically with Account Name prefilled.

To accomplish this using Client Script, you need to create two Client Scripts.

A. Client Script for Accounts Module

B. Client Script for Deals Module

A. Client Script for Accounts Module

Create a Client Script for Detail Page of "Accounts" module with the following details and click "Next". To know more about Creating Client Script, click here.

In the Client Script IDE, enter the below script and click Save.

var a_name = ZDK.Page.getField("Account_Name").getValue();
var rec_id = $Page.record_id;
if (value == "Deal Creation")
{
var resp=ZDK.Client.showConfirmation("Do you want to update the status as Deal Creation?");
if (resp)
{
var rec = $Page.record;
var rec_id = $Page.record_id;
rec.status = "Deal Creation";
var response = ZDK.Apps.CRM.Accounts.updateById(rec, rec_id);
log(response);
ZDK.Client.navigateTo('record_create', { module: 'Deals', custom_data: {data: a_name,data_id :$Page.record_id}}, '_blank')
}
}

Whenever the status is updated to "Deal Creation" , you can show a Confirmation box using showConfirmation() asking whether the user wants to update the status as "Deal Creation"
Then, update the current record's status using updateById(). You can use the $Page, to get the current record id.
Then using navigateTo() method you can open the Deal Create Page from Account Detail Page.
As per the following syntax, you should pass the required parameters, which includes the data needed for the Client Script on Deal Page. In this case the data being passed is the Account Name and Id.
Syntax : navigateTo(page, params, data, target)

page : record_create denotes that you want to open Create Page.
params : You need to mention the name of the module for which the Create Page has to be opened. In this case it is "Deals". You can also mention the layout_id and record_id in params. For more details, click here.
data : "custom_data" hold the data that you want to pass to the Deals Page.
target: You can open the page in same tab or in a different tab using "_self" and "_blank" respectively.

B. Client Script for Deals Module

Now, create another Client Script for "Deals" module with the following details and click "Next".

In the Client Script IDE, add the following script and click "Save"

var a = $Page.navigation_data;
if (a!=null);
{
var field_obj1 = ZDK.Page.getField('Account_Name');
field_obj1.setValue({ "id":a.data_id , "name":a.data });
}

To get the data passed in Account Detail Page, you need to use "$Page.navigation_data". In this script you can use setValue() and mention the id and name of "Account Name". As Account Name is a lookup field, you should mention the Id of the Account along with the Account Name.

Here is how the Client Script Works.

Click here to know more details.

Note:

You can open any external URL using Client Script in a new tab using openURL().

Click here to know more details.

5. Summary :

In this post we have discussed,

How to pass data from one page to the other using Client Script.
How to perform actions after a record is updated.
How to update a record using Client Script without clicking on Save button.
How to open external URLs using Client Script.

-------------------------------------------------------------------------------------------------------------------

6. Related Links :

Client Script Overview

Creating a Client Script

Client Script Events

Client Script IDE

Use cases of Client Script

-------------------------------------------------------------------------------------------------------------------

Previous Post: Kaizen #141 - Zoho CRM's API Collection in Postman | Kaizen Collection: Home

Join us for our upcoming Zoho CRM Developer Series: Zoho CRM APIs, where you can explore more about Zoho CRM APIs. Register Now!

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

Topic Participants
Maadhari M

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