January 23, 2017 /How-To/Product Updates /

Bring those Browse Pages to Life!

One of the primary advantages of the AEM Mobile application platform is the ability to create beautiful native applications without having to learn native application development. The AEM Mobile layout template system gives designers, developers and marketers the ability to craft their application user experience using What You See is What You Get (WYSIWYG) tools. This template system of cards and layouts has allowed our customers to create many different applications, each with a distinctive look and feel. Browse pages (aka navigation screens) displayed in AEM Mobile applications are rendered as native code, which ensures that these screens are performant and respond well to touch gestures.

With recent updates to the AEM Mobile platform, browse pages received a major power-up in the form of Dynamic Banners. Prior to the Nov 1st update, all browse page items (articles, collections, banners) were represented by static image thumbnails and/or metadata on cards. If you wanted to display data feeds, animations, or any other type of interactive elements on your application’s home screen, you would have to replace the entire browse page with an HTML article. Now with the Dynamic Banners feature, you can continue to use browse pages for your navigation screens, with the added capability of carving out space for interactive, HTML-based content. Dynamic Banners are defined like other content types within AEM Mobile. After choosing to create a new Dynamic Banner, you are asked to fill out metadata fields, add a thumbnail and upload a HTML packaged .article content file.

Dynamic Banners will appear in browse pages the same way any other banner, article or collection would, the only difference being that you are running HTML inside the grid space. Dynamic Banners can utilize any Apache Cordova plugins enabled in your application and can be updated the same as any other article or banner.

We’ve tried to get the creative juices flowing to show you how to take advantage of Dynamic Banners in your applications. See below for some code samples that you can use in your own projects.

 

Dynamic Carousel Banner

One of the most often requested features we’ve been asked to add to browse pages, was the ability create and display carousels or simple slideshows. It turns out that this is a great use case for dynamic banners. Adding a slideshow or carousel to your browse page can create visual interest and can be used to showcase or feature a selection of articles or collections.

The below code sample is for a simple slideshow with a few tricks up its sleeve. Rather than hard-coding in the various slides and related images, this banner slideshow will automatically create the appropriate number of slides for each item contained in a specified collection. Additionally, instead of “baking” text into your thumbnail image, the slideshow code can automatically display any text values contained in the Title and Abstract metadata fields. When uploading this slideshow make sure to specify which collection you want it to read/look into by putting the collection name in the banner’s “department” metadata field. Also make sure to enable the extensibility features checkbox on the metadata properties for the banner if it is not already checked.

Dynamic Carousel Code Sample

 

Dynamic Sign-in Banner

AEM Mobile applications come with the ability to enable authentication or sign-in of users to gain access to gated or restricted content. While a good portion of our customers have enabled authentication, many have asked for a more prominent and visual way to prompt users to sign-in.

The below sample code gives you a way to create a customized sign-in banner. This dynamic banner has two sections defined in the HTML to represent both un-authenticated and authenticated states. You can make changes to the CSS and the HTML to adjust what is displayed to users that are, or are not signed-in. Additionally; this banner can display whatever text has been placed into the banner’s ‘short title’ metadata field in On-Demand Services.

Dynamic Sign-in Banner Code Sample

 

The samples above are just a few examples of where you can use dynamic banners. Some other potential uses could include banners that display social media feeds (check out this example on Twitter’s developer portal), news feeds, calculators, stock tickers, account information widgets, shopping cart status indicators, or even a video player. Please share with us any ideas or uses you’ve implemented using Dynamic Banners in the comments below.

For more information on Dynamic Banners, see the AEM Mobile Help Article > Creating banners for browse pages

How-To, Product Updates