Prerequisite knowledge
Familiarity with HTTP requests and responses.

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.

Template overview

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.

Figure 1. Offline banner
Figure 2. Logged out banner
Figure 3. Logged in banner

Using the template

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)

Development considerations

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:

  • entitlement_banner_sample.zip - The file that is uploaded to App Builder. It is included as an example. This file can be uploaded to App Builder as - is for testing purposes.
  • AdobeLibraryAPI.js - The file that contains the library and store APIs.
  • index.html - The HTML file used to display the content.
  • jquery-1.11.0.min.js - The jQuery library.
  • banners - The folder where all the three different banners are kept
When you upload the files to the App Builder, make sure to do the following changes:
  1. Upload the same files that you have in the archive to your server and add its URL to the Banner page URL
  2. Change the Banner height to Fixed size: 195 px (Figure 4)
 
Figure 4. Add the Entitlement banner

APIs used in this example

Here are the API calls used in this example:

  • adobeDPS.deviceService.isOnline - Boolean variable that shows whether the device is connected to the internet or not. Note: HTML5's navigator.onLine property and "offline" and "online" events should be used in most cases.
  • adobeDPS.authenticationService.isUserAuthenticated - Boolean variable that shows whether a user is currently authenticated. It returns true, if the user is authenticated.

Where to go from here

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:

Change log

26/11/2014

  • Sample files were updated.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy