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

Image Displayer

The Dynamic Image Displayer component provides a flexible way to display images on a page with various sizing and display options. It supports multiple display strategies, custom dimensions, and event handling for user interactions.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. This allows for easy identification of the component within the application structure. Example: "Product Image".

  • imageUrl - Specifies the URL path to the image that should be displayed. This can be an absolute URL to an external image or a relative path to an image within your application. Supports template expressions for dynamic image sources based on context values. Example: "[https://example.com/images/product.jpg](https://example.com/images/product.jpg)" or "{{context.product.imageUrl}}".

Visual Properties

  • resizeImageStrategy - Determines how the image is sized and displayed within its container. Options include:

    • fitToContainer: Scales the image to fit within the container while maintaining aspect ratio
    • useStaticSize: Uses the specified width and height dimensions
    • fillWholeContent: Stretches the image to fill the entire container, potentially distorting the aspect ratio
    • useRealSize: Displays the image at its original dimensions Example: "fitToContainer".

  • width - Sets the width of the image when using the useStaticSize strategy. This property accepts standard CSS size values. Example: "300px" or "50%".

  • height - Sets the height of the image when using the useStaticSize strategy. This property accepts standard CSS size values. Example: "200px" or "auto".

  • alt - Defines alternative text description for the image, important for accessibility and when the image cannot be loaded. This text will be read by screen readers and displayed if the image fails to load. Example: "Red sports car on mountain road".

  • disableScrollbar - Controls whether scrollbars appear when the image exceeds its container dimensions. When set to true, scrollbars are hidden even if the image is larger than its container. Example: false.

  • widthAuto - Automatically calculates the width of the component based on its content. This is useful when you want the image container to size itself to the content rather than defining a fixed width. Example: true.

  • heightAuto - Automatically calculates the height of the component based on its content. This is useful when you want the image container to size itself to the content rather than defining a fixed height. Example: true.

  • paddingClass - Configures the padding space around the component using CSS classes. For example, "p-3" adds medium padding on all sides of the image. Example: "p-3".

Event Actions

  • events - Configures the events that the component can trigger and respond to:

    • ON_IMAGE_CLICK: Triggered when the user clicks on the image. Can be used to open larger versions of the image, navigate to detail pages, or trigger other actions.
    • 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.
    • ON_GLOBAL_PARAMETERS_CHANGE: Triggered when global parameters that might affect the component change. Example:

Authorization Properties

  • visibilityPolicySetId - Determines whether the component is displayed based on a policy set. This allows showing the image only to users with specific permissions. Example: "contentViewerPolicy".

Visibility Properties

  • displayConditions - Defines conditions for displaying the component. This allows showing the image only when certain conditions are met, such as when specific data is available or meets certain criteria. Example:

    [   {     "field": "context.product.hasImage",     "operator": "equals",     "value": true   } ]

Testing Hooks

  • id - Specifies a unique identifier for the component used for programmatic access. Example: "productMainImage".

  • dataTestId - Sets the testing hook ID for automated testing. This helps QA teams locate and interact with the component in automated tests. Example: "product-image-component".

  • enableAsHotspot - Enables the component as a guided tour hotspot. When set to true, the component can be highlighted during guided tours to help users learn the interface. Example: true.

  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. Example: {"en-US": "Product Image", "es-ES": "Imagen del Producto"}.

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. Example: {"en-US": "Click on the image to see larger view", "es-ES": "Haga clic en la imagen para ver una vista más grande"}.

  • No labels