Prerequisite knowledge
 
  • Familiarity with creating DPS viewer apps using Digital Publishing Suite, Enterprise Edition
User level: Intermediate
 
Required Adobe products (retail)
 
Required products
 
 
 
Note: If you have questions about this article, use the tutorial feedback link at the bottom of the article. Please don’t contact technical support with questions about Adobe Developer Connection articles.
 
In this tutorial, you will learn how to use the DPS Store Configurator to customize the look and feel of your DPS default viewer library without writing a single line of code.
 

 
Overview

By default, DPS viewer library has the dark UI theme automatically applied when you create a viewer app. However, you always have the option to customize and build the viewer library UI according to your taste. This traditionally required coding in HTML, CSS, and JavaScript. This process is explained in existing articles from Derek Lu: HTML library implementation and Styling the HTML library with Dreamweaver
 
However, with the new DPS Store Configurator web-based application (also created by Derek Lu), you now can customize the viewer library without writing a single line of code. This can be very helpful and will automate your viewer app creation process to a great extent thus saving you a lot of time and effort.
 
Note: This guide is intended for publishers who already have created a custom viewer app using DPS enterprise Edition. If you have not previously created a custom viewer app, you should read the documentation titled "Creating custom viewer apps for the iPad and iPhone"
 

 
Customizing the viewer library UI

To use the DPS Store Configurator to customize your library UI:
 
  • Go to http://dpsapps.adobe.com/store_configurator/
  • Customize the look and feel of your viewer library accordingly, using the self-explanatory user interface
  • Download the .zip file and save it to a location of your choice (preferably on the local machine HD)
Figure 1: The DPS Store Configurator

Figure 1: The DPS Store Configurator

 

 
Building/Editing custom viewer app

To build your custom viewer app using the library design that you saved in the last step, do the following:
 
  • Login to App builder with your Enterprise sign in credential (viewer builder role)
  • Create a new app or edit an existing app
  • Navigate to "Navigation Toolbar" section
  • Click the "Library" icon
  • Click "Use custom app library" icon
  • Now click and navigate to choose the .zip file downloaded from the previous section saved on your machine
  • Customize any other fields if required and click "Next"
  • Continue and build your app to complete.
Figure 2. DPS App Builder

Figure 2. DPS App Builder

 

 
Where to go from here

This article gave you an introduction on using DPS Store Configurator to customize the look of viewer library UI.
 
To further extend the customization capability with coding in HTML, CSS and JavaScript, read Derek Lu's documentation HTML library implementation and Styling the HTML library with Dreamweaver.
 
Comments are currently closed as we migrate to a new commenting system.  In the interim, please provide any feedback using our feedback form. Thank you for your patience.