React Web - Custom Modal on click of attach icon

Technical Support WebViewer
, ,
1

WebViewer Version: 8.3.1

summary:
I want to implement custom modal on click of attachment widget and image in insert menu
how can i do this?

  1. whenever receiver try to click stamp or attachment icon its opening default signature modal
    I want to open my custom modal.
    image
    image735×790 28.9 KB

    image
    image818×840 26.8 KB
2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hello there.

This Attach placeholder is not native. Could you tell me exactly what it is?

4

@dfelix @skumarwudza is trying to create a custom widget placeholder for attachment and want to open custom modal.
We also facing the same issue . Not only for attachment but also have issue with opening existing modal.
Consider below scenario:

  1. As there is signatureWidgetAnnotation to create the signature placeholder and when we click on that signature modal get auto open.
  2. We want same type of widget for Stamp and attachment placeholder and when we click on that we able to open either existing Stamp modal or our own custom modal.

We are stuck at this place please help us on this . Thanks in advance.

5

@vtiwari Sounds good. But since this is not native, I need to know how are you guys creating it and what type of thing it is so I can tell you how to open a custom modal when clicking it.

Is it a custom annotation? if yes, does it extend some other annotation?

6

@dfelix It’s SignatureWidget annotation with Image in background. We tried to use ButtonWidgetAnnotation but in this background image does not applying.

7

@vtiwari

Unfortunately, there is no easy and clean way to do this with the current API, but I could achieve the desired behavior with the following code snippet:

const { annotationManager, Annotations } = instance.Core;
  const {setCustomModal, openElements} = instance.UI;

  const modal = {
    dataElement: 'meanwhileInFinlandModal',
    render: () => {
      const div = document.createElement("div");
      div.style.color = 'white';
      div.style.backgroundColor = 'hotpink';
      div.style.padding = '20px 40px';
      div.style.borderRadius = '5px';
      div.innerText = 'Meanwhile in Finland';
      return div;
    }
  }
  setCustomModal(modal);

  annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    if (action === 'add') {
      setTimeout(() => {
        annotations.forEach((annotation) => {
          if (annotation instanceof Annotations.SignatureWidgetAnnotation) {
            annotation.innerElement.childNodes[0].childNodes[0].addEventListener('click', (e) => {
              e.stopImmediatePropagation();
              openElements(['meanwhileInFinlandModal'])
            });
          }
        })
      }, 1)
    }
  })
1 Like
8

Thanks @dfelix . It really worked. Just to add here setTimeout((),timeDuration) , Here timeDuration should be enough to render PDF properly otherwise annotation.innerElement will be undefined. I have used 1000 for safer side as Large size PDF takes time to download from server.

9

@dfelix Now we are able to open the attachment modal and able to attach the file .
Now we are facing issue that after attach the file when we generate final pdf and open final pdf in Pdf Adob reader but attachment does not open clicking of attachment icon.
Below is the method we are using to generate final PDF:

  • Load the pdf from local device and create the attachment placeholder on the pdf.

  • Get the byte array from pdfViewer and upload into our server as file . for eg. sample.pdf

  • Load the pdf from the server using url and click on attachment placeholder icon and attach a file (for eg. image file)

  • Export the xfdf using for const xfdf = await annotManager.exportAnnotations({
    widgets: false,
    links: false,
    });

  • Then we upload xfdf server and our and server used pdftron sdk and merge xfdf into original pdf .

  • when we download the the final PDF and open it in pdf Adobe reader we are not able to open attachment from final PDF.

  • While If we download the pdf from webviewer setting menu , adob reader able to detect the attachment and able to open the attached file but it doesn’t work when we generate pdf using merging xfdf with pdf.

Thanks in advance

10

@vtiwari

What does the XFDF look like when you import it? And if you export the XFDF again right after importing it, what does it look like?

11

@dfelix Again back to this topic . As this solution (adding click listener) on innerElements for when number of pages in pdf is less than 10. When pdf page in increase 20 or 30 then for annotation present in last page (between 15 to 30) click listener failed to add because innerElement is null for those annotation.

we have tried to upgrade pdftron version from 8.3.1 to 8.12.0 but it doesn’t work. Please help us as we are stuck at this place we must have to give the support for for atleast 100 page pdf .

Thanks in advance.

12

@system any update on above question?