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

Pictogram

The Dynamic Pictogram Component is a visual element that displays predefined pictograms with customizable appearance. It supports conditional display logic that can change the pictogram based on data context. This component is ideal for creating visual indicators, status displays, or category markers within your application.

Properties

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.

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.

  • 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.

  • rules - Configures conditional display rules that change the pictogram based on context data. For example, you can set a rule to display the "policy" pictogram when a status equals "restricted" and a "permission" pictogram when it equals "allowed". Each rule contains a field name, operator, threshold value, pictogram name, and size.

  • 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.

Event Actions Properties

  • 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.

Authorization Properties

  • 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.

Visibility Properties

  • 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.

Testing Hooks Properties

  • 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.

  • No labels