Skip to content

Commit

Permalink
Stable draft of Indicator Badges
Browse files Browse the repository at this point in the history
  • Loading branch information
tschug committed Nov 21, 2024
1 parent da22ef1 commit b05c0d8
Show file tree
Hide file tree
Showing 16 changed files with 281 additions and 20 deletions.
10 changes: 8 additions & 2 deletions force-app/main/default/classes/Cmdt.cls
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,11 @@ public with sharing class Cmdt {
Icon_Foreground__c,
Inverse_Icon_Background__c,
Inverse_Icon_Foreground__c,
Description__c
Description__c,
Badge_Text_Color__c,
Badge_Icon_Position__c,
Inverse_Badge_Text_Color__c,
Inverse_Badge_Icon_Position__c
FROM Indicator_Item__mdt
// WHERE Active__c = TRUE
]){
Expand Down Expand Up @@ -85,7 +89,9 @@ public with sharing class Cmdt {
Static_Text__c,
Icon_Background__c,
Icon_Foreground__c,
Description__c
Description__c,
Badge_Text_Color__c,
Badge_Icon_Position__c
FROM Indicator_Item_Extension__mdt
// WHERE Active__c = TRUE
// AND Indicator_Item__r.Active__c = TRUE
Expand Down
25 changes: 24 additions & 1 deletion force-app/main/default/classes/IndicatorController.cls
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,14 @@ public with sharing class IndicatorController {
public String InverseBackgroundColor {get; set;}
@AuraEnabled
public String InverseForegroundColor {get; set;}
@AuraEnabled
public String BadgeTextColor {get; set;}
@AuraEnabled
public String BadgeIconPosition {get; set;}
@AuraEnabled
public String FalseBadgeTextColor {get; set;}
@AuraEnabled
public String FalseBadgeIconPosition {get; set;}
}

public class IndicatorExtension {
Expand Down Expand Up @@ -115,6 +123,10 @@ public with sharing class IndicatorController {
public String BackgroundColor {get; set;}
@AuraEnabled
public String ForegroundColor {get; set;}
@AuraEnabled
public String BadgeTextColor {get; set;}
@AuraEnabled
public String BadgeIconPosition {get; set;}
}

@AuraEnabled
Expand Down Expand Up @@ -206,6 +218,10 @@ public with sharing class IndicatorController {
item.ForegroundColor = indicatorItem.Icon_Foreground__c;
item.InverseBackgroundColor = indicatorItem.Inverse_Icon_Background__c;
item.InverseForegroundColor = indicatorItem.Inverse_Icon_Foreground__c;
item.BadgeTextColor = indicatorItem.Badge_Text_Color__c;
item.BadgeIconPosition = indicatorItem.Badge_Icon_Position__c;
item.FalseBadgeTextColor = indicatorItem.Inverse_Badge_Text_Color__c;
item.FalseBadgeIconPosition = indicatorItem.Inverse_Badge_Icon_Position__c;

List<Indicator_Item_Extension__mdt> itemExtensions = Cmdt.getExtensionsForItem(indicatorItem.DeveloperName);

Expand All @@ -229,7 +245,8 @@ public with sharing class IndicatorController {
extension.ExtensionId = itemExtension.Id;
extension.BackgroundColor = itemExtension.Icon_Background__c;
extension.ForegroundColor = itemExtension.Icon_Foreground__c;

extension.BadgeTextColor = itemExtension.Badge_Text_Color__c;
extension.BadgeIconPosition = itemExtension.Badge_Icon_Position__c;
item.Extensions.add(extension);
}

Expand Down Expand Up @@ -306,6 +323,10 @@ public with sharing class IndicatorController {
item.ForegroundColor = indicatorItem.Icon_Foreground__c;
item.InverseBackgroundColor = indicatorItem.Inverse_Icon_Background__c;
item.InverseForegroundColor = indicatorItem.Inverse_Icon_Foreground__c;
item.BadgeTextColor = indicatorItem.Badge_Text_Color__c;
item.BadgeIconPosition = indicatorItem.Badge_Icon_Position__c;
item.FalseBadgeTextColor = indicatorItem.Inverse_Badge_Text_Color__c;
item.FalseBadgeIconPosition = indicatorItem.Inverse_Badge_Icon_Position__c;

List<Indicator_Item_Extension__mdt> itemExtensions = Cmdt.getExtensionsForItem(indicatorItem.DeveloperName);

Expand All @@ -329,6 +350,8 @@ public with sharing class IndicatorController {
extension.ExtensionId = itemExtension.Id;
extension.BackgroundColor = itemExtension.Icon_Background__c;
extension.ForegroundColor = itemExtension.Icon_Foreground__c;
extension.BadgeTextColor = itemExtension.Badge_Text_Color__c;
extension.BadgeIconPosition = itemExtension.Badge_Icon_Position__c;

item.Extensions.add(extension);
}
Expand Down
38 changes: 28 additions & 10 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,32 @@ <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
<div class="slds-var-m-left_medium slds-clearfix">
<template if:true={results}>
<template for:each={results} for:item="fld">
<c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fTextShown}
ind-size={indsSize}
ind-shape={indsShape}
ind-hover-text={fld.fHoverValue}
ind-icon={fld.fIconName}
ind-image={fld.fImageURL}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
<template lwc:if={showAvatarStyle}>
<c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fTextShown}
ind-size={indsSize}
ind-shape={indsShape}
ind-hover-text={fld.fHoverValue}
ind-icon={fld.fIconName}
ind-image={fld.fImageURL}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
>
</c-indicator-bundle-item>
</template>
<template lwc:if={showBadgeStyle}>
<c-indicator-bundle-badge if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fHoverValue}

ind-icon={fld.fIconName}
ind-icon-position={fld.fIconPosition}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
ind-text-color={fld.fTextColor}
>
</c-indicator-bundle-item>
<!-- ind-hover-text={fld.fHoverValue} -->
</c-indicator-bundle-badge>
</template>
</template>
</template>
</div>
Expand Down Expand Up @@ -92,6 +107,9 @@ <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
</div>
</div>
</div>
<!-- <template if:true={results}>
</template> -->
<template lwc:if={displayFooter}>
<footer class="slds-card__footer">
<lightning-badge label={mappedField}></lightning-badge>
Expand Down
27 changes: 23 additions & 4 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default class IndicatorBundle extends LightningElement {
@api showDescription;
@api showTitle;
@api titleStyle = 'Lightning Card';
@api indsStyle = 'avatar';
@api indsSize = 'large';
@api indsShape = 'base';
@api showRefresh = false;
Expand Down Expand Up @@ -133,7 +134,7 @@ export default class IndicatorBundle extends LightningElement {
const { data, error } = result;
if(data) {
if(Object.keys(data).length) { // Used to confirm that values were returned, rather than an empty object
// console.dir(data); // Retain for debug purposes
console.dir(data); // Retain for debug purposes

this.bundle = data;
this.bundleActive = true;
Expand Down Expand Up @@ -237,7 +238,7 @@ export default class IndicatorBundle extends LightningElement {
let anyMatch = false;
if(item.IsActive){

// console.dir(item); // Retain for debug purposes
console.dir(item); // Retain for debug purposes

let dataField = this.objectApiName + "." + item.FieldApiName;
// console.log('DataField',dataField); // Retain for debug purposes
Expand Down Expand Up @@ -388,6 +389,16 @@ export default class IndicatorBundle extends LightningElement {
} : {
fIconForeground: item.DisplayFalse? item.InverseForegroundColor : item.ForegroundColor
},
...dataValue || dataValue === 0 ? {
fTextColor : matchedExtension ? matchedExtension.BadgeTextColor : item.BadgeTextColor
} : {
fTextColor: item.DisplayFalse? item.FalseBadgeTextColor : item.BadgeTextColor
},
...dataValue || dataValue === 0 ? {
fIconPosition : matchedExtension ? matchedExtension.BadgeIconPosition : item.BadgeIconPosition
} : {
fIconPosition: item.DisplayFalse? item.FalseBadgeIconPosition : item.BadgeIconPosition
},
//If the False Icon and False Text is entered and the Boolean is False or text value is empty, then set the False Text
//If the Icon Text is entered then show that
//If no Icon Text is entered if the field is a Boolean then show the icon otherwise show the field value
Expand All @@ -396,7 +407,7 @@ export default class IndicatorBundle extends LightningElement {
fTextShown: matchedExtension.TextValue ? matchedExtension.TextValue.substring(0,3) : ''
} : {
...dataValue && item.TextValue ? {
fTextShown : item.TextValue.substring(0,3)
fTextShown : this.indsStyle === 'avatar' ? item.TextValue.substring(0,3) : item.TextValue
} : {
...item.EmptyStaticBehavior === 'Use Icon Only' ? {
fTextShown : ''
Expand All @@ -407,7 +418,7 @@ export default class IndicatorBundle extends LightningElement {
}
} : {
...(dataValue === false || dataValue === null || dataValue === '') && item.DisplayFalse ? {
fTextShown : item.FalseTextValue ? item.FalseTextValue.substring(0,3) : ''
fTextShown : item.FalseTextValue ? this.indsStyle === 'avatar' ? item.FalseTextValue.substring(0,3) : item.FalseTextValue : ''
} : {
fTextShown : ''
}
Expand Down Expand Up @@ -440,4 +451,12 @@ export default class IndicatorBundle extends LightningElement {
console.log(result);
}

get showAvatarStyle(){
return this.indsStyle === 'avatar';
}

get showBadgeStyle(){
return this.indsStyle === 'badge';
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://inds.IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
<property name="bundleName" type="String" label="Indicator Bundle" datasource="apex://IndicatorListBundleSelector" description="Choose the Indicator Bundle."/>
<property name="titleStyle" type="String" label="Title Style" placeholder="Lightning Card" datasource="Lightning Card,Dynamic Forms" description="Choose the Title Style: Standard Lightning Card or a style to match Dynamic Forms."/>
<property name="showTitle" type="Boolean" default="true" label="Display Title" description="Display the Indicator's Title on the component."/>
<property name="showDescription" type="Boolean" default="true" label="Display Description" description="Display the Indicator's Description on the component."/>
<property name="indsSize" type="String" label="Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>
<property name="indsShape" type="String" label="Indicator Shape" placeholder="base" datasource="base,circle" description="Choose the Indicator Shape."/>
<property name="indsStyle" type="String" label="Indicator Style" placeholder="avatar" datasource="avatar,badge" description="Choose the Indicators Style."/>
<property name="indsSize" type="String" label="Avatar Indicator Size" placeholder="large" datasource="large,medium" description="Choose the Indicator Size."/>
<property name="indsShape" type="String" label="Avatar Indicator Shape" placeholder="base" datasource="base,circle" description="Choose the Indicator Shape."/>
<property name="showRefresh" type="Boolean" label="Show refresh button" description="Enable an admin button to refresh the values."/>
<property name="mappedField" type="String" label="(Optional) Mapped Id Field" description="(Optional) Instead of using the current Record Id, provide the API Name of a field (Case Sensitive) on this object which holds a Record Id or Relationship Id to use that value." placeholder="Example: Source_Id__c, ParentId, or AccountId" />
<property name="showFooter" type="Boolean" label="Show footer when using Mapped Id Field" description="Enable a footer to show what mapped field is being used."/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { createElement } from 'lwc';
import IndicatorBundleBadge from 'c/indicatorBundleBadge';

describe('c-indicator-bundle-badge', () => {
afterEach(() => {
// The jsdom instance is shared across test cases in a single file so reset the DOM
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});

it('TODO: test case generated by CLI command, please fill in test logic', () => {
// Arrange
const element = createElement('c-indicator-bundle-badge', {
is: IndicatorBundleBadge
});

// Act
document.body.appendChild(element);

// Assert
// const div = element.shadowRoot.querySelector('div');
expect(1).toBe(1);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.indicatorBadge {
--slds-c-badge-color-background: var(--backgroundColor);
--slds-c-badge-icon-color-foreground: var(--foregroundColor);
--slds-c-badge-text-color: var(--textColor);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<div class="slds-var-m-bottom_x-small slds-float_left">
<lightning-badge
label={indText}
icon-name={indIcon}
icon-alternative-text={indHoverText}
icon-position={indIconPosition}
class={indClass}>
</lightning-badge>
</div>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { LightningElement, api } from 'lwc';

export default class IndicatorBundleBadge extends LightningElement {

@api indText = '';
@api indIcon = 'standard:marketing_actions';
@api indHoverText = '';
@api indIconPosition = 'start';
@api indBackgroundColor;
@api indForegroundColor;
@api indTextColor;

get indClass() {
let classValue = '';
if(this.indBackgroundColor || this.indForegroundColor || this.indTextColor){
classValue = 'indicatorBadge ';
}

return classValue;
}

renderedCallback() {
this.initCSSVariables();
}

initCSSVariables() {

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);
}

}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>62.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
<fullName>Badge_Icon_Position__c</fullName>
<externalId>false</externalId>
<fieldManageability>SubscriberControlled</fieldManageability>
<label>Badge Icon Position</label>
<required>false</required>
<type>Picklist</type>
<valueSet>
<restricted>true</restricted>
<valueSetDefinition>
<sorted>false</sorted>
<value>
<fullName>start</fullName>
<default>false</default>
<label>Start</label>
</value>
<value>
<fullName>end</fullName>
<default>false</default>
<label>End</label>
</value>
</valueSetDefinition>
</valueSet>
</CustomField>
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
<fullName>Badge_Text_Color__c</fullName>
<externalId>false</externalId>
<fieldManageability>SubscriberControlled</fieldManageability>
<inlineHelpText></inlineHelpText>
<label>Bdage Text Color</label>
<length>255</length>
<required>false</required>
<type>Text</type>
<unique>false</unique>
</CustomField>
Loading

0 comments on commit b05c0d8

Please sign in to comment.