Evolve 19 | Upen Manickam &amp; Amanda Gray | Adventures in SPA with AEM 6.5

This document discusses a project to modernize two separate portals for a client into a single-page application (SPA) using Adobe Experience Manager (AEM) 6.5. The project involved using SPA to display product information and documents, creating an entitlements management screen in AEM author for permissions, and developing mobile apps. Key aspects included upgrading from AEM 6.4 to 6.5 to address SPA issues, integrating with Okta for authentication, and enabling offline viewing capabilities in the mobile apps. The presentation provides details on implementing the SPA, entitlements management, and mobile apps, and discusses challenges overcome around responsive design, permissions, and offline access.

Technology

#evolve19
ADVENTURES IN SPA
WITH AEM 6.5
Upen Manickam & Amanda Gray
Date: 8.7.2019

#evolve19 2
NOT YOUR AVERAGE SPA PROJECT

#evolve19 3
PROJECT BACKGROUND
What’s not working and what they need

#evolve19 4
PROJECT BACKGROUND
− 2 separate portals
− Dated design – think early 2000s
− No defined architecture

#evolve19 5
PROJECT BACKGROUND
− 60% of their labs don’t have an internet connection
− Due to the classified nature of their documents, they
needed strict permissions to limit who could see which
documents

#evolve19 6
PROJECT IMPLEMENTATION
How we approached the project

#evolve19 7
PROJECT IMPLEMENTATION
− Using SPA to display the product family lines and product documents
− Used Tag structure for product structure navigation
− Created an Entitlements Management screen in AEM author

#evolve19 8
PROJECT IMPLEMENTATION
Obstacles during the project

#evolve19 9
PROJECT IMPLEMENTATION
− SPA issues in AEM 6.4 resulting in an upgrade AEM 6.5
− Okta limitations with Cordova integration
− SPA limitation with Cordova integration

#evolve19 10
PROJECT IMPLEMENTATION
Unique features/customizations

#evolve19 11
PROJECT IMPLEMENTATION
− Entitlements Management in AEM
− Offline Mode for App – ability to see offline briefcase downloaded when online
− Metadata export with file download
− Workflow Declarations for Regulatory Compliance
− Okta integration for publish using OIDC & Angular

#evolve19 12
IMPLEMENTATION DEEP DIVE
SPA, ENTITLEMENT MANAGEMENT, AND MOBILE APP

#evolve19 13
SPA IN AEM
Upgrading from 6.4 to 6.5

#evolve19 15
SPA IN 6.4.3 - DIFFICULTIES
− Responsive grid issues in editable templates
− Edit vs. preview mode issues
− Page title not getting updated

#evolve19 16
SPA IN 6.5
− Fine tuned responsive grid in editable templates
− No more edit mode vs preview mode issues
− Page title not changing was still an issue, but handled via Angular

#evolve19 17
ENTITLEMENTS MANAGEMENT
Logic and implementation

#evolve19 18
LOGIC BEHIND ENTITLEMENT MANAGEMENT
− Non-SPA blank template and a sling component
− Tags were designed to imitate product hierarchy
− Sling component was designed
− to list the partners
− to search any specific partner(s)
− to view and add/remove the tags as entitled/permissioned
− None of the partner details or entitlements stored in AEM, only tag structure.
− Only in author mode and changes posted back to Customer upstream which is served
by REST services for AEM SPA application after authentication.

#evolve19 19
ENTITLEMENTS IMPLEMENTATION

#evolve19 20
ENTITLEMENTS IMPLEMENTATION

#evolve19 22
MOBILE APP - IMPLEMENTATION
− Cordova based
− Platforms: iOS and Android
− Puppeteer to crawl and create content structure at the outset
− Exported JS and CSS and certain DAM content to Cordova project

#evolve19 23
MOBILE APP - CHALLENGES
− SPA does not identify between browser and mobile app
− Required to create custom model manager to be able to choose the online and offline
mode models
− OIDC did not support opening the login page in system browser

#evolve19 2424
image
image
Offline Mode
− Bypassing Login
− File Storage

#evolve19 26
ABOUT US
Mail
upendran.manickam@3sharecorp.com
Upen Manickam
Technical Architect
3|SHARE
Contact Us
www.3sharecorp.com

#evolve19 27
ABOUT US
Mail
amanda.gray@3sharecorp.com
Amanda Gray
Sr. Project Manager & Business Analyst
3|SHARE
Contact Us
www.3sharecorp.com

AEM is content-centric, so is the future of building commerce experiences. In this session, you will be shown how to build modern commerce experiences with AEM. The demo will explain how authors create/configure multiple (industry-independent) stores, configure the commerce environment for each store and manage all the commerce content and features, without writing a line of code. The second part will demonstrate how developers create templates, components, and functionality to build a compelling Web/User/Commerce Experience.

Evolve 19 | Paul Legan | Going Beyond Metadata: Extracting Meaningful Informa...

When Furniture Row decided to leave their digital assets management provider to go to AEM, they began a multi-phased journey that has resulted in the transition of their eCommerce platform and content management system. They recently launch a newly redesigned DenverMattress.com site which introduces a headless implementation of AEM sites, a new authoring experience for their content team, and an upgrade from a freestanding instance of Scene7 Classic to Dynamic Media integrated with AEM Assets. Hear from the implementation team and learn more about Furniture Row’s digital evolution.

EVOLVE'16 | Maximize | Ben Hubble & Lynn Tabet | Scaling the AEM Customer Exp...

A discussion of how we took multiple properties under the MGM Resorts brand and worked them into a consistent AEM-backed architecture over a year-long period. We’ll try to answer these types of questions: How did we scale up? What aspects did the properties embrace? What did they resist? Did the AEM system features help or hurt? How did we operationalize the tech and marketing teams? Was this approach helpful for a hospitality company and does it apply to others? What roles were needed? What would we do differently? Was the journey successful? What is next?

EVOLVE'16 | Enhance | Gordon Pike | Rev Up Your Marketing Engine

Building Mobile Apps: A PhoneGap Enterprise Introduction for Developers

arumsey

Adobe Experience Manager (AEM) Apps and PhoneGap Enterprise bring together the simplicity and ease-of-use of the AEM authoring environment with the power and portability of PhoneGap mobile applications. Using AEM Apps you can create, author, and update your applications within AEM. With PhoneGap Enterprise you can choose from a range of pre-built app components, build your app across multiple mobile platforms, and test your apps within the PhoneGap Enterprise mobile application. In this lab you will be introduced to Adobe Experience Manager and PhoneGap, learn how to quickly and easily build your own mobile application, how to test it in simulators for a range of devices, and how to track app usage.

EVOLVE'16 | Deploy | Abhishek Dwevedi | Introduction to AEM Assets

Uncovering the Latest in SharePoint Development

webinar-ionicJaime L. López Carratalá

Broaden your dev skillset with SharePoint branding options

Supercharge Your SharePoint Framework Webpart with React

Move past bootstrap and build our lightweight responsive framework w.v1.2

Appcelerator’s Cocoafish Acquisition and the Future of the Mobile Cloud

Axway Appcelerator

Xamarin and SAP Mobile Platform for Mobile Enterprise SuccessXamarin

Who Needs A Developer For Automated SharePoint Provisioning

Evovle18 | Abhishek Dwevidi & Varun Mitra | Personalization with Adobe Experi...

Deep dive into share point framework webparts

Prabhu Nehru

Build Your First SharePoint Framework Webpart

Developing and Designing Native Mobile Apps in Xamarin Studio

Xamarin

With an inspired development environment comprised of powerful code completion, support for TestFlight and a dynamic, modern debugger, Xamarin Studio allows developers to build better apps for iOS, Android and Mac. Join Xamarin Developer Evangelist Mike Bluestein as he gives a demo and in-depth look at some of our favorite Xamarin Studio features, including full support for NuGet packages, extensive documentation for the .NET Base Class Libraries (BCL), F# support, and the ability to build native user interfaces with our iOS and Android designers.

Use office ui fabric react to build beauty with SharePoint

The Adventures of Azure Functions and Microsoft Graph

Sitecore user group mumbai sitecore commerce extension

Jitendra Soni

Migrating and adopting Drupal 8: Why you need Cohesion

What's hot

Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...

Evolve 19 | Rabiah Coon, Sabrina Schmidt & Noah Linge | Industry Focus | Furn...

EVOLVE'16 | Maximize | Ben Hubble & Lynn Tabet | Scaling the AEM Customer Exp...

EVOLVE'16 | Enhance | Gordon Pike | Rev Up Your Marketing Engine

Building Mobile Apps: A PhoneGap Enterprise Introduction for Developers

arumsey

EVOLVE'16 | Deploy | Abhishek Dwevedi | Introduction to AEM Assets

Uncovering the Latest in SharePoint Development

webinar-ionicJaime L. López Carratalá

Broaden your dev skillset with SharePoint branding options

Supercharge Your SharePoint Framework Webpart with React

Move past bootstrap and build our lightweight responsive framework w.v1.2

Appcelerator’s Cocoafish Acquisition and the Future of the Mobile Cloud

Axway Appcelerator

Xamarin and SAP Mobile Platform for Mobile Enterprise SuccessXamarin

Who Needs A Developer For Automated SharePoint Provisioning

Evovle18 | Abhishek Dwevidi & Varun Mitra | Personalization with Adobe Experi...

Deep dive into share point framework webparts

Prabhu Nehru

Build Your First SharePoint Framework Webpart

Developing and Designing Native Mobile Apps in Xamarin Studio

Xamarin

Use office ui fabric react to build beauty with SharePoint

The Adventures of Azure Functions and Microsoft Graph

What's hot (20)

Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...

Evolve 19 | Rabiah Coon, Sabrina Schmidt & Noah Linge | Industry Focus | Furn...

EVOLVE'16 | Maximize | Ben Hubble & Lynn Tabet | Scaling the AEM Customer Exp...

EVOLVE'16 | Enhance | Gordon Pike | Rev Up Your Marketing Engine

Building Mobile Apps: A PhoneGap Enterprise Introduction for Developers

EVOLVE'16 | Deploy | Abhishek Dwevedi | Introduction to AEM Assets

Uncovering the Latest in SharePoint Development

webinar-ionic

Broaden your dev skillset with SharePoint branding options

Supercharge Your SharePoint Framework Webpart with React

Move past bootstrap and build our lightweight responsive framework w.v1.2

Appcelerator’s Cocoafish Acquisition and the Future of the Mobile Cloud

Xamarin and SAP Mobile Platform for Mobile Enterprise Success

Who Needs A Developer For Automated SharePoint Provisioning

Evovle18 | Abhishek Dwevidi & Varun Mitra | Personalization with Adobe Experi...

Deep dive into share point framework webparts

Build Your First SharePoint Framework Webpart

Developing and Designing Native Mobile Apps in Xamarin Studio

Use office ui fabric react to build beauty with SharePoint

The Adventures of Azure Functions and Microsoft Graph

Similar to Evolve 19 | Upen Manickam & Amanda Gray | Adventures in SPA with AEM 6.5

Sitecore user group mumbai sitecore commerce extension

Jitendra Soni

Migrating and adopting Drupal 8: Why you need Cohesion

Across the spectrum different approaches to progressively decoupled drupal (...

Progressive decoupling is a compelling approach to building Drupal’s front end where content editors, site assemblers, and front-end developers all maintain contiguous experiences. This allows you to continue leveraging Drupal’s rendering system, while simultaneously using a JavaScript framework to power client-side interactivity and a richer user experience. -There are many different approaches to progressively decoupling Drupal, all with different pros and cons. This webinar will cover the different compelling approaches and some use cases of each, including: -How weather.com implemented Drupal with progressively decoupled Panels -Warner Music Group’s success with application shell-like progressive decoupling, in which the content area is controlled via JavaScript -An approach that leaves the entire page body handed over to JS, with Drupal provided initial state on page load t

SAP UX update for ASUG chapter meetings 2022 Q1 and Q2

Peter Spielvogel

Dries Buytaert Shares His View on Decoupled Drupal: When, Why, and How

More and more developers are choosing content-as-a-service solutions known as decoupled CMSes, and due to this trend, people are asking whether decoupled CMSes are challenging the market for traditional CMSes. By nature, decoupled CMSes lack end-user front ends, provide few to no editorial tools for display and layout, and as such leave presentational concerns almost entirely up to the front-end developer. Luckily, Drupal has one crucial advantage that propels it beyond these concerns of emerging decoupled competitors. Join Dries Buytaert, founder of Drupal and CTO at Acquia, as he shares his knowledge on how Drupal has an advantage over competitors, and discusses his point-of-view on why, when, and how you should implement decoupled Drupal. Dries will touch on: His thoughts on decoupled CMSes - where is the CMS market headed and when? His opinion on whether decoupled CMSes will replace traditional CMSes The advantages of decoupled Drupal vs. emerging decoupled competitors Considerations when determining if decoupled Drupal is right for your project

RESUME BUILDER WEB APPLICATION

IRJET Journal

SUG Bangalore - Kick Off Session

Anindita Bhattacharya

Evole18 | Ian Reasor & Amol Anand | AEM and SPA Content Management

apidays Paris 2022 - Agile API delivery with Feature Toggles, Rafik Ferroukh,...

apidays

apidays Paris 2022 - APIs the next 10 years: Software, Society, Sovereignty, Sustainability December 14, 15 & 16, 2022 Agile API delivery with Feature Toggles Rafik Ferroukh, Software Architect at Allianz Technology ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/ Deep dive into the API industry with our reports: https://www.apidays.global/industry-reports/ Subscribe to our global newsletter: https://apidays.typeform.com/to/i1MPEW

MuleSoft Milano Meetup #7 Florence Consulting

Florence Consulting

[20160314][CUHK][CSCI4140]Life of an Agile Team]

Wong Hoi Sing Edison

Utsha guha cocoa:swift-exp5.9yr

Utsha Guha

A Decoupled Drupal Story: Powdr Gives Developers Ultimate Flexibility To Buil...

As the internet and web-connected devices continue to evolve, so do the needs to develop and render content. Given today’s rate of change, organizations are using decoupled architecture to build applications - giving them flexibility to accommodate any device or experience. In this session, we’ll cover Powdr, a ski resort holding company. To give its developers the freedom to use the right front-end tools needed for any given use case, Powdr built its 17 ski resort websites on one decoupled Drupal platform. Join Elevated Third, Hoorooh Digital and Acquia to learn: How a custom Drupal 8 solution cut implementation time in half vs Drupal 7 The ease in which Drupal 8’s internal REST API can be extended to fit a client's needs The details of handling non-Drupal application routing on Acquia's servers

The relevance of design principles for WEB APIs

Rolando Carrasco

Cv horacio vallejo-201302 - enHoracio Vallejo

Angular 6 Form Validation with Material

Malika Munaweera

Re-Platforming: How to Plan Your Next Multi-Site Digital Platform

Jake Borr

Businesses maintain thousands of sites that support marketing campaigns, new products, brands, and multi-regional branches. From bottomline revenue to digital workflows, the implementation of a multisite platform has tangible business impacts. Selecting a system is a strategic decision that will determine how your team delivers and governs sites for years to come. Join a session with Acquia’s Platform executives and leave understanding: -Why experienced enterprises use multisite to power thousands of sites -How to evaluate platforms and find the right solution for your team -A framework for structuring multisite platforms - from development to governance

Internship Presentation - P4Bhargav Pathaneni

Lightning Web Component in Salesforce

Jitendra Zaa

How to create a Vue Storefront theme

Divante

Similar to Evolve 19 | Upen Manickam & Amanda Gray | Adventures in SPA with AEM 6.5 (20)

Sitecore user group mumbai sitecore commerce extension

Migrating and adopting Drupal 8: Why you need Cohesion

Across the spectrum different approaches to progressively decoupled drupal (...

SAP UX update for ASUG chapter meetings 2022 Q1 and Q2

Dries Buytaert Shares His View on Decoupled Drupal: When, Why, and How

RESUME BUILDER WEB APPLICATION

SUG Bangalore - Kick Off Session

Evole18 | Ian Reasor & Amol Anand | AEM and SPA Content Management

apidays Paris 2022 - Agile API delivery with Feature Toggles, Rafik Ferroukh,...

MuleSoft Milano Meetup #7 Florence Consulting

[20160314][CUHK][CSCI4140]Life of an Agile Team]

Utsha guha cocoa:swift-exp5.9yr

A Decoupled Drupal Story: Powdr Gives Developers Ultimate Flexibility To Buil...

The relevance of design principles for WEB APIs

Cv horacio vallejo-201302 - en

Angular 6 Form Validation with Material

Re-Platforming: How to Plan Your Next Multi-Site Digital Platform

Internship Presentation - P4

Lightning Web Component in Salesforce

How to create a Vue Storefront theme

More from Evolve The Adobe Digital Marketing Community

Evolve 19 | Paul Legan & Kristin Jones | Anatomy of a Solid AEM Implementatio...

Evolve 19 | Rabiah Coon & Rebecca Blaha | Rockstar Kickoffs for AEM Projects

The roles of the Product Owner, Business Analyst and/or Subject Matter Expert are crucial to the success of an AEM project, especially at critical times. From the development team’s perspective leveraging these resources during kickoff can set the project up for success. Hear more about the right resourcing and preparation for kickoff can enable development teams to start a project off right and to avoid costly changes (scope increase or rework) later in the project.

Evolve19 | Nick Panagopoulos | World Focus: Translation Tips and Trends

In this session, attendees will learn about key take-aways from a recent interactive round table hosted by Translations.com and Adobe with their shared customers, Lavazza, Western Digital, Lufthansa, and Honeywell. As the $800M leader of their industry, Translations.com will also share trends in translations they are seeing across their 95+ Adobe Experience Manager customers. Bring your burning localization related questions to this interactive session.

Evolve 19 | Carl Madaffari | Best Practices | From Customer Data to Customer ...

Today’s customers expect relevant and personalized engagement with brands – or they go elsewhere. In this session, Carl will lay out some of the hurdles involved in crafting a customer- and loyalty-forward data management and architectural strategy. Using examples from specific client engagements, he will outline approaches to building an actionable data and technology stack on which teams can build and extend personalized interactions.

Evolve 19 | Gina Petruccelli | Let’s Dig Into Requirements

Evolve 19 | Dave Fox | Retaining Niche Talent in a Highly Competitive Environ...

Evolve19 | Giancarlo Berner & Brett Butterfield | AI & Adobe Sensei

Evolve 19 | Bruce Swann | Adobe Campaign - Capabilities, Roadmap, and Fit wit...

Evolve 19 | Pete Hoback & Francisco Fagalde | AEM QA, UAT, & Go Live

Evolve 19 | Harsh Walia | Best Practices - Adobe Experience Manager

Evolve19 | Michel Holland | Marketo - Delivering the Best Experience for the ...

Evolve18 | Abhishek Dwevidi & Varun Mitra | Introduction to AEM Integration w...

Evolve18 | Abhishek Dwevidi & Varun Mitra | Introduction to Adobe Analytics a...

Evolve18 | Abhishek Dwevidi & Varun Mitra | Introduction to Launch by Adobe

Evolve18 | Abhishek Dwevidi & Varun Mitra | AEM as Headless or Hybrid CMS

Evolve18 | Shreya Jha | Growing up with AEM: Best Western’s Story of Digital ...

Evolve18 | Franco Campione | Success Story: How the Adobe Marketing Cloud Tra...

Evolve18 | Harold Williams | The BBVA Compass Migration Journey to AEM

BBVA Compass migrated its main public website - bbvacompass.com to the Adobe Experience Manager 6.2 platform. And at the same time as the migration, BBVA Compass also begin the use of Adobe Analytics. Both implementations were core to the companies ongoing digital strategy. The migration of BBVACompass.com was the kickoff of a global effort of BBVA in which several bank entities in Europe and Latin America will be migrating to a .com with the similar look and feel. The BBVA Compass team partnered with BBVA Global and Adobe Professional Services to create a world class digital experience at BBVACompass.com

Evolve18 | Bruce Swann | Adobe Campaign - Capabilities, Roadmap, and Fit With...