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