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

Icon

The Icon Component is a versatile UI element that displays an interactive icon with customizable appearance, behavior, and conditional display options. It supports various styling options, tooltip configuration, and can change its appearance based on data context. This component is ideal for creating interactive indicators, status displays, or clickable action buttons within your application.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Status Indicator Icon" allows for easy identification of the icon's purpose in the component structure, making it easier for developers to locate and work with this specific icon.

Visual Properties

  • name - Specifies the icon to display from the available icon library. For example, setting to "check-circle" displays a checkmark icon that can represent completion or success. This is the primary visual element of the component.

  • thresholdConfig - Configures conditional display rules that change the icon's appearance based on context data. For example, you can set rules to display a green check icon when a status is "complete" and a red warning icon when status is "overdue". This enables dynamic visual feedback based on data values.

  • size - Sets the size of the icon. Options include "sm" (small) or "lg" (large). For example, choosing "lg" creates a more prominent icon that can serve as a focal point, while "sm" works well for inline indicators or dense layouts.

  • iconOnHover - Specifies an alternate icon to display when the user hovers over the component. For example, setting "edit" as the hover icon on a "view" primary icon indicates that clicking will allow editing the item. This provides interactive feedback to users.

  • widthAuto - Controls whether the icon component automatically sizes to fit its content. When set to true, the icon will take only as much width as needed; when false, it will fill available space in its container according to specified dimensions.

  • showTooltip - Determines whether a tooltip appears when hovering over the icon. When enabled, provides additional context or instructions about the icon's purpose to users who may not immediately recognize its meaning.

  • tooltipTextTranslations - Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "Complete Task", "de-DE": "Aufgabe abschließen"} ensures proper localization of tooltip messages. This property can use template expressions to show dynamic content from context data.

  • tooltipPlacement - Determines the position of the tooltip relative to the icon. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the icon, which is useful in most standard layouts.

  • tooltipDelay - Sets the delay in milliseconds before the tooltip appears when hovering over the icon. For example, setting to "500" will delay the tooltip appearance by half a second, preventing tooltips from appearing too quickly during casual mouse movements.

  • paddingClass - Configures spacing around the icon using CSS classes. For example, "p-2" adds light padding on all sides of the icon, improving its visual spacing within its container.

Event Actions Properties

  • events - Configures the events that the component can trigger and respond to:
    • ON_ICON_CLICK: Triggered when the icon is clicked. Can be used to execute workflows, navigate to other screens, or perform data operations based on user interaction.
    • ON_INIT: Triggered when the icon component is initialized. Can be used to perform setup operations when the icon first appears.
    • ON_DESTROY: Triggered when the icon 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 "adminActionsPolicy" restricts the icon visibility to users with administrative privileges, allowing for role-based UI customization.

Visibility Properties

  • displayConditions - Defines conditions for displaying the component. This allows showing or hiding the icon based on complex rules involving form values, user roles, or application state. For example, the icon might only be shown when certain data conditions are met or when the user has specific permissions.

Testing Hooks Properties

  • id - Specifies a unique identifier for the component used for programmatic access. For example, "completeTaskIcon" enables targeted manipulation of this specific icon through scripts or automated tests.

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

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the icon can be highlighted during onboarding or tutorial flows to draw user attention to important interactive elements.

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

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click this icon to complete the task", "de-DE": "Klicken Sie auf dieses Symbol, um die Aufgabe abzuschließen"} provides detailed instructions during guided tours.

  • No labels