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

Karma

The Dynamic SFM Karma Component is a visual indicator that displays a karma score in a circular gauge. It fetches data from a configured data source and visualizes the score as one of four status levels: Poor, Fair, Good, and Excellent. The component is ideal for displaying performance metrics, health scores, or quality ratings in an engaging and easily understood format.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Customer Satisfaction Score" allows for easy identification of the component's purpose in the component structure.

Datasource Properties

• getEntityCollectionDataSourceId - Specifies the data source ID for retrieving the karma data. For example, "api/customer-satisfaction" connects the component to an API endpoint that provides the karma score data.

• getEntityCollectionHttpRequestParametersMap - Configures HTTP parameters for fetching karma data. This object maps additional parameters needed for the data request, allowing for dynamic filtering of karma data based on context. For example, {"QUERY": {"customerId": "{{context.customerId}}"}} would filter results for a specific customer.

• statusField - Defines which field in the response contains the karma value. For example, setting this to "satisfactionScore" will use the value from this field to determine which karma level to display.

• poorKarmaThreshold - Sets the threshold value that represents a "Poor" karma level. Values equal to or below this threshold will show as Poor. For example, setting this to "20" means scores of 20 or less will display as Poor karma.

• fairKarmaThreshold - Sets the threshold value that represents a "Fair" karma level. Values above poorKarmaThreshold and up to this value will show as Fair. For example, setting this to "50" means scores between 21 and 50 will display as Fair karma.

• goodKarmaThreshold - Sets the threshold value that represents a "Good" karma level. Values above fairKarmaThreshold and up to this value will show as Good. For example, setting this to "70" means scores between 51 and 70 will display as Good karma.

• excellentKarmaThreshold - Sets the threshold value that represents an "Excellent" karma level. Values above goodKarmaThreshold and up to this value will show as Excellent. For example, setting this to "90" means scores between 71 and 90 will display as Excellent karma.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations.

Authorization Properties

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "customerServicePolicySet" restricts the karma display to users with customer service privileges.

Visibility Properties

• displayConditions - Defines conditions for displaying the component. This allows the karma component to be shown or hidden based on dynamic conditions, such as user role, application state, or other contextual factors.

Testing Hooks Properties

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

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "customer-karma-gauge" allows test scripts to reliably locate this component.

• enableAsHotspot - Enables the karma component as a guided tour hotspot. When enabled, the karma gauge can be highlighted during guided tours to draw user attention to important metrics.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot with support for multiple languages. For example, {"en-US": "Customer Satisfaction Score", "de-DE": "Kundenzufriedenheitswert"} provides localized titles when the karma gauge is highlighted during a guided tour.

• guidedTourHotSpotDescription - Sets the description text for the guided tour hotspot with language support. For example, {"en-US": "This gauge shows the overall satisfaction rating from customer feedback", "de-DE": "Diese Anzeige zeigt die Gesamtzufriedenheitsbewertung aus dem Kundenfeedback"} provides detailed explanations during guided tours.