Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Customize this!

LetsConnect
November 01, 2022

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.

LetsConnect

November 01, 2022
Tweet

More Decks by LetsConnect

Other Decks in Technology

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!