Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Karma

(not verified)

Link to Figma: tba

Overview

  • The Dynamic SFM Karma Component displays a karma score in a circular gauge.
  • It retrieves the score from a configured data source.
  • The score is visualized as one of four levels: Poor, Fair, Good, and Excellent.
  • It is useful for showing performance metrics, health scores, or quality ratings.
  • The visual gauge makes the information engaging and easy to understand.

...

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

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Sizing & Layout

  • Keep the authoring environment clear by naming the instance with displayName; this does not affect end-user layout but improves maintainability in the structure panel.

States & Feedback

  • The component surfaces state only through the four threshold levels; it does not expose focus/active/disabled tokens. Configure via poorKarmaThreshold, fairKarmaThreshold, goodKarmaThreshold, excellentKarmaThreshold.

Data-Driven / Conditional Behavior

  • Point to the numeric (or rank-like) source with statusField; verify it resolves in the fetched payload from getEntityCollectionDataSourceId.
  • Keep thresholds strictly increasing and non-overlapping using poorKarmaThreshold < fairKarmaThreshold < goodKarmaThreshold < excellentKarmaThreshold.
  • Ensure the realistic range is covered so every value classifies into exactly one band using the four threshold tokens.
  • Stabilize what data is shown by filtering at fetch time with getEntityCollectionHttpRequestParametersMap (e.g., current entity), rather than toggling thresholds at runtime.

Visibility & Authorization

  • Gate visibility to roles/policies with visibilityPolicySetId when the metric is sensitive.
  • Use displayConditions to show/hide the gauge based on state (e.g., data presence) without reconfiguring sources.

Content & Localization

  • For onboarding or contextual explanation, enable the gauge as a hotspot via enableAsHotspot and provide localized copy in guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • Use id and dataTestId to reference the instance consistently in docs, telemetry, and automated checks; keep displayName focused on internal clarity for authors.

Dos & Don’ts

DoDon’tArticle setting(s)
Define the data field explicitly so the gauge reads the intended value.Assume a default path in the payload.statusField, getEntityCollectionDataSourceId
Keep thresholds strictly increasing for unambiguous levels.Overlap or reorder thresholds (e.g., Fair ≥ Good).poorKarmaThreshold, fairKarmaThreshold, goodKarmaThreshold, excellentKarmaThreshold
Cover the full expected data range with four bands.Leave gaps so some values fall into no level.poorKarmaThreshold–excellentKarmaThreshold
Filter the fetch to the current context (entity/timeframe).Pull broad data and hope the UI “picks” the right value.getEntityCollectionHttpRequestParametersMap, getEntityCollectionDataSourceId
Hide the gauge when there’s no valid target.Show a gauge with stale/empty data.displayConditions
Restrict sensitive metrics to authorized viewers.Expose confidential scores to all users.visibilityPolicySetId
Provide concise, localized hotspot guidance when teaching the UI.Put critical instructions only in the hotspot.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription
Initialize/clean up on lifecycle events for predictable behavior.Leave listeners running after navigation/unmount.events.ON_INIT, events.ON_DESTROY

Accessibility

  • Localize instructional copy used for guided onboarding via guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • Restrict visibility of sensitive data with visibilityPolicySetId.
  • Avoid color-only meaning: when spotlighting the gauge, use concise, localized explanatory text configured via the hotspot fields (enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription).
  • Show the component only when the underlying value exists using displayConditions, reducing ambiguity for assistive-technology users.
  • Keep classification deterministic by maintaining strictly increasing thresholds using poorKarmaThreshold…excellentKarmaThreshold.