ComPDF for Web

Namespace: UI

UI

ComPDFKit WebViewer Instance UI namespace. The namespace containing WebViewer's user interface controls and classes.

Methods

<static> addCustomModal(options)

Parameters:
Name Type Description
options object
Properties
Name Type Argument Default Description
dataElement string

Unique name of custom modal.
disableBackdropClick boolean <optional>
 false

Disable closing modal when user clicks outside of content area
disableEscapeKeyDown boolean <optional>
 false

Disable closing modal when user hit escape from keyboard
render string | function <optional>

Function rendering custom model contents, this is optional
header object

JSON object with title, className, style and children parameter
body object

JSON object with title, className, style and children parameter
footer object

JSON object with title, className, style and children parameter
Example
const modal = {
  dataElement: 'myCustomModal',
  header: {
    title: 'Header',
    className: 'myCustomModal-header',
  },
  body: {
    style: {
      padding: '20px',
      backgroundColor: '#fff8e1'
    },
    innerHTML: `
      <div style="display: flex; align-items: center; gap: 20px;">
        <div>
          <p>Author</p>
          <input type="text" style="height: 28px; margin-top: 8px;">
        </div>
        <div>
          <p>Annotator</p>
          <input type="text" style="height: 28px; margin-top: 8px;">
        </div>
      </div>
    `
  },
  footer: {
    className: 'myCustomModal-footer footer',
    style: {
      display: 'flex',
      justifyContent: 'flex-end',
    },
    children: [
      {
        title: 'Cancel',
        style: {
          'margin-right': '8px',
          cursor: 'pointer'
        },
        className: 'modal-button cancel-button',
        onClick: () => console.log('Cancel button')
      },
      {
        title: 'OK',
        button: true,
        style: {},
        className: 'modal-button confirm ok-btn',
        onClick: () => console.log('OK button')
      },
    ]
  },
  disableBackdropClick: false,
  disableEscapeKeyDown: false
};
instance.UI.addCustomModal(modal);

<static> addPanel(panel)

Adds a custom panel to the WebViewer UI.

Parameters:
Name Type Description
panel object

The panel to add.
Example
instance.UI.addPanel({
  dataElement: 'pageModePanel',
  location: 'right',
  render: 'pageModePanel'
});

<static> annotationPopup()

Annotation popup in the WebViewer UI.

Implements:
Example
instance.UI.annotationPopup.someMethod();

<static> closeElement(dataElement)

Set the element invisible in the WebViewer UI.

Parameters:
Name Type Description
dataElement string

The data element.
Example
instance.UI.closeElement(['leftPanel', 'rightPanel']);

<static> closeElements(dataElements)

Set the elements invisible in the WebViewer UI.

Parameters:
Name Type Description
dataElements Array.<string>

The data elements.
Example
instance.UI.closeElements(['leftPanel', 'rightPanel']);

<static> contentEditorPopup()

Content editor popup in the WebViewer UI.

Implements:
Example
instance.UI.contentEditorPopup.someMethod();

<static> cropPagePopup()

Crop page popup in the WebViewer UI.

Implements:
Example
instance.UI.cropPagePopup.someMethod();

<static> disableElements(elements)

Hide navigation bar elements. Refer to Hide/Show Navigation Bar Elements for details.

Parameters:
Name Type Description
elements Array

An array of elements to disable.

<static> enableElements(elements)

Show navigation bar elements. Refer to Hide/Show Navigation Bar Elements for details.

Parameters:
Name Type Description
elements Array

An array of elements to enable.

<static> getPanels()

Gets all panels in the WebViewer UI.

Returns:

An array of all panels in the WebViewer UI.

Type
Array
Example
const panels = instance.UI.getPanels();

<static> isElementOpen(dataElement)

Check if the element is open in the WebViewer UI.

Parameters:
Name Type Description
dataElement string

The data element.
Returns:

True if the element is open, false otherwise.

Type
boolean

<static> loadDocument(url [, options])

Load new document into the WebViewer UI.

Parameters:
Name Type Argument Description
url string | File | ArrayBuffer

The URL of the document or File object to load.
options object <optional>

The options for loading the document.

Properties
Name Type Argument Description
filename string <optional>

The filename to use when downloading the document.
password string <optional>

The password to use when loading a password-protected document.
onError function <optional>

The callback function to call when an error occurs.

<static> openElement(dataElement)

Set the element visible in the WebViewer UI.

Parameters:
Name Type Description
dataElement string

The data element.
Example
instance.UI.openElement('leftPanel');

<static> openElement(dataElements)

Set the elements visible in the WebViewer UI.

Parameters:
Name Type Description
dataElements Array.<string>

The data element.
Example
instance.UI.openElement('leftPanel');

<static> setActiceToolMode(groupDataElement)

Sets the current active toolbar group. Refer to UI Customization for details.

Parameters:
Name Type Description
groupDataElement string

The groups dataElement. Default values are: toolMenu-View, toolMenu-Annotation, toolMenu-Form, toolMenu-Sign, toolMenu-Security, toolMenu-Compare, toolMenu-Editor

<static> setActiveElementTab(dataElement, tab)

Set the active tab of an element in the WebViewer UI.

Parameters:
Name Type Description
dataElement string

The data element.
tab string

The tab to set as active.
Example
instance.UI.setActiveElementTab('leftPanel', 'ANNOTATION');

<static> setEnableSignatureTemplates(enable)

Enables or disables signature templates in the WebViewer UI.

Parameters:
Name Type Description
enable boolean

True to enable signature templates, false to disable them.

<static> setFormBoardFold(fold)

Sets the fold state of the form field board in the WebViewer UI.

Parameters:
Name Type Description
fold boolean

True to fold the form field board, false to unfold it.

<static> setFormBoardPosition(position)

Sets the position of the form field board in the WebViewer UI.

Parameters:
Name Type Description
position object

The position to set the form field board to.

Properties
Name Type Argument Description
left number <optional>

The x coordinate of the form field board.
top number <optional>

The y coordinate of the form field board.

<static> setHeaderItems(callback)

You can customize header items. Refer to UI Customization for details.

Parameters:
Name Type Description
callback function

Callback function to handler different operations on the header.

<static> setHighlightForm(highlight)

Sets whether form fields are highlighted in the WebViewer UI.

Parameters:
Name Type Description
highlight boolean

True to highlight form fields, false to not highlight them.

Sets whether links are highlighted in the WebViewer UI.

Parameters:
Name Type Description
highlight boolean

True to highlight links, false to not highlight them.

<static> setLanguage(language)

Sets the language of the WebViewer user interface.

Parameters:
Name Type Description
language 'zh-CN' | 'en' | 'th' | 'fr' | 'zh-TW' | 'ja'

The language to set the WebViewer user interface to.

<static> setPanels(panelList)

Sets the panels in the WebViewer UI.

Parameters:
Name Type Description
panelList Array

An array of panels to set in the WebViewer UI.
Example
instance.UI.setPanels([
 {
 dataElement: 'CustomPanel',
 location: 'left',
 render: function() {
 var div = document.createElement('div');
 div.innerHTML = 'Custom Panel';
 return div;
 }
 }
 ]);

<static> setTheme(theme)

Sets the theme of the WebViewer UI.

Parameters:
Name Type Description
theme 'LIGHT' | 'DARK'

The theme to set the WebViewer UI to.

<static> setToolbarGroup(groupDataElement)

Sets the toolbar group to the specified group.

Parameters:
Name Type Description
groupDataElement string

The groups dataElement. Default values are: toolbarGroup-View, toolbarGroup-Annotation, toolbarGroup-Form, toolbarGroup-Measurement, toolbarGroup-Sign, toolbarGroup-Security, toolbarGroup-Redaction, toolbarGroup-Compare, toolbarGroup-Editor, toolbarGroup-Document, toolbarGroup-Separation

<static> textPopup()

Text popup in the WebViewer UI.

Implements:
Example
instance.UI.textPopup.someMethod();