Foxit Developer

ViewerUI ​

Overview ​

ViewerUI provides methods to create and manage UI elements. PDFViewCtrl and UIExtension call them for custom UI such as:

  • Context menus
  • Alert dialogs
  • Loading overlays and similar UI.

INFO

For the full ViewerUI API, see API Reference.

Built-in implementations ​

The SDK provides two built-in ViewerUI implementations:

  1. TinyViewerUI in PDFViewCtrl
  2. XViewerUI in UIExtension

Core methods ​

createContextMenu ​

Creates and registers a context menu.

typescript
function createContextMenu(
    key: any,           // Owner of the menu instance
    anchor: HTMLElement,// Element that receives the contextmenu event
    config: {
        selector: string,           // CSS selector that triggers the menu
        items: Array<{             // Menu item configuration
            nameI18nKey: string,   // i18n key for the menu item label
            // ... other menu item options
        }>
    }
): IContextMenu | undefined

Tip: Returning undefined

hides the menu for that target. See the jQuery contextMenu plugin for options.

Dialog methods ​

typescript
// Alert dialog
function alert(message: string): Promise<void>

// Confirm dialog
function confirm(message: string): Promise<void>

// Text input dialog
function prompt(
    defaultValue: string,
    message: string,
    title: string
): Promise<string>

// Password input dialog
function promptPassword(
    defaultValue: string,
    message: string,
    title: string
): Promise<string>

Other utilities ​

typescript
// Show loading overlay
function loading(coverOn: HTMLElement): Function

// Create text selection tooltip
function createTextSelectionTooltip(
    pageRender: PDFPageRender
): IFloatingTooltip

Custom implementations ​

Customize with UIExtension ​

javascript
class CustomViewerUI extends UIExtension.XViewerUI {
    alert(message) {
        // Custom alert implementation
        console.log('Custom alert:', message);
        return Promise.resolve();
    }
}

new PDFUI({
    viewerOptions: {
        viewerUI: new CustomViewerUI()
    }
})

Customize with PDFViewCtrl ​

javascript
class CustomViewerUI extends PDFViewCtrl.viewerui.TinyViewerUI {
    alert(message) {
        // Custom alert implementation
        console.log('Custom alert:', message);
        return Promise.resolve();
    }
}

new PDFViewer({
    viewerUI: new CustomViewerUI()
})