Article:Dynamically Show or Hide the Contextual Side Panel Based on the Active Tab in SOW

[Dinesh Chilaka]

Problem Statement:

In ServiceNow Service Operations Workspace, the Contextual Side Panel provides useful information related to the current record, such as Record Information, Attachments, and quick navigation options.

However, there may be scenarios where the Contextual Side Panel should not be displayed on specific tabs of a record page, such as Overview, Details, Related Lists, or other custom tabs.

By default, implementing tab-specific visibility may appear to require duplicating the UI Builder page and configuring separate versions of the page for different tabs. This approach can introduce unnecessary maintenance overhead, as any future changes to the page may need to be implemented and maintained across multiple page copies.

This article demonstrates how to dynamically hide the Contextual Side Panel based on the currently selected tab while using a single UI Builder page. This eliminates the need for page duplication and provides a cleaner, simpler, and more maintainable approach.

Solution:

ServiceNow provides an OOB page property specific to Service Operations Workspace called hideContextualSidebar, which can be used to control the visibility of the Contextual Side Panel.

In this property, we can specify a combination of the table and tab in JSON format. This allows you to define the specific table and active tab for which the Contextual Side Panel should be hidden.

Navigate to All → Now Experience Framework → Experiences → Service Operations Workspace after that you can a related list called UX page properties

In that relatedList Search for hideContextualSidebar property.

If we open that property, we can already find a json like below,

[
	{
        "table": "sys_user_group",
        "tab": "id=cllanqdxq01av3b7srbf5i3t3^route=team-schedule"
    }
]

This means for the Group record in the workspace, for a particular tab which contains id as cllanqdxq01av3b7srbf5i3t3  and it is routing to team-schedule , if we are correctly on that tab the Contextual side bar will be hide.
Here route means that tab is coming from the UI Builder Page collection don't worry about it, i will give you clarity on how to get these id's and route from the Workspace without navigating to the UI Builder.

If we open any group record in SOW, there is a tab called Schedule.

Observe here if we open that tab, the contextual side bar will hide.

The above image represents, i am on the details tab of the Database group record, now we are seeing the contextual side bar on the right where attachments, templates are visible.

In this image, i am on the Schedule tab of the same record, now we are not able to contextual side bar that is because of that page property.

Now Practically can we look into how to get the id and route of the tabs.

Now we are on Schedule tab of the Database group record, copy the url now it will look like below

https://<your-instance>/now/sow/record/sys_user_group/287ee6fea9fe198100ada7950d0b1b73/params/selected-tab-index/1/selected-tab/id%3Dcllanqdxq01av3b7srbf5i3t3%5Eroute%3Dteam-schedule

You can see the selected-tab/id in the url where it is showing as %3Dcllanqdxq01av3b7srbf5i3t3%5E from this remove %3D and %5E , now your selected tab id is cllanqdxq01av3b7srbf5i3t3

and it can be same for route as well, here route is %3Dteam-schedule remove %3D from it.

In this way we can get the id and route of the Tabs.

Here main thing is route parameter won't exists for all tabs, it will exists only for the tabs tab are coming from the UI Builder Page Collection.

Let's take we have details tab on every record, this is not coming from any page collection it is defined in that page itself for such tabs id is enough.
Example:
In the incident record, if the active tab is Details tab hide the Contextual side bar
To achieve above, update the hideContextualPageProperty json as follows

[
	{
        "table": "sys_user_group",
        "tab": "id=cllanqdxq01av3b7srbf5i3t3^route=team-schedule"
    },
    {
        "table": "incident",
        "tab": "id=cl1kajg2y015e3f71kyb7f5qr"
}
]

I think now we are know how to get the id of the tab.
Result:

Conclusion:

Using the OOB hideContextualSidebar page property in Service Operations Workspace, you can control the visibility of the Contextual Side Panel based on the table and active tab.

This approach allows you to hide the Contextual Side Panel for specific tab and table combinations without duplicating the UI Builder page. It provides a simpler, cleaner, and more maintainable solution while keeping the existing page configuration intact.