In this article, I am going to show you how you can display PDF files in your Simplifier application using the Adobe PDF Embed API.

Why Adobe PDF Embed API?

As you might already know, you can use the Simplifier PDF Widget to display PDF files in your application. This widget is part of the Standard Content and comes in handy if you simply want to show the PDF file on a screen or in a dialog.

However, some use cases require additionaly functionality, like printing, adding comments to the PDF or lazy-loading for large PDF files. For these cases, the Adobe PDF Embed API is a smart and convenient option, as it is also easy to integrate in a Simplifier application.

Step 1: Get an API Key

In order to use the Adobe PDF Embed API, you need your own API key.
Obtaining an API key is free, but you need to create an account first.

Create an account for the Adobe Developer Console. Then, create a new project. Add an API to your project and select ‘PDF Embed API’:

Now, enter the domain of your Simplifier instance where you want to use the Adobe PDF Embed API. Only enter the host, do not include paths/ports/etc.

For example, if your Simplifier instance is reachable via ‘https://training.simplifier.cloud/UserInterface’, only enter ‘training.simplifier.cloud’:

That’s it, you can now copy your API key to the clipboard for later usage.

Step 2: Embed the PDF in an Application

Build the UI for the PDF

First, we need a UI where the PDF will be displayed. So, in Simplifier, either create a new application or open an existing one.

Add the Widget ‘ui_core_HTML‘ to the screen where you want to display the PDF.
With this widget, you can embed any kind of standard HTML. In the property ‘content‘, insert the following HTML snippet:

<div id="adobe-dc-view"></div><script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

With this code, the container for the PDF is added to the screen, and the Adobe PDF Embed SDK is loaded, so that its functions are available in your application.

Upload the PDF to the Application Assets

Next, we need a PDF file that is displayed in the application. The most simple way is to upload the PDF file to the application. To do so, select the tab ‘Other’ in the UI Designer, then select ‘Assets’. Here, you can upload a PDF file from your local system. Copy the path of the file for later usage.

If you want to display multiple PDF files in a dynamic way, it’s not feasible to upload each PDF here in the Assets section.
You can also simply access the PDF files via URL.

For example, you can use our Content Repository Plugin to store and fetch all types of files. Check out this Knowledge Base article to learn how to use the Plugin: How to use Simplifier Content Repository Plugin

Add the code for PDF Embedding

Now that the UI is done and a PDF file is available, we want to load the PDF content into the HTML widget in our application.

So, open the Process Designer. Create a new story or open an existing one.

First, choose an event that should trigger the loading of the PDF. For example, you can use your screen’s OnAfterRendering event. Add an event shape to the process grid and subscribe to the respective event.

Next, connect a script block to the event shape. Inside the script, enter the following code snippet:

var sFileURL = "data/test_multiple_pages.pdf",  // fetch the URL of the PDF
    sFileName = "test_multiple_pages.pdf",
    iPageNumber = 1;

document.addEventListener("adobe_dc_view_sdk.ready", function() {
    var adobeDCView = new AdobeDC.View({
        clientId: "xyz", // your API key for this Simplifier instance
        divId: "adobe-dc-view"  // the ID that we have set in the HTML widget
    });

    var previewFilePromise = adobeDCView.previewFile({
        content: {
            location: {
                url: sFileURL,
            }
        },
        metaData: {
            fileName: sFileName
        }
    });

    previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
            apis.gotoLocation(iPageNumber)
                .then(() => console.log("Success"))
                .catch((error) => console.log(error));
        });
    });
});

With this code, the PDF will be loaded after the OnAfterRendering event and will be displayed on the screen.

Adapt the following elements:

• sFileURL: the URL/path to the PDF file
• sFileName: the name of the PDF file. If you are using the Content Repository Plugin, you can also fetch the file name dynamically
• iPageNumber: set it to the page that you want to display initially
• clientID: insert your own API key (created in Step 1)
• divID: the ID needs to match the ID that we have specified in the HTML widget

Save and deploy the app to see if your PDF file is displayed correctly.

Step 3: Add more Functionality

As already explained in the beginning of this article, the Adobe PDF Embed API has a lot of different options that you can add to the code.

Feel free to browse Adobe’s documentation to explore all the available options: Adobe PDF Embed API Documentation

Embed Modes

Control how the PDF is displayed on the page, for example, if it is displayed in full screen mode or in line with other text blocks.

Customize the PDF UI

Customize the controls that are displayed on the UI. For example, you can show/hide the annotation tools, the buttons to download and print the PDF, the zoom controls and many more.

Follow this link to see all available UI options: Adobe PDF Embed API – UI Customization

Step 4: Use the Adobe PDF Embed API on the Mobile Client

The Adobe PDF Embed API only works when opening the Simplifier app in the browser, not in the Mobile Client.

If you are interested in using the Adobe PDF Embed API in the Mobile Client as well, please reach out to your Simplifier partner contact.