1. Home
  2. Foxit PDF SDK for Web 6.2
  3. Customize your context menu (right-click) in Foxit PDF SDK for Web

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:

Page Context MenuText Selection Context MenuAnnotation Context Menu

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
    1. Page Context Menu: WebPDF.ContextMenuType.PAGE_MENU
    2. Text Selection Context Menu: WebPDF.ContextMenuType.TEXT_SELECT_MENU
    3. Annotation Context Menu: Please see the full list of annotation types below:
    4. Annotation NameCode Snippet
      CALLOUTWebPDF.ContextMenuType.CALLOUT
      POLYGON CLOUDWebPDF.ContextMenuType.POLYGON_CLOUD
      DISTANCEWebPDF.ContextMenuType.DISTANCE
      LINE ARROWWebPDF.ContextMenuType.LINE_ARROW
      LINEWebPDF.ContextMenuType.LINE
      INKWebPDF.ContextMenuType.INK
      CIRCLEWebPDF.ContextMenuType.CIRCLE
      POLY LINEWebPDF.ContextMenuType.POLY_LINE
      POLYGONWebPDF.ContextMenuType.POLYGON
      SQUAREWebPDF.ContextMenuType.SQUARE
      WIDGETWebPDF.ContextMenuType.WIDGET
      STRADDLEWebPDF.ContextMenuType.STRADDLE
      CARETWebPDF.ContextMenuType.COMMENT_CARET
      HIGHLIGHTWebPDF.ContextMenuType.COMMENT_HIGHLIGHT
      HIGHLIGHT AREAWebPDF.ContextMenuType.COMMENT_HIGHLIGHT_AREA
      REPLACEWebPDF.ContextMenuType.COMMENT_REPLACE
      SQUIGGLYWebPDF.ContextMenuType.COMMENT_SQUIGGLY
      STRIKEOUTWebPDF.ContextMenuType.COMMENT_STRIKEOUT
      UNDERLINEWebPDF.ContextMenuType.COMMENT_UNDERLINE
      TEXTBOXWebPDF.ContextMenuType.TEXTBOX
      TYPE WRITERWebPDF.ContextMenuType.TYPE_WRITER
      LINKWebPDF.ContextMenuType.LINK
      IMAGEWebPDF.ContextMenuType.IMAGE
      REDACTWebPDF.ContextMenuType.REDACT
      TEXTWebPDF.ContextMenuType.TEXT
  • config: There are two types of configuration for context menus
    1. main: cover all types of context menus
    2. 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.
    }
});

Changing the status of your context menu

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
  • Annotation NameCode Snippet
    ZOOM INWebPDF.ContextMenuItemName.ZOOM_IN
    ZOOM OUTWebPDF.ContextMenuItemName.ZOOM_OUT
    ZOOM ACTUALWebPDF.ContextMenuItemName.ZOOM_ACTUAL
    ZOOM FITPAGEWebPDF.ContextMenuItemName.ZOOM_FITPAGE
    ZOOM FITWIDTHWebPDF.ContextMenuItemName.ZOOM_FITWIDTH
    ROTATE RIGHTWebPDF.ContextMenuItemName.ROTATE_RIGHT
    ROTATE LEFTWebPDF.ContextMenuItemName.ROTATE_LEFT
    GOTO PREV PAGEWebPDF.ContextMenuItemName.GOTO_PREV_PAGE
    GOTO NEXT PAGEWebPDF.ContextMenuItemName.GOTO_NEXT_PAGE
    PRINTWebPDF.ContextMenuItemName.PRINT
    SEARCHWebPDF.ContextMenuItemName.SEARCH
    PROPERTIESWebPDF.ContextMenuItemName.PROPERTIES
    DELETEWebPDF.ContextMenuItemName.DELETE
    REPLYWebPDF.ContextMenuItemName.REPLY
    COPY HIGHLIGHT TEXTWebPDF.ContextMenuItemName.COPY_HIGHLIGHT_TEXT
    REDACT APPLY ALLWebPDF.ContextMenuItemName.REDACT_APPLY_ALL
    REDACT APPLYWebPDF.ContextMenuItemName.REDACT_APPLY
    TEXT SELECT COPYWebPDF.ContextMenuItemName.TEXT_SELECT_COPY
    TEXT SELECT HIGHLIGHTWebPDF.ContextMenuItemName.TEXT_SELECT_HIGHLIGHT
    TEXT SELECT UNDERLINEWebPDF.ContextMenuItemName.TEXT_SELECT_UNDERLINE
    TEXT SELECT STRIKEOUTWebPDF.ContextMenuItemName.TEXT_SELECT_STRIKEOUT
    TEXT SELECT SQUIGGLYWebPDF.ContextMenuItemName.TEXT_SELECT_SQUIGGLY
    TEXT SELECT REPLACEWebPDF.ContextMenuItemName.TEXT_SELECT_REPLACE
    TEXT SELECT INSERTWebPDF.ContextMenuItemName.TEXT_SELECT_INSERT
  • status:
    1. Disabled: Disable/Enable the item
      • true: Grey out the item and disable click
      • false: Item is enabled
    2. 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 posible 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.

Updated on July 24, 2019

Was this article helpful?

Related Articles