Hide Context Menu Options in Data Object Tree (Pimcore Studio)

[harshida-patel]

In the Classic Admin interface, we can hide specific context menu options in the Data Object Tree using the following event:

prepareObjectTreeContextMenu: function (event) {
  let menu = event.detail.menu;
  menu.on('beforeshow', function() {
    // Find the 'Delete' button in the menu, if it exists
    let deleteButton = menu.items.findBy(function(item) {
      return item.text === t('Delete');
    });
       menu.remove(deleteButton);
  });
}

We need to implement the same functionality in Pimcore Studio to hide certain context menu options in the Data Object Tree (e.g., “Save”, “Publish”, “Unpublish”, etc.).

I attempted the following approach using the Studio SDK:

import { ContextMenuRegistry } from '@pimcore/studio-ui-bundle/modules/app';

const originalGetSlotProviders = ContextMenuRegistry.getSlotProviders.bind(ContextMenuRegistry);

ContextMenuRegistry.getSlotProviders = (slotName: string) => {
  const providers = originalGetSlotProviders(slotName);

  // Only target the object tree menu
  if (slotName === 'object-tree') {
    return providers.filter((provider: any) => {
      const name = (provider?.name || '').toLowerCase();
      // Hide specific built-in options here
      if (
        name.includes('save') ||
        name.includes('publish') ||
        name.includes('unpublish')
      ) {
        return false;
      }
      return true;
    });
  }

  return providers;
};

However, this approach didn’t work as expected.
Please suggest which SDK or event should be used in Pimcore Studio to achieve this functionality.

[harshida-patel]

I seen DataObjectTreeContextMenuProps inside core/modules/data-object/tree/context-menu but didn't get SDK so please suggest how to call DataObjectTreeContextMenu

[markus-moser]

Hi @harshida-patel,

Please check this docs page to see how to work with the context menu registry:

https://docs.pimcore.com/platform/Studio_UI/SDK_Overview/Context_Menu_Registry/

In the latest nightly/canary build I also added the possibility to modify existing items (until then it would be only possible be overriding the getSlotProviders() method of the context menu service, similar like you tried it but from the container service which is mentionend in the doc).

Check the updated docs for the next release:
https://github.com/pimcore/studio-ui-bundle/blob/1.x/doc/03_SDK_Overview/07_Context_Menu_Registry.md

I also added a working example to our studio-example-bundle:
https://github.com/pimcore/studio-ui-bundle/blob/1.x/doc/05_Examples/09_Customize_Context_Menus.md
https://github.com/pimcore/studio-example-bundle/tree/main/assets/js/src/examples/data-object-context-menu

Best,
Markus

[harshida-patel]

Even though the ContextMenuRegistry class contains overrideSlotProvider and updateSlotProvider, when I try to use these functions in my custom code, I get an error saying that overrideSlotProvider does not exist.

[harshida-patel]

My code :

export const ContextMenuExtension: AbstractModule = {
  onInit () {
    // Get the ContextMenuRegistry from the dependency injection container
    const contextMenuRegistry = container.get<ContextMenuRegistryInterface>(serviceIds['App/ContextMenuRegistry/ContextMenuRegistry'])
    const config = contextMenuConfig.dataObjectTree

    contextMenuRegistry.overrideSlotProvider(config.name, {
      name: 'addObject',
      priority: 100,
      useMenuItem: (context: DataObjectTreeContextMenuProps) => {
        // Check if the target is not a folder, hide the menu item
        if (context.target.type !== 'folder') {
          return null;
        }

        console.log('Context Menu Extension - Target Type:', context.target.type);

        // Customize the menu item properties
        return {
          label: 'Customized Add Object (visible only for folders)',
          key: 'addObject',
          onClick: () => {
           
          },
        };
      },
    });
}

[harshida-patel]

It might be a version issue. I updated the package to:
"@pimcore/studio-ui-bundle": ">=1.0.0-canary.20251114-143850-49a44ba"

Could you please suggest which versions are required for these functions to work, or whether this functionality will be available in an upcoming release? If so, what is the expected release date?

[harshida-patel]

Hi @markus-moser I tested this functionality and it works when hiding the menu statically. However, when I try to apply conditions fetched from an API, it fails. The issue seems to be related to handling both sync and async operations—because the menu is generated before the API response arrives, the preload menu logic doesn’t work as expected.

For example

this is working

const itemsToHide = ['delete', 'publish', 'unpublish', 'copy', 'cut'];  
    itemsToHide.forEach(itemId => {
      contextMenuRegistry.updateSlotProvider(
        contextMenuConfig.dataObjectTree.name,
        itemId,
        (provider) => ({
          ...provider,
          useMenuItem: () => null
        })
      );
    });

but for check condition based on object status through API its not working

async function fetchObjectDetailById(id: number) {
  try {
    const res = await fetch(`/api/object-info/${id}`);
    return await res.json();
  } catch (e) {
    console.error("API error:", e);
    return null;
  }
}

itemsToHide.forEach(itemId => {
      contextMenuRegistry.updateSlotProvider(
        contextMenuConfig.dataObjectTree.name,
        itemId,
        (provider) => ({
          ...provider,

          useMenuItem: (context) => {

            const detail = context?.target;
            const id = detail?.id;

            const status =  getObjectDetails(id);
           
            if (status === "restricted") {
              return null; // hide
            }

            return provider.useMenuItem(context);
          }

        })
      );
    });
  }

[markus-moser]

@harshida-patel This will not work as the context menu options are rendered immediately -> so you cannot use promises there. We would need to provide a asynchronous logic with loading spinner there. I'm not sure if this would be a good idea at all.

But in the context of useMenuItem you should get all the data which is contained in the tree node of the tree api request and you also can add additional data to the tree nodes via events (eg. like described in this comment: #2508). Wouldn't this be an option?

Otherwise you would need to create your own react component in useMenuItem which handles the loading (spinner) logic and then renders it. This would also work as the returned menu item of useMenuItem can also be a custom react component (

studio-ui-bundle/assets/js/src/core/components/menu/menu.tsx

Line 38 in 7a8b1a1

export interface MenuItemCustomType extends Pick<MenuItemType, 'key'> {

)

[harshida-patel]

I tried with custom menu

const StatusBasedMenuItem = ({ provider, context }) => {
logic here for hide show using API

if hide return null (its working )

but if show
return provider.useMenuItem(context) // not working

}

registry.updateSlotProvider(slotName, itemId, (provider: any) => ({
       ...provider,
       useMenuItem: (context: any) => {
        return {
             type: "custom",
             component: React.createElement(StatusBasedMenuItem, {
             provider,
             context
           }),
         };
       },
     }));
}

[harshida-patel]

for custom component hide menu with condition but not show

[markus-moser]

@harshida-patel This will not work as within your custom component you need to render the markup / a react component and not just return an object with the definition of a menu item.

I added in this PR our used MenuItem component to the SDK, this should make it easier for you to provide the correct markup:
#2614

I tried it out with this example:

import React from 'react'
import { type AbstractModule, container } from '@pimcore/studio-ui-bundle'
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
import { MenuItem } from '@pimcore/studio-ui-bundle/components'
import { contextMenuConfig, type ContextMenuRegistryInterface, type DataObjectTreeContextMenuProps } from '@pimcore/studio-ui-bundle/modules/app'
import { MenuItemType } from '@pimcore/studio-ui-bundle/components'
import { MenuItemCustomType } from '@pimcore/studio-ui-bundle/components'

export const DataObjectContextMenuExtension: AbstractModule = {
  onInit () {
    // Get the ContextMenuRegistry from the dependency injection container
    const contextMenuRegistry = container.get<ContextMenuRegistryInterface>(serviceIds['App/ContextMenuRegistry/ContextMenuRegistry'])

    // contextMenuConfig provides configurations for all available context menu locations
    // Available: dataObjectTree, assetTree, documentTree, etc.
    const config = contextMenuConfig.dataObjectTree

    contextMenuRegistry.updateSlotProvider(config.name, 'delete', (existingItem) => {
      return {
        ...existingItem,
        useMenuItem: (context: DataObjectTreeContextMenuProps): MenuItemCustomType | null => {
          const existingMenuItem = existingItem.useMenuItem(context)

          const item: MenuItemType = existingMenuItem as MenuItemType

          return {
            key: 'custom-delete',
            type: 'custom',
            component: <div>Custom Component: <MenuItem item={ item } /></div>
          } 
          
          /** if you want to change props of the existing item
            return {
              key: 'custom-delete',
              type: 'custom',
              component: <div>Custom Component: <MenuItem item={ {...item, label:'My Custom Delete'} } /></div>
            } 
          */
        }
      }
    })
  }
}