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

    View full-size slide

  2. Let’s Connect 2022 October 26, 2022
    Let‘s Connect 2022 October 26, 2022
    UI Overview
    Customization Goals
    Customization Examples
    Upgrade Considerations

    View full-size slide

  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

    View full-size slide

  4. Let’s Connect 2022 October 26, 2022
    Let‘s Connect 2022 October 26, 2022
    UI Overview
    Customization Goals
    Customization Examples
    Upgrade Considerations

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  8. Let’s Connect 2022 October 26, 2022
    Style Customization Documentation

    View full-size slide

  9. Let’s Connect 2022 October 26, 2022
    Appregistry Extension & Style Guide

    View full-size slide

  10. Let’s Connect 2022 October 26, 2022
    Let‘s Connect 2022 October 26, 2022
    UI Overview
    Customization Goals
    Customization Examples
    Upgrade Considerations

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  13. Let’s Connect 2022 October 26, 2022
    Style Customization Before / After

    View full-size slide

  14. Let’s Connect 2022 October 26, 2022
    Customization Demos

    View full-size slide

  15. Let’s Connect 2022 October 26, 2022
    Let‘s Connect 2022 October 26, 2022
    UI Overview
    Customization Goals
    Customization Examples
    Upgrade Considerations

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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
    false
    • Restart is required
    • Will not be supported forever! TBD but 8.0 CR2 (mid 2023) is
    being considered

    View full-size slide

  20. Let’s Connect 2022 October 26, 2022
    Thank you!

    View full-size slide