search

pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 29 forks source link

Enhancement Request - Image Carousel - Areteans #97

Open s-thutupalli opened 5 days ago

s-thutupalli commented 5 days ago

Component Enhancement

Title: Image Carousel Component

Description:

The Image Carousel is a versatile and dynamic component designed to enhance the visual appeal of business portals by showcasing benefits, products, or key highlights through a smooth sliding interface.This component can be configured with multiple items, making it ideal for quick access to info links, branding guidelines, and other day-to-day actions.

Component Initialisation:

This is a field level Image Carousel component that can be added to any form view or details view within Pega Constellation. The component takes multiple images and display them in a sliding carousel format with multiple configurable options.

Configuration Options:

Data Page(REQUIRED) : Name of the source data page of List Type. Ex: D_CarouselList Indicators(OPTIONAL): Enable the check box to display indicators. Captions(OPTIONAL): Enable the check box to display captions. AutoPlay Settings(OPTIONAL): Enable the check box for auto play of carousel by configuring AutoPlay Interval (ms),Animation Type,Transition Duration (ms),Pause on Hover.

Note: Column names of the source must be same as mentioned below.

Column Name to be used.

Image Source --- Image

Slide Description --- Description

Unique ID --- ID

Slide Heading --- Heading

Link for LearnMore Button --- LearnMoreLink

Link for Go To page button --- GoToPage

Why This Component Would Be Useful

The Image Carousel component would be a valuable addition to Pega Constellation for several reasons:

Enhanced Visual Appeal: It allows users to create visually appealing interfaces that can use multiple images effectively by showcasing benefits, products, or key highlights Improved User Engagement: By providing an interactive way such as actionable buttons to display content, it can increase user engagement and satisfaction. Ease of Use: Simplifies the process of adding dynamic image displays, saving time and effort for developers. Customisable: It allows you to use multiple configurable settings which suits good for the business.

By integrating this component, Pega Constellation can offer a more robust UI feature-rich platform for showcasing key highlights/products of business to build a user-friendly applications.

Attached the component code and detailed description with images below.

ImageCarousel.docx ImgCarousel.zip

ricmars commented 1 day ago

there is already such component https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/widgets-image-carousel--docs so we are not planning to add another type of component - if the current component is missing functionality, please create a branch with some enhancements -see https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/support-and-contributing--docs

s-thutupalli commented 13 hours ago

Hi Richard, On top of the existing component, we have added below enhancements, which can be incorporated into it.

Enhancements: This component can be used at form view since it is a field level component instead widget. There are 2 buttons provided on the each slide of the carousel with clickable actions. Ex: Go To Page, Learn More buttons, navigating to the related website. Autoplay Settings has an additional features like Pause On Hover, Transition Duration, AutoPlay Interval. All the data showing up in carousel is dynamically configurable. User have control over the captions either to show or hide based on the requirement.

Thanks, Sowjanya