(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Card collection

The Dynamic Card Collection component displays a grid of interactive cards populated from a data source. It supports features like pagination, customizable templates, expandable content, and interactive card selection. This component is ideal for presenting collections of items in a visually appealing and organized way.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Product Catalog" allows for easy identification of the component's purpose in the component structure.

  • id - Specifies a unique identifier for the component used for programmatic access. For example, "featured-products" enables targeted manipulation of this specific card collection.

  • visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "customerOnlyPolicy" restricts the card collection to authenticated customers only.

  • displayConditions - Defines conditions for displaying the component based on context values or expressions. For example, you can show the cards only when a specific filter is active by setting { parameter: "categoryFilter", operator: "isNotEmpty" }.

Visual Properties

  • showHeader - Controls visibility of the collection header section. When enabled, displays the title above the card collection. For example, setting to true will show the header area with the configured title.

  • titleTranslations - Sets the title text displayed in the header, with support for multiple languages. For example, {"en-US": "Featured Products", "de-DE": "Ausgewählte Produkte"} ensures proper localization of the header text.

  • fullWidth - Determines if the card collection should take up the full width of its container. When enabled, the cards will span across the entire available width rather than being constrained to a default size.

  • changeBackgroundOnHover - Controls whether cards change their background color when hovered over. When enabled, provides visual feedback to users as they move their cursor over individual cards, indicating interactivity.

  • activeCollapsedTemplate - Enables the use of a custom template for collapsed card content. When enabled, you can define a specialized view for cards in their default collapsed state, allowing for more customized card appearances.

  • activeExpandedTemplate - Enables the use of a custom template for expanded card content. This option is only available when activeCollapsedTemplate is enabled, allowing you to create different views for collapsed and expanded states of cards.

  • columnCount - Specifies the number of columns in the card collection grid when fullWidth is enabled. For example, setting to 3 will arrange the cards in three columns across the available width.

  • customHeight - Sets a custom height for the card collection container. For example, 400px creates a fixed-height scrollable container, while percentage values like 50% make it relative to its parent element's height.

  • elements - Contains all template components used by the card collection, including header templates, collapsed content templates, and expanded content templates. These elements define the structure and appearance of your cards.

  • scrollingEnabled - Controls whether the card collection should be scrollable. When enabled, the collection will become scrollable if its content exceeds the defined height, otherwise content will expand the container.

  • paddingClass - Configures spacing around the card collection using CSS classes. For example, "p-4" adds medium padding on all sides of the component for better visual spacing.

Datasource Properties

  • titleKey - Specifies which field from the data source should be used as the card title. For example, if your data has a "productName" field, setting titleKey to "productName" will display that value as the card title.

  • subtitleKey - Specifies which field from the data source should be used as the card subtitle. For example, if your data has a "description" field, setting subtitleKey to "description" will display that value as the subtitle.

  • showLoader - Determines whether a loading indicator is shown while data is being retrieved. When enabled, provides visual feedback during data loading operations.

  • emptyDataSourceText - Sets the text to display when the data source returns no results. For example, {"en-US": "No products found"} provides clear feedback when the collection is empty.

  • dataSourceId - Specifies the data source ID for retrieving card collection data. For example, "api/featured-products" connects the component to the products API endpoint.

  • getEntityCollectionHttpRequestParametersMap - Configures HTTP parameters for data fetching, including query parameters, path parameters, and headers. This object maps additional parameters needed for the data request.

  • enablePagination - Activates server-side pagination for large datasets. When enabled, data is loaded in pages rather than all at once, improving performance for large collections.

  • pageSize - Sets the number of cards loaded per page when pagination is enabled. For example, setting to 12 will load 12 cards per page when scrolling.

  • keyExpression - Defines the field used to uniquely identify each card in the collection. For example, if your data has an "id" field, setting keyExpression to "id" ensures each card can be uniquely identified and tracked.

Event Actions

  • events - Configures the events that the component can trigger and respond to:
    • ON_CARD_CLICK: Triggered when a user clicks on a card. Can be used to navigate to detail pages or show additional information.
    • ON_GLOBAL_PARAMETERS_CHANGE: Triggered when global parameters that affect the component are modified.
    • ON_FIRST_CARD_LOADED: Triggered when the first card is loaded from the data source. Useful for performing actions once data is initially available.
    • ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations.
    • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations.

Testing Hooks

  • dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "featured-products-collection" allows test scripts to reliably locate this component.

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the component can be highlighted during guided tours of your application.

  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting multiple languages. For example, {"en-US": "Browse Products", "de-DE": "Produkte durchsuchen"} provides localized titles when the component is featured in an application tour.

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click on a product card to see details", "de-DE": "Klicken Sie auf eine Produktkarte, um Details zu sehen"} provides contextual information during guided tours.

  • No labels