How to use AnnotationToolbarSettings API

  1. I am trying to hide some of the annotation settings I don't want the user to use, I am not able to do this through the properties, and currently the only way I am able to accomplish this is by hiding the buttons. It is very hacky.
  2. I am trying to open the annotation menu on page load.


  viewer = new ej.pdfviewer.PdfViewer({

                    isResponsive: true,

                    enableTextMarkupAnnotations: true,

                    enableHighlightAnnotation: true,

                    enableUnderlineAnnotation: false,

                    enableFormDesigner: false,

                    enableFormFields: false,

                    enableFreeText: false,

                    enableHandwrittenSignature: false,

                    enableImportAnnotationMeasurement: false,

                    enableInkAnnotation: false,

                    enableMeasureAnnotation: false,

                    enableStampAnnotations:false,

                    enableStrikethroughAnnotation: false,

                    enableSignature: false,

                    documentPath: blobId.toString(),

                    annotationSettings: { author: author },

//The below is what is not working:

                    annotationToolbarSettings: {

                        annotationToolbarItem: ["HighlightTool"]

                    },

                    isFileName: false,

                    //pageChange: "currentPageChanged",

                    documentLoad: "documentLoaded",

                    serviceUrl: window._PdfViewerUrl

                });

                ej.pdfviewer.PdfViewer.Inject( ej.pdfviewer.Magnification, ej.pdfviewer.BookmarkView, ej.pdfviewer.ThumbnailView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.Annotation);


        viewer.appendTo('#PdfViewer');

        debugger;

        viewer.toolbar.showToolbarItem(["OpenOption"], false);

        viewer.toolbar.showToolbarItem(["FormDesignerEditTool"], false);

        viewer.toolbar.showToolbarItem(["PageNavigationTool"], false);

        $(".e-pv-fontfamily-container").remove();

        $(".e-pv-stamp-template-container").remove();

        $(".e-pv-calibrate-template-container ").remove();

        $(".e-pv-annotation-freeTextEdit-container").remove();

        $(".e-pv-sign-template-container").remove();

        $(".e-pv-annotation-ink-container ").remove();

        $(".e-pv-fontsize-container").remove();

        $(".e-pv-text-color-container").remove();

        $("#PdfViewer_annotation_textcolor").remove();

        $(".e-pv-alignment-container ").remove();

        $(".e-pv-text-properties-container").remove();

        $(".e-pv-ink-separator-container").remove();

        $(".e-pv-calibrate-separator-container").remove();

        $(".e-pv-freetext-separator-container").remove();

        $(".e-pv-stamp-separator-container").remove();

        $(".e-pv-sign-separator-container").remove();

        $("#PdfViewer_shape_arrowContainer").hide();

        $(".PdfViewer_shape_lineContainer").hide();

        $(".PdfViewer_shape_circleContainer").hide();

        $(".PdfViewer_shape_polygonContainer").hide();

        $("#PdfViewer_annotationIcon").click();



1 Reply

DM Dhivyabharathi Mohan Syncfusion Team March 22, 2022 02:55 PM UTC

Hi Landy, 
 
Please find the details, 
 
Query 
Details 
  1. I am trying to hide some of the annotation settings I don't want the user to use, I am not able to do this through the properties, and currently the only way I am able to accomplish this is by hiding the buttons. It is very hacky.
 
 
You can use the AnnotationToolbarItems property in the toolbarSettings property for customizing the annotation toolbar items using the below code snippets. We have shared the sample and code snippets for your reference. 
 
 
Code snippets: 
viewer.toolbarSettings = { 
  annotationToolbarItems: ['HighlightTool'], 
}; 
 
 
Please try this and revert to us, if you need further assistance. 
 
 
  1. I am trying to open the annotation menu on page load.
 
 
You can use the documentLoad event to hide the toolbar items while loading the PDF document using the below code snippets. We have shared the sample and code snippets for your reference. 
 
 
Code snippets: 
 
 
viewer.documentLoad = (args) => { 
  viewer.toolbar.showToolbarItem(['OpenOption'], false); 
 
  viewer.toolbar.showToolbarItem(['FormDesignerEditTool'], false); 
 
  viewer.toolbar.showToolbarItem(['PageNavigationTool'], false); 
}; 
 
 
 
 
Regards, 
Dhivya. 


Loader.
Up arrow icon