You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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

Example Pictogram

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.

Pictogram choices

(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]

  • No labels