Why Annotation tools not appearing on my PDF?

[Krunal Doshi]

Hi,

I am using an iframe to render PDF in div tag as per the documentation. I have included my registered client id for my pdf embed api. I have also included embed mode as Inline and showAnnotationTools: true. Still I do not see Annotation tools appearing on PDF viewer. Below is the code I am using-

<div id="adobe-dc-view" style="width: 800px; box-shadow: 1px 1px 10px 1px #dadada;"></div>
<script type="text/javascript" src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
  <script type="text/javascript">
	  /* The PDF embed mode option here */
	  const viewerConfig = {
		  embedMode: "IN_LINE",
		  showLeftHandPanel: true,
		  showAnnotationTools: true,
		  showDownloadPDF: true, 
		  showPrintPDF: true,
		  showPageControls: true
	  };

	  document.addEventListener("adobe_dc_view_sdk.ready", function () {
		  /* Initialize the AdobeDC View object */
		  var adobeDCView = new AdobeDC.View({
			  /* Registered client id */
			  clientId: "<my client id>",
			  /* The div id in which PDF should be rendered */
			  divId: "adobe-dc-view",
		  });

		  /* Invoke the file preview API on Adobe DC View object */
		  adobeDCView.previewFile({
			  /* Pass information on how to access the file */
			  content: {
				  /* Location of file where it is hosted */
				  location: {
					  url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
				  },
			  },
			  /* Pass meta data of file */
			  metaData: {
				  /* file name */
				  fileName: "Bodea Brochure.pdf"
			  }
		  }, viewerConfig);

		  /* Define Save API Handler */
		  var saveApiHandler = function (metaData, content, options) {
			  console.log(metaData, content, options);
			  return new Promise(function (resolve, reject) {
				  /* Dummy implementation of Save API, replace with your business logic */
				  setTimeout(function () {
					  var response = {
						  code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
						  data: {
							  metaData: Object.assign(metaData, { updatedAt: new Date().getTime() })
						  },
					  };
					  resolve(response);
				  }, 2000);
			  });
		  };

		  adobeDCView.registerCallback(
			  AdobeDC.View.Enum.CallbackType.SAVE_API,
			  saveApiHandler,
			  {}
		  );
	  });
  </script>

Any suggestions what I am missing here?

[Joel_Geraci · Accepted solution]

The IN_LINE mode does not support the annotation tools. You'll need to use FULL_WINDOW.

[Krunal Doshi]

Thanks @Joel_Geraci ,

Although, not sure if I missed that in documentation anywhere. However, for some reason it is not showing in full screen vertically. See below image. Any idea?

[Joel_Geraci]

I don't think it is documented anywhere. However, If you go to the playground, and tap "customize" you can look at the settings for each of the display modes and see which UI customizations are enabled for that mode and which are not.

I think the issue you have above is that the height of your view element isn't set. 

[vharishv]

i tried in customization page you shared. in the annotation tools, in shapes the circle, square etc missing. only hand drawing annotation is available. how to enable all annotation tools?