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.

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

2. #evolve19 2
NOT YOUR AVERAGE SPA PROJECT

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

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

5. #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

6. #evolve19 6
PROJECT IMPLEMENTATION
How we approached the project

7. #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

8. #evolve19 8
PROJECT IMPLEMENTATION
Obstacles during the project

9. #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

10. #evolve19 10
PROJECT IMPLEMENTATION
Unique features/customizations

11. #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

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

13. #evolve19 13
SPA IN AEM
Upgrading from 6.4 to 6.5

14. #evolve19 14
SPA IN AEM

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

16. #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

17. #evolve19 17
ENTITLEMENTS MANAGEMENT
Logic and implementation

18. #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.

19. #evolve19 19
ENTITLEMENTS IMPLEMENTATION

20. #evolve19 20
ENTITLEMENTS IMPLEMENTATION

21. #evolve19 21
MOBILE APP
Implementation

22. #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

23. #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

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

25. #evolve19 25
QUESTIONS? BUELLER?

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

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

28. #evolve19
THANK YOU!