Programmatically Toggle Comments Panel in PDF Embed API Viewiwer

[gedsmurf1]

Hello,

Is there a way to toggle the Annotation's Comment Panel programatically?

We want the Comments Panel to be shown/hidden depending on some application settings.

Thanks

[Shubhanshu Dixit]

Hi, Thanks for using PDF Embed API. Please look for setConfig API under section APIs to control UI configurations in the documentation.

[gedsmurf1]

Thank you for your response, I looked at the documentation but I am not sure which constant it is.

[Joel Geraci · Accepted solution]

You can disable the comments pane using setting showCommentsPanel to false in the SetConfig object.

[gedsmurf1]

Can we call setConfig after the previewFile? Which object has the setConfig method?

We want to call the setConfig when a page button is clicked.

 
document.addEventListener("adobe_dc_view_sdk.ready", function () {
	var adobeDCView = new AdobeDC.View({ clientId: pdfInfo.adobeClientId, divId: "adobe-dc-view" });
    var previewFilePromise = adobeDCView.previewFile({
        content: {
            location: { url: fileUrl }
        },
        metaData: {
            fileName: pdfInfo.name || "file.pdf",
            id: pdfInfo.id || "file1" 
        } 
    }, {
        enableAnnotationAPIs: true,
    });

    previewFilePromise.then(adobeViewer => {
        adobeViewer.getAnnotationManager().then(annotationManager => {
            // All annotation APIs can be invoked here
            console.log("loading annotations ....")

            return loadDocumentAnnotations(pdfInfo.url).then(function (listOfAnnotations) {
                console.log("List of annotations from db ", listOfAnnotations);
                if (listOfAnnotations && listOfAnnotations.length) {
                    annotationManager.addAnnotations(listOfAnnotations).then(function () {
                        registerAnnotationEventListeners(annotationManager);
                    });
                } else {
                    registerAnnotationEventListeners(annotationManager);
                }
             
                var note = window.pdfInfo.note;
                if (note) {
                    annotationManager.selectAnnotation(note);
                }
            }).catch(function(){
                registerAnnotationEventListeners(annotationManager);
            }); 
        });

        adobeViewer.getAPIs().then(function (apis) {
            if (window.pdfInfo.page) {
                var x = Number(pdfInfo.x || 0);
                var y = Number(pdfInfo.y || 0);
                var page = Number(page) || 1;

                setTimeout(function () {
                    apis.gotoLocation(page, x, y);
                }, 800);
            };
			window.AdobeViewerApi = apis;
         });
    });
	
	window.AdobeViewer = adobeDCView;
});


document.getElementById("showCommentsPanelButton").addEventListener("click", function(e){
	//we want something like this but there is no setConfig for both AdobViewer and AdobeViewerApi
	AdobeViewer.setConfig({showCommentsPanel: true });
	AdobeViewerApi.setConfig({showCommentsPanel: true });
});

document.getElementById("hideCommentsPanelButton").addEventListener("click", function(e){
	//we want something like this but there is no setConfig for both AdobViewer and AdobeViewerApi
	AdobeViewer.setConfig({showCommentsPanel: false });
	AdobeViewerApi.setConfig({showCommentsPanel: false });
});

[gedsmurf1]

Nevermind, I found it now it is on the annotationManager object.

Thank you very much!

[gedsmurf1]

Btw, both methods works:

annotationManager.setConfig({ showCommentsPanel: true });

AdobeViewer.executeCommand('TOGGLE_COMMENTING', true);

[aknoerig]

This doesn't quite answer the question. 🙂
If the comments panel is enabled, the default is that it will be in "open" state when the viewer is initially loaded.
This is oftentimes undesirable, as it takes a way a big portion of the screen.
How can I set it to be enabled, but initially be in "collapsed" state? Or asked differently, how can I toggle the open/closed state of the comments panel?

[aknoerig]

Turns out there are indeed three behaviours (which I'd call a bug):

1. setting showCommentsPanel: true will show the comment menu button and open the comments panel on start
2. setting showCommentsPanel: false will completely hide the comment menu
3. not setting showCommentsPanel leads to the desired behaviour: the comment menu button is shown, but the panel remains collapsed

(Marking code with underline here because this editor doesn't seem to have in-line code formatting...)