Customise onClick for "deletePage" on UI. PageManipulationOverlay

Technical Support
, ,
1

Product: PDFTron WebViewer

Product Version: 10.3.0

Please give a brief summary of your issue:
Customize warning model on onClick for “deletePage” on UI. PageManipulationOverlay .

Please describe your issue and provide steps to reproduce it:
I want to display customize warning model when I click on Delete from UI.PageManipulationOverlay and hide the existing warning model.

image
image1155×423 20 KB

I have tried below code block to updateElement but it didn’t work. (console statement is not printing even onclick of Delete.)

webViewerInstance.UI.updateElement('deletePage',{
						onClick: () => {
							console.log('Hi');
						}
					})

Also, If I want to change color and css styling of warning dialog box. How to apply new style and override existing color of dialog button?

Any help is appreciated.
Regards,
Hiral.

1 Like
2

Hello Hiral,

The updateElement API will not work because the data element in this case is not an HTML element of type button. Only the data element of HTML elements that are of the type ‘button’ will work.

You can use the PageManipulationOverlay add API to add custom operations to the flyout menu.
The addCustomModal API can be used to create your customized warning modal.

API Guides:
PageManipulationOverlay
AddCustomModal

const { documentViewer, } = instance.Core;
const { UI } = instance;

UI.disableElements(['deletePage']); //disable the default delete operation

UI.pageManipulationOverlay.add([
  {
    type: 'customPageOperation',
    header: 'New Header',
    dataElement: 'customPageOperationsHeader',
    operations: [
      {
        title: 'Delete',
        img: 'icon-delete-line',
        onClick: (selectedPageNumbers) => {
          window.selectedPageNumbers = selectedPageNumbers;
          const modal = {
            dataElement: 'deleteModal',
            header: {
              title: 'Warning',
              className: 'myCustomModal-header',
              style: {}, // optional inline styles
              children: []
            },
            body: {
              className: 'myCustomModal-body',
              style: {}, // optional inline styles
            },
            footer: {
              className: 'myCustomModal-footer footer',
              style: {}, // optional inline styles
              children: [
                {
                  title: 'Cancel',
                  button: true,
                  style: {},
                  className: 'modal-button cancel-button',
                  onClick: (e) => {
                    UI.closeElements(modal.dataElement);
                    delete window.selectedPageNumbers;
                  }
                },
                {
                  title: 'OK',
                  button: true,
                  style: {},
                  className: 'modal-button confirm-button',
                  onClick: (e) => {
                    documentViewer.getDocument().removePages(window.selectedPageNumbers);
                    UI.closeElements(modal.dataElement);
                    documentViewer.refreshAll();
                    documentViewer.updateView();
                    delete window.selectedPageNumbers;
                  }
                },
              ]
            }
          };
          UI.addCustomModal(modal);
          UI.openElements([modal.dataElement]);
        },
        dataElement: 'customPageOperation',
      }
    ]
  },
  { type: 'divider' }
]);

Regarding your question about styling, you can follow this guide here: Custom Modal Guide

Note that this is just a sample, and you’re free to modify the logic to suit your specific needs.

Best Regards,
Darian Chen

1 Like
3

This helps. Thank you so much.

If I have to add the same option in thumbnail “More” option.
image
How can I add it here?

Regards,
Hiral Dodia

1 Like
4

Hello Hiral,

Unfortunately, I don’t believe we have an option to manipulate that particular menu in our API documentation.

Best Regards,
Darian

1 Like