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”.
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.
- 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.
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…