Add custome radio button in formFieldEditPopup

Technical Support
1

Product: pdftron/webviewer in ract js

Product Version: “@pdftron/webviewer”: “^10.4.0”, and “react”: “^18.2.0”,

Please give a brief summary of your issue:
can we add a custom radio option in formFieldEditPopup for text box only if yes can you provide me a code for it if not so can we add custom text box in side bar when i click on that its allow me to create a box for text input
below is the code

useEffect(() => {
    if (webViewer.attachmentBlob) {
      WebViewer(
        {
          path: "/webviewer/lib",
          showLocalFilePicker: true,
          fullAPI: true,
          licenseKey:
            "16939******", 
        },

        viewer.current
      ).then(async (instance) => {
        setInstance(instance);
        instance.UI.loadDocument(base64ToBlob(webViewer.attachmentBlob), {
          filename: fileName,
        });
        const { documentViewer, annotationManager, Annotations, PDFNet } =
          instance.Core;

        //======================================== disable header =====================================//
        instance.UI.disableElements([
          "annotationPopup",
          "outlinesPanelButton",
          "comboBoxFieldToolGroupButton",
          "listBoxFieldToolGroupButton",
          "toolsOverlay",
          "toolbarGroup-Shapes",
          "toolbarGroup-Edit",
          "toolbarGroup-Insert",
          "shapeToolGroupButton",
          "menuButton",
          "freeHandHighlightToolGroupButton",
          "underlineToolGroupButton",
          "freeHandToolGroupButton",
          "stickyToolGroupButton",
          "squigglyToolGroupButton",
          "strikeoutToolGroupButton",
          "notesPanel",
          "viewControlsButton",
          "selectToolButton",
          "toggleNotesButton",
          "searchButton",
          "freeTextToolGroupButton",
          "crossStampToolButton",
          "checkStampToolButton",
          "dotStampToolButton",
          "rubberStampToolGroupButton",
          "dateFreeTextToolButton",
          "eraserToolButton",
          "panToolButton",
          "signatureToolGroupButton",
          "viewControlsOverlay",
          "contextMenuPopup",
        ]);
        //======================================== disable header =====================================//

        //======================================== for documentLoaded =====================================//
        await documentViewer.getAnnotationsLoadedPromise();
        documentViewer.addEventListener("documentLoaded", async () => {
          // annotManager.setCurrentUser(name);
          if (webViewer.xfdfData !== "" && annotationManager) {
            console.log("newxfdf", webViewer.xfdfData);
            console.log("newxfdf", pdfResponceDataRef.current);
            try {
              await annotationManager.importAnnotations(
                pdfResponceDataRef.current
              );
            } catch (error) {
              console.log("importAnnotations", error);
            }
          }
        });
        const customBtn = {
          type: "actionButton",
          label: "some-label",
          dataElement: "someElement",
          onClick: () => console.log("clicked"),
        };
        instance.UI.addEventListener("visibilityChanged", (e) => {
          const { element, isVisible } = e.detail;

          if (element === "formFieldEditPopup" && isVisible) {
            // Wait for the formFieldEditPopup to be fully initialized
            console.log("formFieldEditPopup Panel is open? ", element);
            console.log("formFieldEditPopup Panel is open? ", isVisible);
            setTimeout(() => {
              const fieldFlagsContainer = document.querySelector(
                ".field-flags-container"
              );
              if (fieldFlagsContainer) {
                // Add custom radio button inside the field-flags-container
                const customRadioButton = document.createElement("input");
                customRadioButton.type = "radio";
                customRadioButton.name = "custom-radio";
                // Set other properties and attributes as needed for the radio button
                // ...

                // Append the custom radio button to the field-flags-container
                fieldFlagsContainer.appendChild(customRadioButton);
              }
            }, 0);
          }
        });
        //======================================== for documentLoaded =====================================//
      });
    }
  }, [webViewer.attachmentBlob]);

Please provide a link to a minimal sample where the issue is reproducible:

Screenshot 2024-01-17 122717
Screenshot 2024-01-17 122717533×653 36.1 KB

1 Like
2

in details i want to add checkboxes in my edittextbox filed

which is this:

Screenshot 2024-01-17 122717
Screenshot 2024-01-17 122717533×653 36.1 KB

and this is the code what i am ussing currently

 instance.UI.addEventListener("visibilityChanged", (e) => {
          const { element, isVisible } = e.detail;

          if (element === "formFieldEditPopup" && isVisible) {
            // Wait for the formFieldEditPopup to be fully initialized
            console.log("formFieldEditPopup Panel is open? ", element);
            console.log("formFieldEditPopup Panel is open? ", isVisible);
            instance.UI.contextMenuPopup.add({
      type: 'actionButton',
      label: 'some-label',
      onClick: () => console.log('clicked'),
    });
          }
        });

this is just for usder stading
its showing error which is this :Cannot read properties of undefined (reading ‘add’)

so i want to add more ui changes like add more check box here
and its apply only on text box edit popup only?
if we cant so how can i create a custom text box field ?

1 Like
3

Hello huzeifajahangir,

WebViewer currently does not have an API exposed for that kind of behaviour.
You can create custom annotation by following this guide: Custom-annotations | Apryse Documentation
Also you might want to fork out, since this functionality would require intensive customisation. You a can find a guide here: Advanced-customization | Apryse Documentation

1 Like