Please give a brief summary of your issue:
Ask the user if they want to delete the file if they try to delete the last page.
Please describe your issue and provide steps to reproduce it:
Right now, if you try to delete the last page in a document, the plugin pops up with a message saying “You cannot delete all pages in the document.” I would like to capture and override this and instead give the user a confirm box saying this will delete the file and if they’re sure, and if they confirm use my own code to send a message to the API to delete the file.
You will have to override the onClick handler of the delete button within the Thumbnail Panel. A little snippet will help get you started:
instance.UI.updateElement('thumbDelete', {
onClick: () => {
const selectedPages = instance.UI.ThumbnailsPanel.getSelectedPageNumbers();
//
// Here you could determine the total number of pages left vs. what is selected.
// If it is the last page, you could close the document and delete it.
//
// The API for deleting pages will not allow you to delete all pages
// instead you should close it and then delete it from your server/file system
//
// https://docs.apryse.com/api/web/Core.Document.html#removePages
// https://docs.apryse.com/api/web/Core.DocumentViewer.html#closeDocument
}
});
It’s important to note the delete API will not let you delete all pages. You’ll need to write logic to determine if it’s the last remaining page being deleted, and then close the document and delete it from wherever it’s opened from.
How can I have the code go into the default version of the event for cases where I don’t want to allow the last page to be deleted?
instance.UI.ThumbnailsPanel doesn’t seem to be recognized. I ended up using instance.UI.getSelectedThumbnailPageNumbers()
Also, this code gets the collection of selected thumbnails. When I first open the the thumbnail sidebar, the first thumbnail seems to be in a state where it has focus but isn’t actually selected. It has a thin outline around it and buttons underneath it (including the delete button). If I click that thumbnail, the outline gets thicker, the same thickness as other thumbnails if I click them. If I click the delete button without clicking any thumbnail, the code shows no thumbnails as being selected.
I didn’t see any way in the event to find out which delete button was being clicked.
For your first question, you would still call Document.removePages but would need to handle a .catch scenario for when there is an attempt to delete the last page. An exception is thrown when this happens.
Uncaught doc.removePages: unable to remove pages: 1. This would result in no pages remaining. Please leave at least one page.
You would then need to use the custom modal APIs to display an error message to your users. Have a look at our custom modal guide to help you get started.
Ahh yes - sorry about that. I was referring to later versions of WebViewer. Regarding the last part about not knowing which button was clicked, you can pass in an (event) argument to the onClick handler and look at the parent/sibling elements until you find the page number.
instance.UI.updateElement('thumbDelete', {
onClick: (event) => {
// event.target is the button that was clicked.
// Now you should navigate to the 'page-label' div to find the page number.
console.log(event.target);
const selectedPages = instance.UI.ThumbnailsPanel.getSelectedPageNumbers();
});