Link Search Menu Expand Document

Carousel

Table of contents


Overview

Displays a “carousel” typed incoming response. As a regular incoming message, carousel has a message section with a timestamp and avatar, and the quick options and channels at the bottom. The carousel provides the ability to display multiple related answers to a user query in a horizontal scrollable structure.

Each corousel item consists of three display sections:

  • ImageOptional - Can be configured with a url link, on the admin console. If image was not set, a default image will be displayed.
  • InfoMandatory - Consist of a Title and an optional subtitle
  • OptionsOptional - Item options .

UI configurations

The carousel UI can be customized, by overriding the CarouselItemsUIProvider.configure method and/or the CarouselItemsUIProvider.customize method for dynamic data related customizations.
The available configuration proprties can be found in CarouselItemsUIAdapter.

General item configurations

  • Use CarouselItemsUIAdapter.setCardStyle method to configure the carousel item display.
    • elevation level - level of 0, makes a flat look, while greater values sets a card look to the items.
    • Rounded corners - defined by a radius level. Value of 0 makes squere corners.

    Notice, If a card style display is configured, items background should not be transparent!

  • Carousel items consist of 3 display sections: info, image and options. The sections display order, can be configured with CarouselItemsUIAdapter.setInfoTextAlignment, defaults to CarouselItemConfiguration.ItemInfoAlignment.AlignBelowThumb

Info section

Info section contains a title and a sub-title, which are configured with minimum line number of 1 and 2 lines respectfully.
Minimum line number can be configured with setInfoTitleMinLines and setInfoSubTitleMinLines methods. The minimun height for this section will be calulated according to the line number values.
The sub-title height is flexible and may stretch to the maximum available item height.

ChatUIProvider(context).apply {
    chatElementsUIProvider.incomingUIProvider.carouselUIProvider.configure = { adapter ->
        adapter.apply {
            setInfoSubTitleMinLines(4) // set minimum sub title size to 4 lines hight
            setInfoTitleMinLines(3) // set minimum title size to 3 lines hight
        }
    }
}

Additional info section configurations can be found in CarouselItemsUIAdapter. See methods prefixed with setInfo.

Options section

Item options are contained in a non-scrollable vertical order layout.
The options, text alignment and look are configurable.

All options are configured to the same line count, defaults to 1 line.
Use CarouselItemsContainer.setOptionsLineCount method to change the line count.

Carousel view height is being calculated according to the item with the maximum number of options.

Image section

Image size is constant. If a link is configured for the image, it will be passed to the hosting App, on user press action, for further handling, via ChatEventListener.onUrlLinkSelected implementation.


UI override

Carousel list section can be override by overriding CarouselItemsUIProvider.overrideFactory property.
A customed implementation of CarouselItemsAdapter should be provided by the overriding factory.

ChatUIProvider(context).apply {
    this.chatElementsUIProvider.incomingUIProvider.carouselUIProvider.overrideFactory =
            object : CarouselItemsUIProvider.CarouselFactory {
                override fun createItemsAdapter(context: Context): CarouselItemsAdapter {
                    return MyCarouselImplementation();
                }
    }
}