Toast are the message box or you can say notification box which you can use to show messages/notification on top of the view.
Toast displays a message below in the header at the top of the view.
In this blog, we are going to learn about how to show toast in salesforce Lightning record page by using “force:showToast”.
Note:-
Toast event is handled by the one.app container and it is supported in Lightning Experience, Salesforce app, and Lightning communities.
force:showToast is not available on login pages.
Now let’s learn attribute of the toast.
Toast Attributes:-
- title: Specifies the title of toast.
- message: Specifies the message to display.
- messageTemplate: If you want to override the ‘message’ which is specified in message attribute then you can use this attribute along with ‘messageTemplateData’.
- messageTemplateData: To show the overridden message you must use this attribute.
- key: Specifies the icon on toast when the type is not defined.Icon keys are available at the Lightning Design System Resources page.
- duration: Specifies the duration of toast to be shown.after specified duration toast will automatically disappear.
- type: the toast type which can be “error”, “warning”, “success”, “info”.The default is “other”, which is styled like an info toast and doesn’t display an icon, unless specified by the “key” attribute.
- mode: Controls how users can dismiss the toast. The default is “dismissible”, which displays the close button.valid mode values are:-
- dismissible: Remains visible until you press the close button or duration has elapsed, whichever comes first.
- pester: Remains visible until duration has elapsed. No close button is displayed.
- sticky: Remains visible until you press the close buttons.
Now we will focus on building such interesting ‘Toast’ in our environment.
Create lightning component named “ToastComponent” and paste below code in your component.
ToastComponent.cmp
| <aura:component implements=”flexipage:availableForRecordHome,force:hasRecordId,flexipage:availableForAllPageTypes” access=”global” > | |
| <div> | |
| <lightning:button label=”Information” variant=”brand” onclick=”{!c.showInfoToast}” /> | |
| <lightning:button label=”Error” variant=”destructive” onclick=”{!c.showErrorToast}” /> | |
| <lightning:button label=”Warning” variant=”inverse” onclick=”{!c.showWarningToast}” class = “warning_cls” /> | |
| <lightning:button label=”Success” variant=”inverse” onclick=”{!c.showSuccessToast}” class = “success_cls” /> | |
| </div> | |
| </aura:component> |
view rawToastComponent.cmp.xml hosted with 
by GitHub
| .THIS { | |
| } | |
| .THIS .warning_cls { | |
| background : #FFB75F !important; | |
| } | |
| .THIS .success_cls { | |
| background : #04842D !important; | |
| } |
view rawToastComponent.css hosted with by GitHub
| ({ | |
| showInfoToast : function(component, event, helper) { | |
| var toastEvent = $A.get(“e.force:showToast”); | |
| toastEvent.setParams({ | |
| title : ‘Info Toast Message’, | |
| message: ‘This is Info Toast…!!!’, | |
| duration:’ 4000′, | |
| key: ‘info_alt’, | |
| type: ‘info’, | |
| mode: ‘dismissible’ | |
| }); | |
| toastEvent.fire(); | |
| }, | |
| showSuccessToast : function(component, event, helper) { | |
| var toastEvent = $A.get(“e.force:showToast”); | |
| toastEvent.setParams({ | |
| title : ‘Success Toast Message’, | |
| message: ‘This is Success Toast…!!!’, | |
| duration:’ 4000′, | |
| key: ‘info_alt’, | |
| type: ‘success’, | |
| mode: ‘pester’ | |
| }); | |
| toastEvent.fire(); | |
| }, | |
| showErrorToast : function(component, event, helper) { | |
| var toastEvent = $A.get(“e.force:showToast”); | |
| toastEvent.setParams({ | |
| title : ‘Error Toast Message’, | |
| message:’This is Error Toast…!!!’, | |
| messageTemplate: ‘Mode is pester ,duration is 4sec and Message is overrriden’, | |
| duration:’ 4000′, | |
| key: ‘info_alt’, | |
| type: ‘error’, | |
| mode: ‘pester’ | |
| }); | |
| toastEvent.fire(); | |
| }, | |
| showWarningToast : function(component, event, helper) { | |
| var toastEvent = $A.get(“e.force:showToast”); | |
| toastEvent.setParams({ | |
| title : ‘Warning Toast Message’, | |
| message: ‘This is Warning Toast…!!!’, | |
| messageTemplate: ‘Mode is sticky ,duration is 4sec and Message is overrriden because messageTemplateData is {1}’, | |
| messageTemplateData: [‘Salesforce Lightning’, { | |
| url: ‘http://thecloudfountain.com/category/blog/’, | |
| label: ‘Click Here’, | |
| }], | |
| duration:’ 4000′, | |
| key: ‘info_alt’, | |
| type: ‘warning’, | |
| mode: ‘sticky’ | |
| }); | |
| toastEvent.fire(); | |
| }, | |
| }) |
view rawToastComponentController.js hosted with by GitHub
Now our component is ready.
Next step is to show our component on home page.
Go to Home Page and click on “Edit Page” under setup menu.
Select “ToastComponent” under “Custom” tab and drag it below Assistant(right side of page).
You can see your “ToastComponent” like below –
Click on “Save” and “Activate” your component to system default (for all users) and refresh home page.
Let’s test our component.
- Click on “Information” button and see “Information Toast”
- Click on “Error” button and see “Error Toast”
- Click on “Warning” button and see “Warning Toast”
- Click on “Success” button and see “Success Toast”
Excellent Job…!!! Keep Learning…