Supported Extensions with Badges

SFDO-Community · Nov 23, 2024 · 2cca75f · 2cca75f
1 parent b05c0d8
commit 2cca75f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -317,7 +317,9 @@ export default class IndicatorBundle extends LightningElement {
                                                 "HoverValue" : extension.ExtensionHoverText,
                                                 "Priority" : extension.PriorityOrder,
                                                 "IconBackground" : extension.BackgroundColor,
-                                                "IconForeground" : extension.ForegroundColor
+                                                "IconForeground" : extension.ForegroundColor,
+                                                "BadgeTextColor" : extension.BadgeTextColor,
+                                                "BadgeIconPosition" : extension.BadgeIconPosition
                                             };
 
                                             // However, if multiple matching is enabled, immediately assign the Extension for use in the Bundle.
@@ -328,12 +330,14 @@ export default class IndicatorBundle extends LightningElement {
                                                         fName: item.FieldApiName,
                                                         fTextValue: dataValue,
                                                         fImageURL: matchedExtension.ImageUrl,
-                                                        fHoverValue: (matchedExtension && matchedExtension.HoverValue) ? matchedExtension.HoverValue : assignedHoverValue,
+                                                        fHoverValue: (matchedExtension && matchedExtension.HoverValue) ? matchedExtension.HoverValue : dataValue,
                                                         fShowAvatar: true,
                                                         fIconName : matchedExtension.IconName,
                                                         fIconBackground : matchedExtension.IconBackground,
                                                         fIconForeground : matchedExtension.IconForeground,
-                                                        fTextShown: matchedExtension.TextValue
+                                                        fTextShown: matchedExtension.TextValue,
+                                                        fTextColor: matchedExtension.BadgeTextColor,
+                                                        fIconPosition: matchedExtension.BadgeIconPosition
                                                     }
                                                 );
                                             }
@@ -363,7 +367,7 @@ export default class IndicatorBundle extends LightningElement {
                                     },
                                 // ! If value is false, the false hover will be set.
                                 ...dataValue || dataValue === 0 ? {
-                                        fHoverValue: (matchedExtension && matchedExtension.HoverValue) ? matchedExtension.HoverValue : assignedHoverValue
+                                        fHoverValue: (matchedExtension && matchedExtension.HoverValue) ? matchedExtension.HoverValue : dataValue
                                     } : {
                                         fHoverValue: item.DisplayFalse ? item.FalseHoverValue : ''
                                     },

diff --git a/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js b/force-app/main/default/lwc/indicatorBundleBadge/indicatorBundleBadge.js
@@ -27,10 +27,10 @@ export default class IndicatorBundleBadge extends LightningElement {
 
         if(this.indBackgroundColor || this.indForegroundColor || this.indTextColor){
             var css = this.template.querySelector(".indicatorBadge").style;
-    
-            css.setProperty('--backgroundColor', this.indBackgroundColor);
-            css.setProperty('--foregroundColor', this.indForegroundColor);
-            css.setProperty('--textColor', this.indTextColor);
+
+            css.setProperty('--backgroundColor', this.indBackgroundColor ? this.indBackgroundColor : '#f3f3f3');
+            css.setProperty('--foregroundColor', this.indForegroundColor ? this.indForegroundColor : '#747474');
+            css.setProperty('--textColor', this.indTextColor ? this.indText : '#181818');
         }
 
     }