by Bob Bringhurst

Bob Bringhurst

 

Table of contents

Created

25 November 2014

Prerequisite knowledge

  • This article requires an understanding of building DPS apps. Even though the solution references APIs, no coding knowledge is required.

User level: All

Required Adobe products (retail)

Additional recommended products (third-party/labs/open source)

 

Note: If you have questions about this article, use the DPS forum. Please don’t contact technical support with questions about Adobe Developer Connection articles.

 


Introduction

 

In any DPS app that includes direct entitlement, you can add an HTML banner at the top of the library. The banner can include multiple slide images and can reference the Library and Store APIs. You can add actions to different slides to allow various actions, such as tapping a banner slide to display a sign-in or subscription dialog box, tapping a different slide to download a preview, and tapping another slide to display a Web view.

Note: Although DPS App Builder requires you to create an app with direct entitlement in order to specify a banner, you can add a banner without actually providing direct entitlement. You basically need to specify dummy URLs for the entitlement settings and turn off entitlement sign-in options. For details, see Adding HTML banners to non-entitlement apps.

 

Banner example
Figure 1. Examples of custom library banners.
 
 

 

For iOS apps, the banner HTML is stored on a server, which makes it convenient for you to update the content at any time without having to edit the app. For Android apps, the assets are stored in a .zip file that references the server.

The Store Configurator is a great way to create a basic banner with a set of images with different actions. After you specify the banner information, the banner HTML is hosted on an Adobe server (https://www.dpsapps.com/). If you want to change the banner, such as adding a new ad, you can go back into the Store Configurator, make the changes, and click Publish. The banner is updated immediately.

You can use the Adobe server for your banner, or you can transfer the files to your own server.

Note that the Store Configurator is not required to create a library banner. You can use any HTML editor to create the HTML files used in your banner, and you can host the HTML banner content on any valid server. In this article, I’m going to show you how to use the Store Configurator to create a slideshow banner.

 

Using the Store Configurator

 

Before we start using the Store Configurator, let us make sure we create all the images to be used for the banner slides. I will use examples and screen shots for my app, DPS Tips. To get the context for these examples, download the iOS app and experiment with the library banner.

Step 1. Create the banner images

Use your favorite design tool—Photoshop, Illustrator, or InDesign—to create the images for your banner. For example, you can use InDesign to create 1024x100 images for a 125-pixel banner (the banner is 25 pixels larger than the images). If your library is dual-orientation, you’ll want to account for the cropping that occurs in the 768-pixel portrait library. If your banner is portrait-only, create portrait-only images such as 768x140 for a 165-pixel banner.

If you prefer using images with a higher resolution (such as 2048x200 instead of 1024x100), you can do so. When you use the Store Configurator to upload the image files, you may want to select the option to scale the images by 50%, described later in this article.

Export the images to PNG.

Remember the height you use for your images. You’ll specify that height value in the Store Configurator.

If your banner includes slides that jump to Web sites, consider creating one or more separate images to appear in case the readers are not connected to the Internet. See Step 3 for details.

 

Banner design
Figure 2. In this example, all the images to be used for the banner slides are available.
 
 

 

Step 2: Sign in to Store Configurator

Open the Store Configurator website.

https://www.dpsapps.com/dpsapps/store_configurator/

 

Configurator main
Figure 3. Sign in to the Store Configurator using an Adobe ID with an Application role.
 
 

 

Select “Slideshow Entitlement Banner” and sign in using the Application role in which the banner will appear.

 

Configurator new settings
Figure 4. Slideshow banner options in the Store Configurator.
 

 

Step 3 (0ptional): Create offline banner

If you are going to use the same banner assets for when your users are not connected to the Internet, skip to the next step. If you are using a separate banner image for offline behavior, do this:

  1. Create the offline image first, and specify the image height you used for your banner slide images. You do not need to add any action since the user is offline.
  2. Publish it and download the .zip file. You will specify this .zip file in DPS App Builder.
  3. Return to the main page of the Store Configurator and click Reset Data. Now you are ready to move to the next step and build your live banner.

Another option is to use a different account to create offline banner assets. Offline banner assets require an exported .zip file, so it doesn't matter which account you use.

 

Banner offline
Figure 5. Consider using a separate offline banner image to appear when users are not connected to the Internet.
 
 

 

Step 4: Specify settings and images for the live banner

Specify the page height of the banner images using standard definition (1024x768) values. The banner itself is 25 pixels taller than the page height.

Add the slides. For each slide, browse to select an image.

 

Configurator settings
Figure 6. Specify the images for your banner slides. In this example, the slide appears only if the user is not entitled to the most recent folio.
 
 

 

If you have created HD images (such as 1536x280), select the “HD Image (scale image 50%)” option.

If you want the slide to appear only if the user is not entitled to the latest issue, such as for a “Please sign in” banner, select the “Hide if entitled to the latest issue” option. Optionally specify a Product ID of a specific folio.

 

Step 5: Specify an action for each slide

For each slide, specify an action. In the DPS Tips banner I am using as the example, one slide does nothing when tapped, a couple of slides open Web views, and a pair of conditional slides in which one image appears only if the user is signed in (“Thank you for signing in”) and the other appears only if the user is not signed in (“Please sign in”).

After you select an action such as Open URL, go into the slide settings and specify the URL.

 

Configurator actions
Figure 7. In this example, tapping the slide will open the URL specified.
 
 

 

When you have the images and actions added, click Publish. Your HTML banner content is uploaded to a server, and the Hosting URL field is populated. You’ll need this URL when building the app.

 

Step 6: Build the app

In Store Configurator, click Publish if you haven’t already done so. Copy the host URL and download the .zip file for the offline banner (unless you used a different image for the offline banner as described in Step 3).

Then use DPS App Builder to specify your banner information.

 

app builder
Figure 8. In DPS App Builder, specify both the URL and the offline banner .zip file.
 
 

 

Test the banner in the development app. If you need to make edits, remember that your Hosting URL does not change, so you do not need to rebuild the app unless you want to update the .zip file for offline assets.

Whenever you want to change a banner slide image or action, sign in to Store Configurator, edit the slide, and click Publish. The changes appear in your app immediately.

 

Where to go from here

The Store Configurator offers an easy way to create banner slideshows for your library. Once you specify the banner URL in your app, you can use the Store Configurator to update your banner immediately, without having to update your app.

In addition to adding the custom slideshow banner, here are some other ways in which you can customize the app library:

Add custom navigation icons (custom slots).

 

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.