Customize this!

With Connections Cedar we introduced new ways on how you can customize the user experience, for example change colors, fonts, styles and more. In this behind the scenes presentation you will learn how easy it is to change the look and feel of Connections on a running system with no down time.

Transcript

1. Let‘s Connect 2022 October 26, 2022 Customize this! Stefan Hessler Bill Wimer
2. Let’s Connect 2022 October 26, 2022 Let‘s Connect 2022 October 26, 2022 UI Overview Customization Goals Customization Examples Upgrade Considerations
3. Let’s Connect 2022 October 26, 2022 Side Navigation Third-level Navigation Header Area Search Box Secondary Navigation Admin Banner Important To Me Bar Main Content Share & File Upload
4. Let’s Connect 2022 October 26, 2022 Let‘s Connect 2022 October 26, 2022 UI Overview Customization Goals Customization Examples Upgrade Considerations
5. Let’s Connect 2022 October 26, 2022 Customization Extensibility • Functional / Behavioral and cosmetic customizations • Designed into the new React components • Declarative Configuration • Easier to administer • Dynamic changes vs. server restarts • Upgrade durability • Documentation + examples delivered via GitHub
6. Let’s Connect 2022 October 26, 2022 Appregistry Extensions • Simple JSON payloads • Scope to CNX services or extension types • Persisted in MongoDB; survive across upgrades • One click enable/disable • Take effect dynamically; next refresh • Expanding into several areas beyond the original concept for Customizer
7. Let’s Connect 2022 October 26, 2022 Alternate / Non-CP Extensions • Window scoped JS variables serve as fallback for non-CP environments • Banner supports HCXT-based API for dynamic updates
8. Let’s Connect 2022 October 26, 2022 Style Customization Documentation
9. Let’s Connect 2022 October 26, 2022 Appregistry Extension & Style Guide
10. Let’s Connect 2022 October 26, 2022 Let‘s Connect 2022 October 26, 2022 UI Overview Customization Goals Customization Examples Upgrade Considerations
11. Let’s Connect 2022 October 26, 2022 Connections Cedar Customizations • UI styles (colors, fonts, sizes) • Navigation (entries, actions, required ACL and positioning) • Header area (elements, positioning, logo) • Banner message (state, content, type) • Global search (search providers, urls) • Content sharing (options, icons, action)
12. Let’s Connect 2022 October 26, 2022 UI Style Customization Extension Example • Name, description, service scope, overall enabled • Object with generic key – value properties • Appregistry request caching • Extension path, extension enabled
13. Let’s Connect 2022 October 26, 2022 Style Customization Before / After
14. Let’s Connect 2022 October 26, 2022 Customization Demos
15. Let’s Connect 2022 October 26, 2022 Let‘s Connect 2022 October 26, 2022 UI Overview Customization Goals Customization Examples Upgrade Considerations
16. Let’s Connect 2022 October 26, 2022 Functional / Behaviors • Most functional customizations are still valid • Areas that are not in use anymore (e.g. header) may be disregarded • JSP, JavaScript customization may be subject to updates (merge with updated JSPs, e.g. for Profiles) • Generally, JSPs are still heavily used and can be adjusted • JavaScript extensions likely remain as is (some minor updates may need to be considered)
17. Let’s Connect 2022 October 26, 2022 Cosmetic • Most cosmetic customizations are still valid, but may be restyled • Areas that are not in use anymore (e.g. header) are disregarded • CSS customizations may be invalidated with new UI and consolidated styles • Can be customized through config customization approach • Automation testing that is DOM driven (i.e. checks fr specific elements) may require changes
18. Let’s Connect 2022 October 26, 2022 Globalization • Customization of product strings still valid • New strings were introduced for new UI (some replacing old strings) – e.g. Homepage, Profiles • Many new UI components use different translation baseline • Can be customized through config customization approach
19. Let’s Connect 2022 October 26, 2022 CNX 7 vs CNX 8 UX • Heavily customized deployments may need extra time to ensure customizations are working properly • For a limited time, CNX 7 UX could be enabled to ease the transition • CNX 8 UI is enabled by default • Set the following in LotusConnections-config.xml to enable 7 UX <genericProperty name="ics.ui.isCNX8UXEnabled">false</genericProperty> • Restart is required • Will not be supported forever! TBD but 8.0 CR2 (mid 2023) is being considered
20. Let’s Connect 2022 October 26, 2022 Thank you!