Displaying Office Documents in Adobe DPS on an iOS Device

Many of my Enterprise customers use Adobe Digital Publishing Suite as a means to privately distribute marketing and sales enablement materials to their employees on iPads. Often, they have existing libraries of documents that they want to use as reference material in their folios, but they don’t want to convert them to InDesign documents. The DPS help page for Hyperlinks suggests that you can use the HTMLResources folder to display PDF documents in your folio, and this works well. On iOS, DPS uses an embedded Webkit overlay to display HTML content, so I decided to look at what else I could display there. Clearly PDF was supported, but what about Office? (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see examples of OfficeDocuments and how they appear in a DPS folio.)

Digging around in the Apple documentation for Webkit Overlays in iOS, I discovered a Technical Q&A Note that says you can display a wide array of document types, including Word, Excel, Powerpoint, Keynote, Pages, and Numbers as well as PDF. All of these work in DPS when the folio is used on an iPad or iPhone. Be aware, though, that the Webkit preview doesn’t perform precise layout on Word documents that use advanced layout features, and some spreadsheet appearances might get wonky. Test, and if necessary, convert to PDF using Acrobat, of course.

Let’s see how all this works.

I have a folder of documents that I would like to display in my folio. The HTMLResources folder is a handy place to put these documents, since I will have a common location I can reference from anywhere in my folio, including buttons, hyperlinks, and hyperlinks in Web Content Overlays. To make an HTMLResources folder, all you need to do is to select the files you want to use in HTMLResources and zip them up. DO NOT put these files in a folder and zip the folder, unless you want to organize your references in a subfolder of HTMLResources. Also remember that it is an HTML Resources folder, so that all of your file names must be HTML friendly, or you need to escape the special characters when you write your hyperlinks. Notice in my example that all of the spaces are underscores so I know the filenames will be OK.

Once you zip up the files, rename the archive to HTMLResources.zip.

Now, we need to add it to our Folio. In the Folio Producer panel, navigate to the top level of the folio and choose Import HTMLResources Folder from the flyout menu and browse to your new HTMLResources.zip archive.

Now, let’s make some buttons to display our files. While I will make buttons, you can also use hyperlinks to display the documents you have in your HTMLResources folder. Note: follow the guidelines in the help documentation for proper pathing to your assets, though. The path is different for hyperlinks vs anchors in HTML files.

In my example, I have included files of the following types: PDF, xls, xlsx, doc, docx and Keynote. The Webkit overlay also supports Numbers and Pages, and you can explore those on your own. I made a series of buttons as normal, and I assigned the “go to URL” action to them with the target URL being “HTMLResources/<name_of_my_document.xxx>” In the example below, I have the button called “docx iPhone” on my iPhone layout that points to “HTMLResources/1_Statement_of_work.docx”

I created buttons for each of the file types shown and made both iPhone and iPad layouts. The results are shown below (the .doc and .docx files are the same content, so I’m only showing one of each (tap images to show full size):

Starting state:

 

PDF

Word doc

Excel

Keynote

Neat, eh? Oh, if you’re wondering how I got the two devices in one screen shot, Reflection allows you to display two devices at a time simultaneously. Please remember that the ability to show these document types is a function of the Webkit implementation on iOS, and these documents will not display on your Android devices.

I hope that this set of files will continue to be supported in future versions of iOS. The ability to include these document types is a huge time saver for companies that need to include supporting documentation in their DPS apps, but don’t want to have to convert them all to folios.

Share on Facebook

10 Responses to Displaying Office Documents in Adobe DPS on an iOS Device

  1. Carlos Garro says:

    Thanks for sharing James =D

  2. Thank you, it is useful

  3. Haeme Ulrich says:

    Wow, great and clever!

  4. Pingback: This Week in InDesign Articles, Number 96 | InDesignSecrets

  5. Markus J says:

    Great Job, James! Thanks.

  6. Pingback: Sending email and email attachments from DPS publications « James Lockman

  7. Nissan Dachs says:

    Great post James, as usual. This is very handy.

  8. Kenia says:

    Thanks so much for this post, super useful!

    I noticed that you can view the documents but you can’t print or share them like you normally would be able to on an iPad. Is there a way to get that function as well?

    Thanks so much James!

    • James Lockman says:

      Hi, Kenia.

      You’re seeing one of the limitations of Apple’s implementation of the WebKit overlay. Apple (or Android) makes that overlay available through the OS. The Android viewer has no ability to display these file types directly, so it will prompt you to save the file somewhere on your device. On iOS, the WebKit overlay CAN display these kinds of file, but the WebKit overlay is in a sandbox and can’t talk outside of its walls. The upshot here is that we can’t send the PDF (or Word or Excel or Keynote) out of the Overlay to another application. If you really need to print or share, then instead of using the direct method, you might want to use a form that you’d host on a web site (and surface in the DPS layout) that would allow a user to send an email with a file attachment to the reader.

      • Kenia says:

        Thanks so much James! This is really great to know.
        Do you know if the Digital Publishing suite will have a function that can make this happen in the future?