LWCのトーストメッセージ改行方法

トーストメッセージとは

SalesForceの画面上にカンタンにメッセージを表示することが出来る便利機能。
LitningWebコンポーネントやAuraなどで使用出来る。

こんな感じで画面メッセージを表示可能。

※ 上記の例では、トーストのプロパティを下記の通り設定しています。
タイトル：レコードの登録に成功しました。
メッセージ：具体的な内容も出せます

参考：開発者ガイド
https://developer.salesforce.com/docs/platform/ja-jp/lwc/guide/use-toast.html

相関チェックのエラー、サーバエラーの内容を画面に表示してユーザに伝えたい場合に結構便利
ただし、普通に使うとメッセージの改行が出来ません。

長いメッセージを使用する場合や、複数のエラー内容を表示した場合に改行コードを埋め込んでも改行せずに出力されます。

（改行出来ない例）
ソース上では\nやらbrタグなどの改行コードを埋め込んでいますが、、、

new ShowToastEvent({
                    title: 'レコードの登録に成功しました。',
                    message: '1番目は\n高橋さん、<br>2番目は</br>田中さん\r\nです',
                    variant: 'success',
                }),

こんな感じで改行コードを埋め込んだだけだと上手く行きません。
今回はLWCからトーストメッセージ表示する時でも改行できるようにします。

手順

cssの作成
静的リソースの登録
javaScriptの記述

CSS作成

下記をコピペしてCSSファイルを作成して保存します。

span.toastMessage.forceActionsText{
	white-space: pre-line !important;
}

静的リソースを登録

設定＞カスタムコード＞静的リソース
※ 設定画面から「静的リソース」でクイック検索するとヒットします。

新規ボタンを押してCSSファイルを登録します。
こんな感じで登録しておきます。

JavaScriptに記述

インポート

import toastTest from '@salesforce/resourceUrl/ToastTest';
import { loadStyle } from 'lightning/platformResourceLoader';

※コピペしたのち、ToastTest は静的リソースで登録した名前に合わせて下さい

ロード

    renderedCallback() {
        if (this.isCssLoaded) return;
        this.isCssLoaded = true;
        loadStyle(this, toastTest)
            .then(() => {
                console.log('loaded');
            })
            .catch(() => {
                console.log('error to load');
            });
    }

※コピペでOK
console.logは消しても大丈夫です

結果

\nと\r\nが置換されるようになりました。

細かく言うと、半角スペースを置換するように指定しています。
（\nをトースト機能が半角スペースに置換したのち、静的リソースで登録したcssで半角スペースを改行扱いにするという流れです）

以上です。
これでより柔軟なメッセージを表示することが出来ると思います。
今回はLWCでしたが、Auraも同じ考え方で実装可能ですので、ぜひ試してみてください！