Salesforce:Lightning showToastイベント(e.force:showToast)のメモ（メッセージの改行など）

データ保存時にメッセージを表示するのに、showToastイベント(e.force:showToast)を使うことがあります。

showToastイベントについて調べたことの備忘メモです。

１．mode　(画面の表示の仕方)  は 3 種類

dismissible : ×クリックで消える。durationで指定した時間経過で消える。

sticky : ×クリックで消える。時間経過では消えない。

pester : ×クリックできない(表示がない)。durationで指定した時間経過で消える。

２．type (色やアイコン) は 5 種類

 : info

 : success

  : warning

 : error

  : other

３．一度に表示できるのは 3個 のメッセージ

連続してshowToastイベントを実行しても一度の画面表示は３つまでのようです。
同時に３つ以上実行しても、表示されているメッセージが消えてから次のメッセージを表示するという動きをします。

４．タイトルを指定すると、メッセージのフォントが小さくなる

５．メッセージを改行するには別途スタイルシートが必要

次のような改行区切りのメッセージをToastで表示しようとすると、うまく改行されません。
メッセージ内容：
 表示メッセージ１
 表示メッセージ２
 表示メッセージ３

画面表示： 

Toast内で改行する場合は、スタイルシートの指定が必要です。

１．次のスタイルシートを静的リソースに登録します。

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

２．Lightning Componentのcmpで、外部CSS リソースを読み込みます。

<ltng:require styles="{!$Resource.MultiLineToast}" />

 ※静的リソースには「MultiLineToast」として登録しました。

上記１，２を実施後の画面表示は次の通りとなります。

最後に

この調査をするにあたって作成したLightning Componentのサンプルは次になります。

cmp：

<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  <ltng:require styles="{!$Resource.MultiLineToast}" />
    
    <lightning:layout multipleRows="true">
        <lightning:layoutItem  size="4" padding="around-small" largeDeviceSize="4" smallDeviceSize="12">

    <lightning:card title="Toastイベントサンプル">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
              <th>#</th>
              <th>mode</th>
              <th>type</th>
              <th></th>
              
            </thead>
            <tbody>
                <tr><td>1</td><td>dismissible</td><td>info</td><td><lightning:button aura:id="dismissible info" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>2</td><td>dismissible</td><td>success</td><td><lightning:button aura:id="dismissible success" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>3</td><td>dismissible</td><td>warning</td><td><lightning:button aura:id="dismissible warning" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>4</td><td>dismissible</td><td>error</td><td><lightning:button aura:id="dismissible error" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>5</td><td>dismissible</td><td>other</td><td><lightning:button aura:id="dismissible other" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>

                <tr><td>6</td><td>sticky</td><td>info</td><td><lightning:button aura:id="sticky info" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>7</td><td>sticky</td><td>success</td><td><lightning:button aura:id="sticky success" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>8</td><td>sticky</td><td>warning</td><td><lightning:button aura:id="sticky warning" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>9</td><td>sticky</td><td>error</td><td><lightning:button aura:id="sticky error" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>10</td><td>sticky</td><td>other</td><td><lightning:button aura:id="sticky other" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>

                <tr><td>11</td><td>pester</td><td>info</td><td><lightning:button aura:id="pester info" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>12</td><td>pester</td><td>success</td><td><lightning:button aura:id="pester success" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>13</td><td>pester</td><td>warning</td><td><lightning:button aura:id="pester warning" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>14</td><td>pester</td><td>error</td><td><lightning:button aura:id="pester error" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
                <tr><td>15</td><td>pester</td><td>other</td><td><lightning:button aura:id="pester other" variant="brand" label="showToast" onclick="{!c.showMyToast}" /></td></tr>
            </tbody>
        </table>
    
    </lightning:card>
            </lightning:layoutItem>
        </lightning:layout>
</aura:component>

 js：

({
  showMyToast : function(component, event, helper) {
        
        var modestr = event.getSource().getLocalId().split(' ')[0];
        var typestr = event.getSource().getLocalId().split(' ')[1];
        
        
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            mode: modestr,
            type : typestr,
            //title: '表示タイトル',
            message: '表示メッセージ１\n表示メッセージ２\n表示メッセージ３'
        });
        toastEvent.fire();
  }
})