Custom Modals in WebViewer UI

WebViewer supports custom modals. There are multiple APIs to help you manage them.

To create a new custom modal, you can use the addCustomModal API. In order to create a custom modal, you need, at least, the dataElement that will be used to identify the modal, and the structural components header, body and footer.

The header element requires the following properties:

• title String, required. Used for the title of the modal
• className String, optional. CSS class name for the header section of the modal
• style Object, optional. Inline style as an object, for example: { width: '12px', height: '23px', color: 'red' }
• children Array, optional. The parameter for passing custom DOM elements to the header section of the modal

The body components is the main section of the custom modal and it requires following properties:

• title String, optional. Used for the <p> text in body of the modal
• className String, optional. CSS class name for the body section of the modal
• style Object, optional. Inline style as an object, for example: { width: '12px', height: '23px', color: 'red' }
• children Array, optional. The parameter for passing custom DOM elements to the body section of the modal

The footer section of the custom modal requires the following parameters:

• className String, optional. CSS class name for the footer section of the modal
• style Object, optional. Inline style as an object, for example: { width: '12px', height: '23px', color: 'red' }
• children Array, optional. The parameter for passing custom DOM elements to the footer section of the modal

Once the custom modal is added, you can manage its visibility with these handy APIs:

• UI.openElement
• UI.closeElement
• UI.toggleElement
• UI.disableElements

Here is a code snippet that add a custom modal to WebViewer and immediately opens it:

JavaScript

WebViewer({
  initialDoc: "mydoc.pdf",
  css: 'path/to/stylesheet.css'
}, viewerElement).then(instance => {
  // Creating HTML DOM elements
  let divInput1 = document.createElement('input');
  divInput1.type = 'text';
  divInput1.id = 'unique_id_1';
  divInput1.style = 'height: 28px; margin-top: 10px; margin-right: 20px';

  let divInput2 = document.createElement('input');
  divInput2.type = 'text';
  divInput2.id = 'unique_id_2';
  divInput2.style = 'height: 28px; margin-top: 10px;';

  // Custom modal parameters
  const modalOptions = {
    dataElement: 'myCustomModal',
    header: {
      title: 'Header',
      className: 'myCustomModal-header',
    },
    body: {
      className: 'myCustomModal-body',
      style: {},
      children: [ divInput1, divInput2 ],
    },
    footer: {
      className: 'myCustomModal-footer footer',
      style: {},
      children: [
        {
          title: 'Cancel',
          button: true,
          style: {},
          className: 'modal-button cancel-form-field-button',
          onClick: (e) => {console.log('Cancel button') }
        },
        {
          title: 'OK',
          button: true,
          style: {},
          className: 'modal-button confirm ok-btn',
          onClick: (e) => { console.log('OK button') }
        },
      ]
    }
  }

  instance.UI.addCustomModal(modalOptions);

  instance.UI.openElements([modalOptions.dataElement]);
});

For styling these components, see Customizing WebViewer UI Styles. Here is an example stylesheet file for the above code.

CSS

.myCustomModal-header {
  background-color: red;
}

.myCustomModal-body {
  background-color: green;
}

.myCustomModal-footer {
  background-color: blue;
}

This is the output for the code above: