Zenn
📖

Salesforceの標準画面にスタイル(css)のへ変更・追加方法

2025/03/02に公開
Salesforce
tech

概要

外部ユーザ向けのExperienceCloudはcssの追加がサポートされています。
内部ユーザ向けのSalesforceはcssの追加がサポートされていません。

内部ユーザ向けの普通のSalesforceにも、lwcを使用することでスタイル(css)を変更・追加可能です。

lwcの機能を悪用したもので、実際のプロダクトでは行うべきではない。(と思う)

例

標準機能の項目のヘルプテキストのツールチップは改行がサポートされていません。
https://ideas.salesforce.com/s/idea/a0B8W00000GdX2qUAF/allow-line-breaks-in-help-texttooltips
スタイル(css)を追加で改行できます。

項目のヘルプテキストのツールチップをcss追加により改行する

設定後

取引先のActiveカスタム胃項目のヘルプテキストを改行

スタイルを適用後の標準画面のヘルプテキストのツールチップ

設定方法

  1. 標準画面に追加するスタイル(css)を静的リソースに追加する
    「helpTextBreak_css」静的リソース
lightning-primitive-bubble > .slds-popover > .slds-popover__body {
    white-space: pre-wrap;
}
  1. loadStyleでcssの追加を行うlwcを追加
    「helpTextBreak」コンポーネント

helpTextBreak.js

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import helpTextBreak_css from '@salesforce/resourceUrl/helpTextBreak_css';

export default class HelpTextBreak extends LightningElement {
    isLoadStyle = false;
    renderedCallback() {
        if (this.isLoadStyle) {
            return;
        }
        this.isLoadStyle = true;
        loadStyle(this, helpTextBreak_css);
    }
}

helpTextBreak.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
          </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
  1. 取引先のレコードページにコンポーネントを追加する

Discussion