- Salesforce is not allowed to retrieve the Premium Rates tab name and hide the row actions based on the active tab, but this isn’t feasible since Lightning Page Tabs don’t allow DOM access (restricted by Locker).
- As a workaround, we can hide all related list row actions or we are currently controlling the visibility based on the tab position (Premium Rates is currently the 7th tab). This allows us to hide the row actions only for Premium Rates. However, if the tab order changes, the LWC will need to be updated accordingly.
LWC Code:
<template>
<div class="css-injector"></div>
</template>
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const ACCOUNT_FIELDS = ['Account.Type__c'];
export default class Lwc_css_hide_custom extends LightningElement {
@api recordId;
@api objectApiName;
shouldHideElements = false;
styleElement = null;
@wire(getRecord, { recordId: '$recordId', fields: ACCOUNT_FIELDS })
wiredAccount({ error, data }) {
if (this.objectApiName !== 'Account') {
this.shouldHideElements = false;
this.injectCSS();
return;
}
if (data) {
const typeValue = data.fields.Type__c?.value;
console.log(`[lwc_css_hide_custom] Account.Type__c = ${typeValue}`);
this.shouldHideElements = typeValue === 'Agent';
console.log(`[lwc_css_hide_custom] shouldHideElements = ${this.shouldHideElements}`);
this.injectCSS();
} else if (error) {
console.error(`[lwc_css_hide_custom] Error retrieving Account.Type__c`, error);
this.shouldHideElements = false;
this.injectCSS();
}
}
connectedCallback() {
this.injectCSS();
}
disconnectedCallback() {
// Clean up injected styles when component is destroyed
if (this.styleElement && this.styleElement.parentNode) {
this.styleElement.parentNode.removeChild(this.styleElement);
}
if (this.premiumRatesStyleElement && this.premiumRatesStyleElement.parentNode) {
this.premiumRatesStyleElement.parentNode.removeChild(this.premiumRatesStyleElement);
}
}
injectCSS() {
// Remove existing style element
if (this.styleElement && this.styleElement.parentNode) {
this.styleElement.parentNode.removeChild(this.styleElement);
}
// Create new style element
this.styleElement = document.createElement('style');
this.styleElement.setAttribute('data-lwc-css-injector', 'true');
if (this.shouldHideElements) {
this.styleElement.textContent = `
.slds-button_icon-x-small,
.slds-button--icon-x-small,
lightning-button-icon[size="x-small"],
.slds-button_icon.slds-button_icon-x-small {
display: none !important;
}
`;
console.log('[lwc_css_hide_custom] Injected CSS to HIDE elements');
} else {
this.styleElement.textContent = `
.slds-button_icon-x-small,
.slds-button--icon-x-small,
lightning-button-icon[size="x-small"],
.slds-button_icon.slds-button_icon-x-small {
display: initial !important;
}
`;
console.log('[lwc_css_hide_custom] Injected CSS to SHOW elements');
}
// (OR) hide the row action based on tab number
//this.styleElement.textContent = `#tab-7 > slot > flexipage-component2:nth-child(2) > slot > lst-dynamic-related-list > article > laf-progressive-container > slot > lst-dynamic-related-list-with-resolved-fields > lst-dynamic-related-list-with-user-prefs > lst-related-list-view-manager > lst-common-list-internal > div > div > lst-primary-display-manager > div > lst-primary-display > lst-primary-display-grid > lightning-datatable > div.dt-outer-container > div > div > table > tbody > tr > td:nth-child(12) > lightning-primitive-cell-factory > span > div > lightning-primitive-custom-cell{display:none;}`
// Inject into document head
document.head.appendChild(this.styleElement);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>60.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>