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

Tag

The Tag Component is a versatile UI element that displays short, categorized text labels with visual styling to convey status, category, or importance. Tags are commonly used to highlight attributes, mark items with specific properties, or create filterable keywords. The component supports conditional display with rule-based styling and text, making it ideal for representing different states in your application.

Properties

General Properties

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

Visual Properties

  • titleTranslations - Sets the text displayed within the tag with support for multiple languages. For example, {"en-US": "Complete", "de-DE": "Abgeschlossen"} ensures proper localization of tag text. The text can be static or dynamic based on the application's current language setting.

  • type - Determines the visual styling of the tag. Options include "default" (standard tag), "info" (informational), "success" (positive outcome), "warning" (caution required), "error" (problem or error state), or "neutral" (subdued styling). For example, setting type to "success" will display a green tag to indicate completion or approval.

  • rules - Configures conditional formatting rules that change the tag's text and appearance based on context data. For example, you can set a rule to display a "High Priority" tag with red styling when an urgency value equals "high". Each rule contains a field name, operator, threshold value, display text, and visual type (color scheme).

  • showCloseButton - Controls whether the tag displays a close icon. When set to true, the tag will show an "X" icon that can be clicked to trigger removal or dismissal actions. This is useful for tags that represent removable filters or dismissible status indicators.

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

Event Actions Properties

  • events - Configures the events that the component can trigger and respond to:
    • ON_TAG_CLICK: Triggered when the tag is clicked. Can be used to trigger filtering, navigation, or other interactive behaviors based on the tag's value.
    • ON_INIT: Triggered when the tag component is initialized. Can be used to perform setup operations that need to happen when the tag first appears.
    • ON_DESTROY: Triggered when the tag 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 "confidentialContentPolicy" restricts the tag visibility to users with permissions to view potentially sensitive content classifications.

Visibility Properties

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

Testing Hooks Properties

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

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

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

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

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This tag shows the current status of the item", "de-DE": "Dieses Tag zeigt den aktuellen Status des Elements"} provides detailed context during guided tours.

  • No labels