ZohoCRM / Client Script / Canvas: Hide Tab based on Pipeline

: Category: Zoho; 06 May 2025; Hits: 952

What?
A quick article with snippets of code to hide and show certain tabs on a deal record based on the pipeline.

Why?
A request from a customer asked if a tab specific to the pipeline selected can be shown while others hidden. Standard tabs such as Notes, Attachments, Emails, and Timeline should remain.

Code will be needed as a layout rule couldn't control the tabs on a canvas view page. An additional function is needed as the pipeline was not displayed on the canvas view of the deal record but it was on the edit page.

How?
First we're going to add some element IDs to the canvas view page on each of the tabs. Then we'll make an OAuth function that can be executed by the client script which returns the value of the Pipeline given a deal record ID. Finally, we'll have client script execute this function, then show/hide tabs based on the value.

Assuming I have a tab called "Sales Pipeline", and "Hire Pipeline":

Go to the deal record and scroll to bottom where you can see an "Edit" button for this canvas.
The edit mode of the canvas will popup in a new tab.
Right-click on the tab you want to hide and click on "Add Element ID" (or "Change Element ID" if already set).
Call them something easy to remember such as "Tab_SalesPipeline" and "Tab_HirePipeline".
Save and close the edit mode of the Canvas.

Function to return pipeline

Login as a ZohoCRM Administrator and go to Setup > Developer Hub > Functions > New Function
Give it a function name, display name, description, and set category to "Standalone": I'm calling mine "fn_Deals_RetrievePipeline"

Give it the following code:

copy raw

string standalone.fn_Deals_RetrievePipeline(String p_DealID)
{
	/* *******************************************************************************
	Function:       string standalone.fn_Deals_RetrievePipeline(String p_DealID)
	Label:          Fn - Deals - Retrieve Pipeline
	Trigger:        Standalone / REST API
	Purpose:	    Function used by a client script to retrieve the pipeline given a deal record id
	Inputs:         Deal Record ID
	Outputs:        the value of the pipeline

	Date Created:   2025-05-06 (Joel Lipman)
					- Initial release
	Date Modified:	???
					- ???
	******************************************************************************* */
	v_Pipeline = "";
	r_RecordDetails = invokeurl
	[
		url :"https://www.zohoapis.com/crm/v8/Deals/" + p_DealID + "?fields=Pipeline"
		type :GET
		connection:"zcrm"
	];
	l_DealData = ifnull(r_RecordDetails.get("data"),List());
	for each  m_DealData in l_DealData
	{
		if(!isNull(m_DealData.get("id")))
		{
			r_DealDetails = m_DealData;
			if(!isNull(r_DealDetails.get("Pipeline")))
			{
				v_Pipeline = r_DealDetails.get("Pipeline");
			}
		}
	}
	return v_Pipeline;
}

string standalone.fn_Deals_RetrievePipeline(String p_DealID)
{
/* *******************************************************************************
Function: string standalone.fn_Deals_RetrievePipeline(String p_DealID)
Label: Fn - Deals - Retrieve Pipeline
Trigger: Standalone / REST API
Purpose: Function used by a client script to retrieve the pipeline given a deal record id
Inputs: Deal Record ID
Outputs: the value of the pipeline
Date Created: 2025-05-06 (Joel Lipman)
- Initial release
Date Modified: ???
- ???
******************************************************************************* */
v_Pipeline = "";
r_RecordDetails = invokeUrl
[
url :"https://www.zohoapis.com/crm/v8/Deals/" + p_DealID + "?fields=Pipeline"
type :GET
connection:"zcrm"
];
l_DealData = ifnull(r_RecordDetails.get("data"),List());
for each m_DealData in l_DealData
{
if(!isNull(m_DealData.get("id")))
{
r_DealDetails = m_DealData;
if(!isNull(r_DealDetails.get("Pipeline")))
{
v_Pipeline = r_DealDetails.get("Pipeline");
}
}
}
return v_Pipeline;
}

Give the argument/parameter "p_DealID" which in this case will be a string. Use the # symbol to map it to "Deals.Deal Id"
Save and close the function
In the list of functions, hover over the function you just made and select "REST API"
Enable both OAuth and REST API
Click on "Save" to close the dialog box

Client script to show/hide tabs

Login as a ZohoCRM administrator and go to Setup > Developer Hub > Client Script > New Script
Give it a name, I'm calling mine "CsfnShowSectionBasedOnPipeline" with a description
Set Page to "Detail Page (Canvas)"
Set the Module to "Deals"
Select your layout and canvas to apply this to
Under Event, set the type to "Page Event" and set the Event to "onLoad"

Give it the following code:

copy raw

/* *******************************************************************************
Function:       function onLoad ()
Label:          CsfnShowSectionBasedOnPipeline
Trigger:        Client Script on Load of the Deal record page
Purpose:	    Retrieves the pipeline of the deal record and hides/shows sections accordingly.
Inputs:         -
Outputs:        -

Date Created:   2025-05-06 (Joel Lipman)
                - Initial release
Date Modified:	???
                - ???
******************************************************************************* */

// clear the console so I can see what this script is doing (among all the zoho warnings/errors)
console.clear();

// try and catch exception
try {

    // get the record ID currently displayed
    var v_ThisRecordID = $Page.record_id;

    // get the record details of this deal
    // not this way: var r_DealDetails = ZDK.Apps.CRM.Deals.fetchById(v_ThisRecordID);
    // but using a custom OAuth function:  Setting this as REST API alone did not enable it.
    var r_DealDetails = ZDK.Apps.CRM.Functions.execute("fn_Deals_RetrievePipeline", {"p_DealID": v_ThisRecordID});

    // Parse the response to retrieve just the pipeline value (returned string)
    var v_DealPipeline = r_DealDetails._details.output;

    // set all tabs to hidden
    ZDK.UI.getElementByID("Tab_SalesPipeline").setVisibility(false);
    ZDK.UI.getElementByID("Tab_HirePipeline").setVisibility(false);
    
    // depending on pipeline, show the tab
    if (v_DealPipeline == "Sales Pipeline") {
        ZDK.UI.getElementByID("Tab_SalesPipeline").setVisibility(true);
        ZDK.UI.getElementByID("Tab_SalesPipeline").setActive();
    }
    else if (v_DealPipeline == "Hire Pipeline") {
        ZDK.UI.getElementByID("Tab_HirePipeline").setVisibility(true);
        ZDK.UI.getElementByID("Tab_HirePipeline").setActive();
    }

} catch (e) {

    // display exceptions to console watchers
    console.log(e);
}

/* *******************************************************************************
Function: function onLoad ()
Label: CsfnShowSectionBasedOnPipeline
Trigger: Client Script on Load of the Deal record page
Purpose: Retrieves the pipeline of the deal record and hides/shows sections accordingly.
Inputs: -
Outputs: -
Date Created: 2025-05-06 (Joel Lipman)
- Initial release
Date Modified: ???
- ???
******************************************************************************* */
// clear the console so I can see what this script is doing (among all the zoho warnings/errors)
console.clear();
// try and catch exception
try {
// get the record ID currently displayed
var v_ThisRecordID = $Page.record_id;
// get the record details of this deal
// not this way: var r_DealDetails = ZDK.Apps.crm.Deals.fetchById(v_ThisRecordID);
// but using a custom OAuth function: Setting this as REST API alone did not enable it.
var r_DealDetails = ZDK.Apps.crm.Functions.execute("fn_Deals_RetrievePipeline", {"p_DealID": v_ThisRecordID});
// Parse the response to retrieve just the pipeline value (returned string)
var v_DealPipeline = r_DealDetails._details.output;
// set all tabs to hidden
ZDK.UI.getElementByID("Tab_SalesPipeline").setVisibility(false);
ZDK.UI.getElementByID("Tab_HirePipeline").setVisibility(false);
// depending on pipeline, show the tab
if (v_DealPipeline == "Sales Pipeline") {
ZDK.UI.getElementByID("Tab_SalesPipeline").setVisibility(true);
ZDK.UI.getElementByID("Tab_SalesPipeline").setActive();
}
else if (v_DealPipeline == "Hire Pipeline") {
ZDK.UI.getElementByID("Tab_HirePipeline").setVisibility(true);
ZDK.UI.getElementByID("Tab_HirePipeline").setActive();
}
} catch (e) {
// display exceptions to console watchers
console.log(e);
}