#evolverocks

DO YOU WANT TO BUILD A DASHBOARD?

ANTHONY RUMSEY | COMPUTER SCIENTIST | ADOBE

August 30, 2016

#evolverocks

1. AEM Mobile Introduction2. The AEM Mobile Dashboard3. Dashboard Customizations4. Q&A

OVERVIEW

#evolverocks

GOALS

Configure a New Mobile

DashboardDevelop

Dashboard TilesManage Custom App Properties

#evolverocks4

Sites Assets Communities Forms Mobile

Adobe Experience Manager

#evolverocks5

Adobe Experience Manager Mobile

A product to build and manage mobile apps that leverages enterprise content, offers rapid time to market, deep extensibility and integrates with Adobe Marketing Cloud for app measurement and optimization.

#evolverocks

BUILD. MANAGE. MEASURE. OPT IMIZE .

Create Your App Experience

Connect Your Data

Manage and Publish Apps

MeasureYour Impact

One unified dashboard lets you control all of your company’s apps,

and publish across platforms and devices.

Bring in valuable customer and product

information by integrating with third party APIs and critical

business systems.

Pull existing assets or create new content – and bring it all to life in an engaging app

experience.

Harness the Adobe Marketing Cloud solutions to drive engagement with

personalized content, targeted messaging and

tracking user activity.

#evolverocks

• A collection of tiles that provide a consistent experience across all of your apps

• Real time data on the state of your apps• Manage content in your app• Perform actions such as publishing updates• Snapshot of Marketing Cloud integrations• Customizable to satisfy specific business needs

MOBILE DASHBOARD

#evolverocks

#evolverocks

#evolverocks

#evolverocks

#evolverocks

AEM MOBILE RUNTIME

#evolverocks

• Instance Resource Type• Defines the app type

• Dashboard Configuration• Defines a collection of tiles

• Developing New Tiles• Override existing tiles• Add new functionality

DASHBOARD CUSTOMIZATIONS

#evolverocks

• Drives entire dashboard experience• Override app catalog rendering• Extend app details dialog• Uses Sling resource merger

• Core: /libs/mobileapps/core/components/instance• PhoneGap:

/libs/mobileapps/phonegap/components/instance• Custom:

/apps/arumsey/mobileapps/components/instance

INSTANCE RESOURCE TYPE

#evolverocks

• sling:OrderedFolder listing the tiles that can appear for each app

• Default set of tiles include:• Manage App• Manage Content• Manage Updates• Manage Cloud Services• PhoneGap Build• Analyze Metrics• Push Notifications

• Use pge-dashboard-config instance property to specify custom config path

DASHBOARD CONFIGURATION

#evolverocks

• Dashboard configuration for AEM Mobile Runtime• Default set of tiles include:

• Manage App• Manage Connection• Manage Banners• Manage Collections• Manage Articles

AEM MOBILE RUNTIME DASHBOARD

#evolverocks

• Child nodes• All child tile definitions will be included

• tiles property• Any tile definition paths specified on the tiles multi-value property will also be

included

INCLUDING TILES

#evolverocks

• Tiles provide an immediate snapshot on the status of your app

• Each tile is a cq:Page with a resourceType of mobileapps/gui/components/dashboard/tile

• A tile also needs to define several child nodes• Layout• Header• Body• Footer

DEVELOP A NEW TILE

#evolverocks

• Layout• sling:resourceType=mobileapps/gui/components/

dashboard/tile/layout• Header

• title child node• Body

• can be rendered by any component• Footer

• href property to expand tile into new page

ANATOMY OF A TILE

#evolverocks

ANATOMY OF A TILE

#evolverocks

<DEMO TIME/>

#evolverocks

CONCLUSION

#evolverocks

THANK YOU!Anthony Rumsey

http://bit.ly/aemm-custom-dashboard

@planetrumsey