11 February 2013
User level: Intermediate
Original publication date: 11/05/2012
Modified: 02/11/2013 (Change log)
Other required products
Library and Store API v2
Begin by downloading the sample files that are provided at the beginning of this article. The sample contains the HTML implementation of the default library. The figures below show the various views of the library.
To use the provided template you must have folios published as public. The template uses the new library and store APIs to display folio data and images. All other images are packaged with your viewer.
Download and decompress the sample files folder to see the contents. Currently, the App Builder does not allow nested folders in HTMLResources. Because of this limitation, the template does not organize the files into folders.
During development, Adobe recommends that you first build and test your content on the desktop using Safari. This will allow you to adjust the user interface (UI) without having to generate a new viewer to see each change. When testing on your desktop, the API file is not available, so the viewer loads the data from the Adobe fulfillment XML feed.
While testing on the desktop, ensure that you remove the include for AdobeLibraryAPI.js in the index.html file—otherwise you will be unable to view the files in the desktop browser. When testing on the desktop, if nothing displays, open the debugger to check whether there are file paths that cannot be resolved. To use the debugger, use the following steps.
The following list contains descriptions of the key files in the template:
Note: You must include files in the assets directory in the custom slot ZIP file that you upload to App Builder.
To use of this template with your own content, simply complete the following steps:
The following sections describe each of these steps in more detail.
To modify assets/Config.js, use the following steps.
IS_ENTITLEMENT_VIEWERto false. If you are creating an entitlement viewer, you will also need to add your own code to AppView.js (line 110) and LoginDialog.js for the “Forgot password?” and “Sign In” links.
FULFILLMENT_URLif you would like to test your account on the desktop. Since the API file is not available on the desktop, you can use this XML feed to display the folios. Modify
FULFILLMENT_URLto match the accountId parameter with your accountId. If you need help finding your accountId, see the section titled “Connecting to fulfillment” in the article, Build a custom storefront. Once you have located your accountId, modify the value after http://edge.adobe-dcfs.com/ddp/issueServer/issues?accountId=[your value].
If your viewer uses entitlement, the image used on the right side of the banner is banner_right.png. If your viewer uses subscriptions, the subscription tile images are subscription_tile_landscape.png and subscription_tile_portrait.png. To create new banners you will need to use an image editting tool such as Fireworks or Photoshop.
Use the following steps to upload your files to the App Builder.
titletag in index.html.
I have written the following articles explaining how to use the library/store API:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.