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

Raster Component

The  Raster Component is an interactive grid-based visualization tool that allows users to interact with a coordinate-based system overlaid on an image. It enables the selection and highlighting of specific grid sections, making it ideal for seat selection, warehouse mapping, or any application requiring position-based selection on a visual reference. The component can be connected to data sources to load or save selected positions.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Warehouse Layout" allows for easy identification of the component's purpose in the component structure, making it easier for developers to work with this specific raster component.

Visual Properties

• image - Specifies the URL of the background image over which the raster grid will be displayed. For example, setting it to "https://example.com/images/warehouse-layout.jpg" will show a warehouse floor plan as the background for the grid system.

• rasterHeight - Sets the overall height of the raster component in pixels. For example, setting it to "500" creates a raster with a height of 500 pixels, ensuring consistent sizing across different display environments.

• rasterWidth - Sets the overall width of the raster component in pixels. For example, setting it to "500" creates a raster with a width of 500 pixels, maintaining proper proportions with the specified height.

• rectH - Defines the height of each individual grid cell in the raster. For example, setting it to "50" creates cells that are 50 pixels tall, affecting both the granularity of selection and the visual appearance.

• rectW - Defines the width of each individual grid cell in the raster. For example, setting it to "50" creates cells that are 50 pixels wide, which determines how many columns will appear across the raster width.

• axisTextColor - Sets the color of the axis labels (coordinates) in the raster grid. For example, setting it to "#98989C" creates light gray labels for the grid coordinates, providing visual reference without being too obtrusive.

• rectBackgroundColor - Determines the background color of selected grid cells. For example, setting it to "#E6E14F" (yellow) makes selected cells stand out with a bright yellow background, making selections clearly visible to users.

• textColor - Sets the color of text displayed within selected grid cells. For example, setting it to "#000000" (black) ensures that any text in the selected cells is clearly readable against the cell background color.

• enableRaster - Controls whether the raster grid is visible over the background image. When set to true, the coordinate grid is displayed over the image; when false, only the image is shown without grid lines, useful for toggling between view and selection modes.

• paddingClass - Configures spacing around the raster component using CSS classes. For example, "p-4" adds medium padding on all sides of the component, improving its visual integration within its container.

Datasource Properties

• dataSourceId - Specifies the data source ID for retrieving raster selection data. For example, setting to "api/warehouse/sections" connects the raster to an API endpoint that provides information about which grid sections should be marked as selected.

• datasourceParametersMap - Configures HTTP parameters for data fetching. This object maps parameters needed for the data request, supporting QUERY, PATH, HEADER, and BODY parameter types. For example, {"warehouseId": {"value": "123", "type": "PATH"}} would include the warehouse ID in the path when fetching data.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to:
  • ON_RASTER_CLICK: Triggered when a grid cell in the raster is clicked. The event context includes the coordinates and selection state of the clicked cell, enabling actions like recording seat selections or toggling warehouse bin status.
  • ON_INIT: Triggered when the raster component is initialized. Can be used to perform setup operations like loading default selections.
  • ON_DESTROY: Triggered when the raster component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization Properties

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "warehouseManagersOnly" restricts the raster visibility to users with warehouse manager privileges, ensuring that only authorized personnel can view or modify the raster selections.

Visibility Properties

• displayConditions - Defines conditions for displaying the component. This allows showing or hiding the raster based on complex rules involving other form values, user roles, or application state, useful for conditional presentation of the raster component.

Testing Hooks Properties

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

• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "warehouse-section-raster" allows test scripts to reliably locate this component during automated testing.

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the raster can be highlighted during onboarding or tutorial flows to explain its functionality to new users.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Section Selection", "de-DE": "Bereichsauswahl"} provides clear identification during guided tours.

• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click on sections to select/deselect them", "de-DE": "Klicken Sie auf Bereiche, um sie auszuwählen/abzuwählen"} provides detailed instructions during guided tours.

Available Methods

The Dynamic Raster Component provides several programmatic actions that can be triggered through flows or other components:

• getData - Retrieves the current selection data from the raster, returning an array of selected grid coordinates. This is useful for saving the current state or passing selections to other components.

• clearData - Removes all selections from the raster, resetting it to a blank state. This is useful for implementing a "clear all selections" feature.

• reloadData - Refreshes the raster data from the configured data source, useful when the underlying data may have changed due to actions outside the component.

• toggleRasterOn - Enables the display of the grid lines over the background image, making the coordinate system visible.

• toggleRasterOff - Disables the display of the grid lines, showing only the background image with selections, for a cleaner visual presentation.

• getRasterState - Returns the current visibility state of the raster grid lines, useful for UI controls that need to reflect the current display mode.