Customize your context menu (right-click) in Foxit PDF SDK for Web

The newly released minor version 6.2 of Foxit PDF SDK for Web allows you to customize what goes on your context menu when users right-click on the PDF screen. In this article, we will provide a few handy tutorials to customize your context menu.

Default Context Menus

In our current demo, this is how the menus are displayed by default:

[table id=31 /]

Customize your context menu

Foxit PDF SDK for Web 6.2 created the configureContextMenu function inside the ViewerInstance class in order to customize your context menu:

 WebPDF.ViewerInstance.configureContextMenu(type, config);

Parameter description

type: There are three types of context menus, as you’ve seen above

Page Context Menu: WebPDF.ContextMenuType.PAGE_MENU

Text Selection Context Menu: WebPDF.ContextMenuType.TEXT_SELECT_MENU

Annotation Context Menu: Please see the full list of annotation types below:

[table id=32 /]

config: There are two types of configuration for context menus

main: cover all types of context menus

popup: has the same configuration as main, but is only available for annotations with ‘Reply’ option

Here is a sample code to help visualize the function implementation:

WebPDF.ViewerInstance.configureContextMenu(type, {
    main: {
        cls: 'custom_context_menu',
        attrs: {
            id: 'custom_context_menu_id'
        },
        items: [{
            // Required. Context menu items, supports i18next.
            text: 'I18n.Properties',
            // Optional. The css class for menu item.
            cls: 'custom_context_menu_item',

            //Optional. The css class for menu icons. Set 'hide' to conceal icon，
            iconCls: 'hide',
            // Optional. Menu click event handler
            handler: function() {
               alert('show property dialog')
            }
        }, {
            text: 'i18n.Delete',
            cls: 'custom_context_menu_item',
            iconCls: 'hide',
            handler: function() {
               alert('target has been deleted!');
            }
       }]
 },
 // Only valid for annotation with "reply" capability.
 popup: {
      // the config format is same as main.
 }
});

Below are the instructions to change the status of your context menu. Foxit PDF SDK for Web currently allows you to show, hide, disable and enable your context menu items. You have the option of selecting a specific context menu using the setContextMenuItemStatus below, or change the status for all annotations simultaneously. Refer to the Change status for all annotations section if that is what you need to achieve.

 WebPDF.ViewerInstance.setContextMenuItemStatus(type, name, status);

Parameter description

type: Refer to previous param description

name: Please see the full list of menu item names below:

[table id=33 /]

status:

Disabled: Disable/Enable the item

true: Grey out the item and disable click

false: Item is enabled

Visible: Show/Hide the item completely

true: Hide the item completely

false: Item is displayed

Disable a delete menu from the text highlight context menu

WebPDF.ViewerInstance.setContextMenuItemStatus(WebPDF.ContextMenuType.COMMENT_HIGHLIGHT, WebPDF.ContextMenuItemName.DELETE, {
    Disabled: true
})

This is how the context menu will look:

Hide a delete menu from the text highlight context menu

WebPDF.ViewerInstance.setContextMenuItemStatus(WebPDF.ContextMenuType.COMMENT_HIGHLIGHT, WebPDF.ContextMenuItemName.DELETE, {
    Visible: false
})

Instead of disabled, the parameter for show/hide a context menu item is ‘Visible’. You will see that the menu item is not displayed:

Change status for all annotations

It is possible to change a context menu status for all annotations together by using the setAnnotContextMenuItemStatus function.

WebPDF.ViewerInstance.setAnnotContextMenuItemStatus(WebPDF.ContextMenuItemName.DELETE, {
    Visible: false
});

Refer to the menu item names list to see which item you wish to hide. You will see that the ‘Delete’ item will be hidden for all annotation context menus.