(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Pictogram
Overview
- The Dynamic Pictogram Component is a visual element that displays predefined pictograms.
- It supports conditional display logic that adapts the pictogram based on data context.
- The component is useful for visual indicators, status displays, or category markers.
- Appearance such as size and spacing can be customized for layout flexibility.
Specs
Tokens
| Token |
Description |
| displayName |
Display name of the component in the structure panel |
| name |
Specifies which pictogram to display from a predefined set |
| size |
Sets the size of the pictogram (xs, sm, md, lg, xl) |
| widthAuto |
Controls automatic width adjustment of the pictogram container |
| rules |
Defines conditional display rules based on context data |
| paddingClass |
Configures spacing around the pictogram using CSS classes |
| events |
Configurable component events |
| ON_INIT (Events) |
Event triggered when the component is initialized |
| ON_DESTROY (Events) |
Event triggered when the component is removed from the DOM |
| visibilityPolicySetId |
Determines component visibility based on policy sets |
| displayConditions |
Defines conditions for showing or hiding the component |
| id |
Unique identifier for programmatic access |
| dataTestId |
Identifier for automated testing |
| enableAsHotspot |
Enables component as a guided tour hotspot |
| guidedTourHotSpotTitle |
Sets translated title for guided tour hotspot |
| guidedTourHotSpotDescription |
Sets translated description for guided tour hotspot |
Structure
(Configured in General Properties)
- displayName - Sets the display name of the component shown in the structure panel. For example, "Status Pictogram" allows for easy identification of the pictogram's purpose in the component structure, making it easier for developers to locate and work with this specific component.
(Configured in Visual Properties)
- name - Specifies which pictogram to display from the available predefined set. Options include 'boardlet', 'dashboard', 'database', 'dialog', 'menu', 'permission', 'policy', and several others. For example, selecting "dashboard" displays a dashboard-themed pictogram that can represent analytics or reporting features.
(Configured in Visibility)
- displayConditions - Defines conditions for displaying the component. This allows showing or hiding the pictogram based on complex rules involving other form values, user roles, or application state. For example, the pictogram might only be shown when related data meets certain criteria.
Styling
(Configured in Visual Properties)
- size - Sets the size of the pictogram. Options include 'xs', 'sm', 'md', 'lg', and 'xl'. For example, setting size to "md" creates a medium-sized pictogram that's suitable for inline usage within content areas, while "xl" creates a large pictogram that can serve as a focal point.
- widthAuto - Controls whether the pictogram container automatically adjusts its width to fit the content. When set to true, the pictogram container will be only as wide as necessary; when false, it will follow fixed layout rules. This is useful for controlling alignment within complex layouts.
- paddingClass - Configures spacing around the pictogram using CSS classes. For example, "p-2" adds light padding on all sides of the pictogram, improving its visual spacing within its container.
Actions & Variants
(Configured in Events)
- events - Configures the events that the component can trigger and respond to:
- ON_INIT - Triggered when the pictogram component is initialized. Can be used to perform setup operations when the component first appears.
- ON_DESTROY - Triggered when the pictogram component is removed from the DOM. Useful for cleanup operations and releasing resources.
Testing
(Configured in Testing Hooks)
- id - Specifies a unique identifier for the component used for programmatic access. For example, "statusPictogram" enables targeted manipulation of this specific pictogram through scripts or automated tests.
- dataTestId - Sets the testing hook ID for automated testing. For example, setting to "status-pictogram" allows test scripts to reliably locate this component during automated testing.
- enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the pictogram 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 Indicator", "de-DE": "Statusanzeige"} provides clear identification during guided tours.
- guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This icon shows the current approval status", "de-DE": "Dieses Symbol zeigt den aktuellen Genehmigungsstatus"} provides detailed context during guided tours.
Authorization
(Configured in Authorization)
- visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "contentVisibilityPolicy" restricts the pictogram visibility to users with specific content access permissions, allowing for role-based display of visual indicators.
Guidelines
[NO DATA AVAILABLE]
Accessibility
[NO DATA AVAILABLE]