EVOLVE'16 | Enhance | Anthony Rumsey | Do you want to build a dashboard?
•Download as PPTX, PDF•
0 likes•229 views
Every mobile app has its own set of unique requirements. The AEM Mobile dashboard is a powerful tool that can be leveraged in order to effectively meet these requirements. This presentation will explore the options available in AEM for creating a variety custom mobile dashboards in order to enhance the experience of managing an app during its entire lifecycle.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to EVOLVE'16 | Enhance | Anthony Rumsey | Do you want to build a dashboard?
Similar to EVOLVE'16 | Enhance | Anthony Rumsey | Do you want to build a dashboard? (20)
More from Evolve The Adobe Digital Marketing Community
More from Evolve The Adobe Digital Marketing Community (20)
Recently uploaded
Recently uploaded (20)
EVOLVE'16 | Enhance | Anthony Rumsey | Do you want to build a dashboard?
- 1. #evolverocks DO YOU WANT TO BUILD A DASHBOARD? ANTHONY RUMSEY | COMPUTER SCIENTIST | ADOBE August 30, 2016
- 2. #evolverocks 1. AEM Mobile Introduction 2. The AEM Mobile Dashboard 3. Dashboard Customizations 4. Q&A OVERVIEW
- 3. #evolverocks GOALS Configure a New Mobile Dashboard Develop Dashboard Tiles Manage Custom App Properties
- 4. #evolverocks4 Sites Assets Communities Forms Mobile Adobe Experience Manager
- 5. #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.
- 6. #evolverocks BUILD. MANAGE. MEASURE. OPTIMIZE . Create Your App Experience Connect Your Data Manage and Publish Apps Measure Your 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.
- 7. #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
- 8. #evolverocks
- 9. #evolverocks
- 10. #evolverocks
- 11. #evolverocks
- 13. #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
- 14. #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
- 15. #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
- 16. #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
- 17. #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
- 18. #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
- 19. #evolverocks • Layout • sling:resourceType=mobileapps/gui/component s/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
- 20. #evolverocks ANATOMY OF A TILE
Editor's Notes
- These are the goals I would like to achieve with this app in the next 40mins. Manage Custom App Properties Configure a new Mobile Dashboard layout Develop New Dashboard tiles
- How many know / use AEM? As one of the Marketing Cloud solutions, Adobe® Experience Manager helps you organize, create, and manage the delivery of creative assets and other content across your digital marketing channels, including web, mobile, email, communities, and video.
- If we peel apart that statement it boils down to being able to: Bring new content to life in an engaging app experience Integrating with critical business systems Accessing a unified dashboard to control all your apps Drive engagement with personalized content, messaging and tracking During this lab we will be touching on: Creating the App Experience Managing Apps Measuring Impact
- Accessing a unified dashboard to control all your apps Provides a consistent experience when managing all of your apps Provides real time data on the state of all of your apps Provides access to managing the content in your app Perform actions on your apps such as publishing content updates Customizable to satisfy specific business needs It is this last point that I will be focusing on for the remainder of this talk…
- What does the AEM Mobile dashboard being customizable actually mean? Well it means that with a small amount of effort you can transform the default dashboard configuration from this
- Into something like this…
- …or even this!
- All joking aside what I’d really like to achieve today is to build customized Dashboard for my EVOLVE mobile application being managed by AEM Mobile.
- I should first point out that in addition to the default dashboard provided for hybrid apps in AEM there actually is already a separate dashboard configuration for the management of AEM Mobile runtime apps. This dashboard follows the same customization principles I will be discussing today and can itself can be further customized as well.
- Customizing can be split into three areas that I will be exploring today.
- The resourceType given to your mobile app instance drives the entire dashboard experience. Extending the core mobileapps resourceType provides a convenient way to alter existing dashboard functionality. You don't want to expose app store properties? Remove it! You have specific meta data that needs to be stored with your app? Add a new dialog tab! The possibilities are endless.
- A dashboard configuration for AEM Mobile is simply a sling:OrderedFolder (or sling:Folder) that lists all the tiles that can appear. These tile definitions can either be included as child nodes or their paths can be included in a `tiles` multi-value String property.
- Now it is time to be creative. Dashboard tiles are meant to provide an immediate snapshot on the state of your app. How many pages are currently staged? Is the app part of a workflow? How many users does the app have? Any functionality your app requires can be represented by a tile to ensure it can be managed efficiently.
- So there you have it! I now have a fully customized AEM Mobile dashboard for my EVOLVE app that can also be shared with additional apps I may be managing. I first extended the PhoneGap app instance component in order to provide a custom app experience that included a custom app catalog rendering and additional Manage App configurations. Next a dashboard config was provided in order to customize the tiles that appear for my app. Finally, a new dashboard tile was developed and added to the dashboard configuration in order to replace one of the default tiles.