Adobe PDF Embed API - Service Portal

[Oscar Lopez]

If <object> or Document Viewer hasn't worked for you, specially when trying to display large-megabytes PDF files in the Service Portal, this article will give you the best Embed API insight directly from Adobe.

What is PDF Embed API?

The Document Services PDF Embed API allows you to embed a PDF viewer in your web applications with only a few lines of code. With options for controlling how a PDF appears and functions, your applications can deliver the rich and compelling digital document experiences to your customers expect and need.

Check out the online demo, and view the code to see how easy it is!

Getting Credentials

You’ll need a client ID to use the Document Services PDF Embed API. To get one, click HERE, and complete the workflow.

Adobe PDF Embed Widget

HTML Template

<div class="container">
  <div style="height: 400px"> 

    <!-- When there is no attachment, display the banner -->
    <div ng-if="!data.document" class="frame-border">
      <div class="not-selectable" style="height:inherit;display:table;width:100%">
        <h2 style="display:table-cell;vertical-align:middle;text-align:center;cursor:default;">No PDF Available</h2>
      </div>
    </div>

    <!-- When there is an attachment, display the PDF -->
    <!-- ====================  ADOBE PDF EMBEDED  ======================== -->
    <div id="adobe-dc-view" style="height:100%;width:100%;"></div>
    <!-- ================================================================= -->

  </div>
</div>

Client Controller

api.controller=function() {
	/* widget controller */
	var c = this;

	console.log(":: ADOBE DC PDF EMBED  = " + JSON.stringify(c.data.document));
	if(c.data.document) {
		var adobeDCView = new AdobeDC.View({clientId: c.data.document.API_KEY, divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{ location: {url: c.data.document.url }},
			metaData:{ fileName: c.data.document.fileName}
		}, {embedMode: "SIZED_CONTAINER"});
	}
};

CSS

.frame-border {
  border: 1px solid #e2e0e0;
  height:100%;
  width: 100%;
}

.not-selectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}

Server Script

(function() {
	if(input)
		data.sys_id = input.sys_id;
	else if(options.sys_id)
		data.sys_id = options.sys_id;
	else
		data.sys_id = $sp.getParameter("sys_id") || $sp.getParameter("sl_sys_id")

	if(!data.sys_id)
		return;

	function getPDF() {
		var attachment = new GlideRecord("sys_attachment");
		attachment.addQuery("table_sys_id", data.sys_id);
		attachment.addQuery("content_type", "application/pdf");
		attachment.query();

		if(attachment.next()) {
			return {
				url: gs.getProperty('glide.servlet.uri') + "sys_attachment.do?sys_id=" + attachment.getValue("sys_id"),
				fileName: attachment.getValue("file_name"),
				API_KEY: gs.getProperty("adobe.dc.pdf.embed.api.key")
			};
		}
		return null;
	}

	data.document = getPDF();
	
})();

Important Steps

1. Create a system property "adobe.dc.pdf.embed.api.key" in order to store the API KEY.
2. Don't forget to include the Adobe API "https://documentcloud.adobe.com/view-sdk/main.js" in the Portal's Theme to make it available to run properly the JavaScript code.

Adobe PDF Embed API Documentation

Enjoy!!

@oslova