Link

The Link Component is a versatile UI element that creates interactive links within your application. It supports customization of appearance with icons, tooltips, and various styling options. This component is ideal for creating navigation elements, action links, or clickable text with visual indicators.

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

  • titleTranslations - Sets the text displayed on the link with support for multiple languages. For example, {"en-US": "View Details", "de-DE": "Details anzeigen"} ensures proper localization of the link text for different language settings.

  • disabled - Controls whether the link is clickable or not. When set to true, the link appears grayed out and does not respond to clicks, which is useful for conditionally disabling navigation options based on user permissions or application state.

  • active - Determines whether the link appears in an active/selected state. When set to true, the link is visually highlighted to indicate it represents the current page or selection, providing users with visual feedback about their current location.

  • leftIcon - Specifies an icon to display to the left of the link text. For example, setting to "document" would display a document icon before the text, making the purpose of the link more immediately clear to users.

  • rightIcon - Specifies an icon to display to the right of the link text. For example, setting to "external-link" would indicate that the link navigates to an external website or opens in a new window.

  • showTooltip - Controls whether a tooltip is displayed when hovering over the link. When enabled, provides additional information about the link's purpose or destination.

  • tooltipTextTranslations - Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "Navigate to product details", "de-DE": "Zu den Produktdetails navigieren"} provides context-specific information when users hover over the link.

  • tooltipPlacement - Determines the position of the tooltip relative to the link. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the link, which is useful when links are arranged horizontally.

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

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

  • events - Configures the events that the component can trigger and respond to:
    • ON_LINK_CLICK: Triggered when the link is clicked. Can be used to navigate to URLs, open dashboards, or perform other actions based on user interaction.
    • ON_INIT: Triggered when the link component is initialized. Can be used to perform setup operations when the link first appears.
    • ON_DESTROY: Triggered when the link component is removed from the DOM. Useful for cleanup operations and releasing resources.

  • authorizationDisable - Specifies a policy set that determines whether the link should be enabled or disabled based on user permissions. For example, setting to "editingPermissions" would disable the link for users who don't have editing permissions, while still showing it in the interface.

  • visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminMenuPolicy" would make the link visible only to users with administrator privileges.

  • displayConditions - Defines conditions for displaying the component. This allows showing or hiding the link based on complex rules involving form values, user roles, or application state. For example, the link might only be shown when certain data is available or when the user is in a specific workflow step.

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

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

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

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

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click here to view detailed information", "de-DE": "Klicken Sie hier, um detaillierte Informationen anzuzeigen"} provides detailed instructions during guided tours.

  • No labels