• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Programmatically Toggle Comments Panel in PDF Embed API Viewiwer

Community Beginner ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

Hello,

 

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

gedsmurf1_0-1612764414177.png

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

 

Thanks

TOPICS
PDF Embed API

Views

1.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 08, 2021 Feb 08, 2021

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

Votes

Translate

Translate
Adobe Employee ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 08, 2021 Feb 08, 2021

Copy link to clipboard

Copied

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

gedsmurf1_0-1612780623811.png

 

gedsmurf1_1-1612780713911.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 08, 2021 Feb 08, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 09, 2021 Feb 09, 2021

Copy link to clipboard

Copied

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 });
});

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 09, 2021 Feb 09, 2021

Copy link to clipboard

Copied

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

 

Thank you very much!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 09, 2021 Feb 09, 2021

Copy link to clipboard

Copied

Btw, both methods works:

 

annotationManager.setConfig({ showCommentsPanel: true });

AdobeViewer.executeCommand('TOGGLE_COMMENTING', true);

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 25, 2023 Apr 25, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 26, 2023 Apr 26, 2023

Copy link to clipboard

Copied

LATEST

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...)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources