Prerequisite knowledge
Familiarity with HTTP requests and responses.
User level: All
Original publication date: 26/11/2014
Modified: 26/11/2014
Prerequisite knowledge User level: All Original publication date: 26/11/2014 Modified: 26/11/2014 |
Required products |
Documentation Adding HTML banners to non-entitlement apps Sample files By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading. |
In this article, you will find a sample code that will display a different Entitlement banner, depending on the status of the Internet connection and the state of the user that reads the articles from the app. Some lines of the code use the Library and Store API, in order to determine which banner to be displayed. The code for this entitlement banner is implemented in HTML5/CSS3/Javascript. The sample works only on iOS platform.
Begin by downloading the sample files that are provided at the beginning of this article. The sample contains a .zip file that can be added directly to your iOS DPS App Builder. The figures below show the various views of the app.
To correctly use all the features of the provided template, you must have already setup your Entitlement Server. The template uses some of the Library and Store APIs V2. All other features are packaged with your viewer.
Download and decompress the sample files folder to see the contents.
Offline banner
The application can detect when it is offline and unable to access any online resource. For this case, there is a separate offline banner image that is implemented. Since purchase, download, and entitlement are not possible when offline, this banner simply asks the user to connect the application by getting online. (Figure 1)
Logged out banner
In the other case, when the internet connection is detected, the archive will be loaded from the URL set at Banner page URL. Now, depending on the state of the user, a different banner will be displayed. By default, when the app is installed and opened for the first time, the logged out banner will appear. (Figure 2)
Logged in banner
After the user logs in, the banner will be changed into logged in banner, just after the first library update. (Figure 3)
During development, Adobe recommends that you first build and test your content on the desktop using Safari. This allows 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 can't 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.
The following list contains descriptions of the key files in the template:
APIs used in this example
Here are the API calls used in this example:
In this article, you learned how to modify and add a custom library/store that contains the all the authentication calls. Also, you know how to use them so that you customize your own custom store. If you would like more information on the JavaScript libraries used, check out the documentation for Backbone, jQuery and Underscore. See additional articles and videos available for Digital Publishing Suite on the Adobe Developer Connection.
There are also the following articles that can be very useful:
26/11/2014