Salesforceの雷ゼロベースの学習（XIV）光にトースト光

Benpian参照：

https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification

https://archive-2_9_4.lightningdesignsystem.com/components/toast/

トーストは、ページヘッダにメッセージを表示するため、低い少ないプロジェクトのコンポーネントよりなります。以前は頻繁に使用されるが、何の深い研究が最近始まったばかり雷プロジェクトは、さらなる研究、私はもう少し理解するために、これまでよりも学んでいないだろうしていた、それはここに簡単に表示するために、後に締結されており、小さなパートナーとは接触がないようにスイープブラインド。

A.トースト

ページのヘッダーにメッセージを表示するためには、そのような私たちの成功と更新が完了した後にデータを修正するように求められますトースト、異常等のアップデートの失敗に求めるメッセージが表示されますライトニングトーストパッケージは、我々だけで指定された手順に従ってトーストイベントを取得する必要があり、火をトリガすることができ、イベントになるだろう。$ A.get（「e.force：showToast」）を使用して乾杯の使用がショー以下のデモ関連の属性トリガ機能を追加し、イベントを取得することができますがトーストに実現することができます。

showToast：機能（コンポーネント、イベント、ヘルパー）{
     VAR toastEvent = $ A.get（ "e.force：showToast" ）。
    toastEvent.setParams（{
         "タイトル"： "成功！" 、
         "メッセージ"： "レコードが正常に更新されました" 
    }）; 
    toastEvent.fire（）; 
}

それでは、トーストがそれを持っているパラメータ？

タイトル：このパラメータは、メッセージのヘッダ領域を表示するために使用されるが、通常タイトルは上に表示されるフォント若干大きくなります。
期間：このパラメータは、トーストが自動的にどのくらいの時間後に消え、現在の表示を設定するために使用され、ミリ秒単位で、このプロパティは、デフォルトは5秒、5秒未満が5秒で処理される場合には集合時間があり、埋めることはできません。
メッセージ：このパラメータは、トーストの表示内容を表示するために使用されます。
モード：dismissible（メッセージ表示は、閉じるボタンが含まれている、あなたがボタンをクリックすると、あなたが消えて、デフォルトで5秒をクリックしない場合、これがデフォルトのオプションですすぐトースト消えることができます）/せびる（：トースト表示モード、トーストの3つのモードをサポートしています）数秒後に自動的に消え、閉じるボタンを表示しない/スティッキー（のみ消えることはありません[閉じる]ボタンをクリックしないでください、閉じるボタンを表示）
タイプ：タイプのトースト、さまざまな種類が異なるアイコンと異なる色のスタイルが表示されます。選択可能な値は次のとおりです。エラー/警告/成功/情報/その他。私たちは、多くの場合、同じスタイルと色の情報を表示するために、実際には、他のは、このプロパティのデフォルト値で、頻繁に使用されていない最後の1を最初の4つを使用することができ、この差はアイコンが表示されません。私たちは、スタイルの情報を表示したいが、情報アイコンを使用したくない、私たちは、あなたがキーを設定することができ、他の考慮することができれば、一致するキー属性がそう、他のアイコンが表示されることがあればもちろん、アイコンは絶対的ではありません表示されません。
キー：私たちは、あなたがショーの内部のトースト他のアイコンを指定することができ、状況の他のタイプを選択した場合は、あなたがアイコン雷設計システムの名前を選択することができます。
messageTemplate：トーストニュース番組のために上記のメッセージが、唯一の情報文字列を表示することができ、我々は（たとえば、あなたがメッセージのトーストでクリッカブルURLを表示する）を示すために、追加の拡張機能が必要な場合は、私たちが使用する必要がありますmessageTemplateはmessageTemplateDataを充填用い、パラメータプレースホルダによって配置しました。我々はまた、このような録音{0}が作成したとして、{}を使用して、0から始まる、カスタムラベルに宣言するように！それは{1}は、ここ2つのプレースホルダの設定を参照してくださいmessageTemplateプレースホルダ、2つのパラメータを渡すためのmessageTemplateDataの必要性が来ます。
messageTemplateData：messageTemplate後に使用された、プレースホルダテキストのセットですパッケージ値、およびテキスト対応するアクションを置き換えるために、このプロパティの必要性を使用します。

雷：トーストに加えて、少しの友人が自分を見ることができoverlayLibrary（表示メッセージをモーダルとポップオーバーで）/雷：notificationsLibrary（通知とトーストを介して表示メッセージ）

今、あなたはトーストトーストの説明を達成することができます上記のすべての属性と機能を完了したことを、我々は次のように一般的にいくつかの簡単な最適化と処理を使用し表示することができます。

シーンの一つ。コンテンツのマルチラインディスプレイ

デフォルトのコンテンツトーストのみ単一の行を表示することができ、私たちは、私たちは以下のように実現したHTMLトーストの解像度を達成するために見ることができること、トーストスティッキーに設定、デモを行いました。事前ライン：そこの前にあり、注文後、我々は唯一の空白を設定し、2つのスタイルのCSSを書き換える必要があるため、画像のCSSの内容によって、私たちは、CSSのレンダリング、レンダリングのためtoastMessage 2 forceActionsTextを使用してトーストの内容を見ることができます！重要;スペース、空白行やラップに必要な場合、メッセージのすべてのラップの保存と利用をマージ\ n個の文字列がラップを達成するために分離できる場合がある場合、それは、意味することができます。

私たちは、再描画パターンFOUNDに現在のコンポーネントバンドル内のCSSは、このスタイルのための外部カバーを導入するので、唯一の静的リソースは利用できませんみました。

.toastMessage.forceActionsText { 
    ホワイトスペース：！事前ラインが重要。
}

CSSを作成する方法は、コンテンツの内容は、上記した後、コードを導入することができるという名前の静的リソース、にアップロードされます。私たちは、静的リソース名multipleLineToastCssという名前のデモ。

<： "{！$ Resource.multipleLineToastCss}" のスタイルを必要= / ltng>に我々は唯一のコードにする必要があります。

私たちは、確認するために、簡単なデモをしました：

< オーラ：コンポーネントを実装= "flexipage：availableForAllPageTypes" > 
    < ltng：必要なスタイル= "{$ Resource.multipleLineToastCss！}" /> 
    < 雷：ボタンの変種= "ブランド" ラベル"トーストショー" = onclickの！= "{C .showToast}」/> 
</ オーラ：成分>

対応controller.js

showToast：機能（コンポーネント、イベント、ヘルパー）{
    VAR toastEvent = $ A.get（ "e.force：showToast" ）。
   toastEvent.setParams（{ 
        モード： '粘着性' 、
        タイトル： '情報' 、
        種類： '情報' 、
        メッセージ： 'テストメッセージ\ NTEST複数行' 
    }）。
    toastEvent.fire（）; 
}

シーンII。トーストクリッカブルURLを表示します

特定のシナリオの下では、我々はページにジャンプするために、URLとURLでのユーザーのクリックを時間のトーストを表示する必要があります。この場合、我々は実現することが可能と試合にmessageTemplateとmessageTemplateDataを使用する必要があります。

showMyToast：機能（コンポーネント、イベント、ヘルパー）{
     VAR toastEvent = $ A.get（ "e.force：showToast" ）。
    toastEvent.setParams（{ 
        モード： 'スティッキー' 、
        メッセージ： 'これは必要なメッセージである' 、
        messageTemplate： '！！録音{0}作成したが、} 1 {それを参照してください' 、
        messageTemplateData：[ 'Salesforceの' 、{ 
            URL：「HTTP ：//www.salesforce.com/」、
            ラベル： 'ここ' 、
            } 
        ] 
    }）; 
    toastEvent.fire（）; 
}

シーン三。トーストメッセージアイコンを変更します

私たちは（デフォルトは他で）私たちは他のアイコンを表示する必要がある場合、我々は唯一のセット他のかいないタイプにタイプを設定する必要があり、ときタイプの割り当てトースト、成功/警告/エラー/情報がなるのデフォルトのスタイルとアイコンがあることを知っていますあなたは、キーを設定することができます。キーは、私たちがすることができ、アイコンの雷設計システムの割り当ての名前を見つけることができます。

showToast：機能（コンポーネント、イベント、ヘルパー）{
     VAR toastEvent = $ A.get（ "e.force：showToast" ）。
    toastEvent.setParams（{ 
        モード： '粘着性' 、
        タイトル： '情報' 、
        種類： 'その他' 、
        キー： 'のような' 、
        メッセージ： 'テストメッセージ\ NTEST複数行' 
    }）。
    toastEvent.fire（）; 
}

二。オーラ：メソッド

私たちは、コンテンツの多くは、このようなショーのためのトースト（私たちは宣言のみトーストやトリガーを繰り返しているコントローラ/ヘルパーjsの方法の各コンポーネントを宣言する必要はありません、あなたが呼び出すことができ、パラメータを渡す方法を設定する必要があります）などの操作、共通の構成要素とすることができる持っています選択リスト値取得、テーブルのラベルフィールドの取得のため。方法：公共のコンポーネント名パッケージのオーラ、オーラを設定する必要性を理解して作ります。

私たちは、クライアント・コントローラに直接この部分を呼び出すことができるように、この方法は、APIコンポーネントの一部として使用することができます定義方法：我々は通常、ハンドラや実行方法、通常のフロントエンドのオーラの使用を呼び出すためにイベントをバインドするメソッド呼び出しに行きます方法。使用オーラ：その他、ステートメントにする方法：共通のコンポーネントとして設立されたコンテンツの共有、利用のオーラを行うには方法：メソッドを使用すると、また、我々は通常、オーラを使用できるように結果は、同期または非同期で返さ設定することができ、入ってくるパラメータを設定することができます法法の声明：この共通のコンポーネントを導入するコンポーネントのみ必要がオーラを呼び出すための直接的な権限を持っています。

オーラ：以下の属性の方法の合計：

名前：、直接このメソッドの呼び出しを使用して呼び出され、後者のメソッドの名前を宣言するために、あなたは関連するパラメータを渡すことができます。
アクション：クライアント・コントローラメソッドを移動するには、このメソッドを呼び出します。
アクセス：公共（コンポーネントが同じ名前空間でこのメソッドを呼び出すことができます）/グローバル（すべての名前空間のコンポーネントでこのメソッドを呼び出すことができます）。
説明：方法について説明しました。

パラメータ入力方法の本体を宣言する属性：上記の特性に加えて、方法はまた、オーラを使用し、パラメータを有します。オーラ：共通のコンポーネントを達成するための方法トースト：メソッドは同期および非同期のリターンを達成することができ、詳細を見て興味がある可能性があり、以下の内容がオーラです。

ToastServiceComponent.cmp

< オーラ：コンポーネントアクセス= "グローバル" > 
    < ltng：必要なスタイル= "{$ Resource.multipleLineToastCss！}" /> 

    < オーラ：メソッドのアクセス= "グローバル" 名前= "showToast" アクション= "{！c.showToastAction} 「> 
        < オーラ：属性名=」メッセージ」タイプ= 『文字列』の説明= 『身体のメッセージは使用を表示します\ n行を分割する』。必要= 『真』/> 
        < オーラ：属性名= 『DISPLAYTITLE』タイプ=「文字列」の説明=「タイトルhearderが表示されます」必要=「真」/> 
        < 属性：オーラ名=「displayType」タイプ=「文字列」の説明=「成功/警告/エラー/情報/その他」/> 
        < オーラ：属性名を= 「モード」タイプ=「文字列」の説明=「dismissible /せびる/スティッキー」/> 
        < オーラ：属性名=「キー」タイプ=「文字列」の説明=「あなたは雷設計システムアイコンのセクションから名前を設定することができます」/> 
    </ オーラ：方法> 

</ オーラ：成分>

ToastServiceComponentController.js

（{ 
    showToastAction：機能（コンポーネント、イベント、ヘルパー）{
         VARのparams = event.getParam（ '引数' ）;
         VAR toastEvent = $ A.get（ "e.force：showToast" ）;
         VARのタイプ= params.displayType;
         もし（params.key）{ 
            タイプ = 'その他' ; 
        } 
        もし（！{params.mode）
            params.mode = 'dismissible' ; 
        } 
        toastEvent.setParams（{
             "タイトル" ：params.displayTitle、
             "メッセージ" ：params.message 、
            "タイプ" ：タイプ、
             "モード" ：params.mode、
             "キー" ：params.key 
        }）。

        toastEvent.fire（）; 
    } 
}）

次の呼び出しです：

SimpleToastDemo.cmp：ToastServiceComponentを導入する必要性は、ローカルIDを設定しました

< オーラ：部品実装= "flexipage：availableForAllPageTypes" > 
    < C：ToastServiceComponent オーラ：ID = "toastService" /> 
    < 稲妻：ボタンバリアント= "ブランド" ラベル= "ショートースト" のonclick = "{！c.showToastHandler}" /> 
</ オーラ：成分>

SimpleToastDemoController.js：メソッドを呼び出して、ID：オーラを見つけます。

（{ 
    showToastHandler：機能（コンポーネント、イベント、ヘルパー）{
         VAR toastService = component.find（ 'toastService' ）; 
        toastService.showToast（ 'これはトーストデモ\ nは、これは複数の行は、我々は、アイコンのような表示nhere \可能にすることができます'、 '単純なトーストデモ'、 'その他'、 'dismissible'、 'のような' ）
    } 
）}

それを以下に示します。

概要：簡単なトーストとオーラで記事：方法、最高の雷を見つけるために関心の独自のビューの文書についての詳細を学ぶために：overlayLibraryと雷：notificationsLibraryを。間違った場所内の記事は、私は歓迎のメッセージを理解していない、それを歓迎します。

Salesforceの雷ゼロベースの学習（XIV）光にトースト光

おすすめ