Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adjustments and new functionality for TAG Related List #2128

Merged
merged 2 commits into from
Mar 20, 2025
Merged

adjustments and new functionality for TAG Related List #2128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99926f6
adjustments and new functionality for TAG Related List
piszosta Mar 20, 2025
78c8e0b
Merge branch 'main' into relatedListRows
piszosta Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.25rem 0.5rem;
padding: 0.25rem 1rem;
}

.chevronIcon {
Expand Down Expand Up @@ -36,3 +36,27 @@
height: 2rem;
padding: 0 0.5rem;
}

/* Inactive row styling: light grey background and grey text */
.inactiveRow {
background-color: #f4f6f9 !important;
color: #7e7e7e !important;
}

/* Also force text inside inactive rows to appear grey */
.inactiveRow .slds-truncate {
color: #7e7e7e;
}

.slds-table thead tr > th:first-child,
.slds-table tbody tr > td:first-child {
padding-left: 1rem !important;
}

.slds-popover_medium .slds-popover__header {
background-color: #f3f2f2; /* Slight grey for the header */
border-bottom: 1px solid #dddbda;
}
.slds-popover_medium .slds-popover__body {
padding: 1rem;
}
32 changes: 25 additions & 7 deletions force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,8 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
</thead>
<tbody>
<template for:each={displayedRecords} for:item="record" for:index="rowIndex">
<!-- For clickable rows, added mouse event handlers for popover -->
<template if:true={clickableRows}>
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class="slds-hint-parent" onclick={handleRowClick} style="cursor: pointer"
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class={record.rowClass} onclick={handleRowClick} style="cursor: pointer"
onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
<template for:each={record.recordFields} for:item="field">
<td key={field.label}>
Expand All @@ -53,9 +52,8 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
</template>
</tr>
</template>
<!-- For non-clickable rows, also added mouse event handlers for popover -->
<template if:false={clickableRows}>
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class="slds-hint-parent"
<tr key={record.Id} data-record-id={record.Id} data-value={rowIndex} class={record.rowClass}
onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
<template for:each={record.recordFields} for:item="field">
<td key={field.label}>
Expand All @@ -70,12 +68,32 @@ <h1 class="headerTitle slds-text-heading_small">{cardTitle}</h1>
</div>
</template>

<!-- Popover Template for additional record details -->
<template if:true={showPopover}>
<div class="slds-popover slds-nubbin_top" style={popoverStyle} onmouseleave={handleMouseLeave}>
<div
class="slds-popover slds-nubbin_top slds-popover_medium"
style={popoverStyle}
role="dialog"
onmouseenter={handlePopoverEnter}
onmouseleave={handleMouseLeave}
>
<!-- Popover Header -->
<div class="slds-popover__header">
<div class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<lightning-icon icon-name={icon} size="small"></lightning-icon>
</div>
<div class="slds-media__body">
<h2 id="popover-heading" class="slds-text-heading_small slds-hyphenate">
{popoverTitle}
</h2>
</div>
</div>
</div>

<!-- Popover Body -->
<div class="slds-popover__body">
<template for:each={popoverFieldValues} for:item="fieldObj">
<p key={fieldObj.apiName}>
<p key={fieldObj.apiName} class="slds-truncate">
<strong>{fieldObj.apiName}:</strong> {fieldObj.value}
</p>
</template>
Expand Down
91 changes: 71 additions & 20 deletions force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import { getRecord } from 'lightning/uiRecordApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

export default class TagRelatedList extends NavigationMixin(LightningElement) {

hoverTimer;
hideTimer;

@api recordId;
@api objectApiName;
@api listTitle; // Title of the list.
Expand All @@ -24,14 +28,13 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
@api popoverFields; //Popover additional fields (comma separated)
@api showNewRecordButton;
@api newRecordButtonLabel; // Button label for New Record button

@api inactiveRecordFilter; // Example: "Active__c = false"

@track relatedRecords;
@track isExpanded = false; // Accordion state

@track popoverRecordData; // Holds the record data for the hovered row
@track showPopover = false; // Flag to conditionally display popover
hoverTimer; // Timer for delayed popover display
@track popoverPosition = { top: 0, left: 0 };

connectedCallback() {
Expand All @@ -48,7 +51,6 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
if (data && this.dynamicUpdate === true) {
this.getList();
} else if (error) {
// Handle error accordingly
}
}

Expand Down Expand Up @@ -126,6 +128,15 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
get listRecords() {
let returnRecords = [];
if (this.relatedRecords) {
// Parse the inactive filter if provided
let filterField = null;
let filterValue = null;
if (this.inactiveRecordFilter && this.inactiveRecordFilter.includes('=')) {
let parts = this.inactiveRecordFilter.split('=');
filterField = parts[0].trim();
filterValue = parts[1].trim().toLowerCase();
}

this.relatedRecords.forEach((dataRecord) => {
let recordFields = [];
this.displayedFieldList.forEach((key) => {
Expand All @@ -136,11 +147,34 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
});
}
});
returnRecords.push({ recordFields: recordFields, Id: dataRecord.Id });

// Determine if the record is inactive
let isInactive = false;
if (filterField && filterValue !== null) {
let fieldVal = this.resolve(filterField, dataRecord);
// Convert the field value to string (if boolean, true/false will be 'true'/'false')
if (fieldVal !== null && String(fieldVal).toLowerCase() === filterValue) {
isInactive = true;
}
}

// Set rowClass based on whether the record is inactive.
let rowClass = 'slds-hint-parent';
if (isInactive) {
rowClass += ' inactiveRow';
}

returnRecords.push({
recordFields: recordFields,
Id: dataRecord.Id,
isInactive: isInactive,
rowClass: rowClass
});
});
}
return returnRecords;
}


// Build the card title with record count
get cardTitle() {
Expand Down Expand Up @@ -170,11 +204,10 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
return labels.map((label, index, arr) => {
// Base style for every header cell.
let style = 'vertical-align: middle; text-align: left; padding: 4px 8px;';
// Remove extra left padding for the first cell.
// Padding for the first cell.
if (index === 0) {
style += 'padding-left: 5px;';
style += 'padding-left: 1rem;';
}
// Remove extra right padding for the last cell.
if (index === arr.length - 1) {
style += 'padding-right: 0px;';
}
Expand All @@ -185,14 +218,19 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
});
}

// Parse and combine the displayed fields and popoverFields strings into an array
get apexFieldList() {
// Get displayedFields (if any)
// Get fields from displayedFields and popoverFields
let displayed = this.displayedFields ? this.displayedFields.replace(/\s/g, '').split(',') : [];
// Get popoverFields (if any)
let popover = this.popoverFields ? this.popoverFields.replace(/\s/g, '').split(',') : [];
// Combine them and remove duplicates
let combined = Array.from(new Set([...displayed, ...popover]));

// extract the field name and add it to the list if not already present.
if (this.inactiveRecordFilter && this.inactiveRecordFilter.includes('=')) {
let filterField = this.inactiveRecordFilter.split('=')[0].trim();
if (!combined.includes(filterField)) {
combined.push(filterField);
}
}
return combined;
}

Expand All @@ -218,25 +256,29 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
}, obj || {});
}

// Event handler for mouse enter on a record row
handleMouseEnter(event) {
const recordId = event.currentTarget.dataset.recordId;
const rect = event.currentTarget.getBoundingClientRect();
// Adjusting the position slightly (you can fine‑tune the offsets)
this.popoverPosition = {
top: rect.top + 10,
left: rect.left + 10
top: rect.top + 2,
left: rect.left + 2
};
this.hoverTimer = window.setTimeout(() => {
this.popoverRecordData = this.relatedRecords.find(rec => rec.Id === recordId);
this.showPopover = true;
}, 1500);
}, 1000);
}

// Event handler for mouse leave from a record row (or popover)
handleMouseLeave() {
window.clearTimeout(this.hoverTimer);
this.showPopover = false;
this.hideTimer = window.setTimeout(() => {
this.showPopover = false;
}, 200); // Delay closing popover to allow mouse movement
}

handlePopoverEnter() {
// Prevent hiding when entering the popover
window.clearTimeout(this.hideTimer);
}

// Getter to combine displayedFields with additional popoverFields
Expand All @@ -246,7 +288,6 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {

// Getter to prepare an array of objects with localized field labels and values from the hovered record
get popoverFieldValues() {
// Ensure we have the record data and the object metadata
if (!this.popoverRecordData || !this.objectInfo.data) {
return [];
}
Expand Down Expand Up @@ -275,7 +316,17 @@ export default class TagRelatedList extends NavigationMixin(LightningElement) {
top: ${relativeTop + 20}px;
left: ${relativeLeft}px;
z-index: 1000;
transform: translate(-50%, 0);`;
transform: translate(0, 0);`;
}
return '';
}

get popoverTitle() {
if (this.popoverRecordData && this.displayedFieldList && this.displayedFieldList.length > 0 && this.objectInfo.data) {
// Get the first field's API name from the displayedFields array
let firstFieldApiName = this.displayedFieldList[0];
let fieldValue = this.resolve(firstFieldApiName, this.popoverRecordData);
return `${fieldValue}`;
}
return '';
}
Expand Down
8 changes: 8 additions & 0 deletions force-app/components/relatedList/lwc/tagRelatedList/tagRelatedList.js-meta.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,14 @@
type="String"
default=""
/>
<property
name="inactiveRecordFilter"
label="Inactive Record Filter"
description="Enter a SOQL condition (e.g., Active__c = false). Records meeting this condition will be styled as inactive."
type="String"
default=""
/>

</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Loading