...
canvas.toastMessageManager.showCustomToastMessage is the custom API method to show any type of message within a fully customized Toast message to the user.
The developer can configure the following parameters for this API:
API Parameter | Description | Sample Value |
---|---|---|
text | Indicates the message that is to be displayed within the toast message. |
40. The characters exceeding this limit will not be displayed and only an eclipse (...) will be rendered. | KYC | |
heading | Indicates the header text for the toast message. | Please update your Aadhar details |
showHideTransition | Indicates the type of transition effect. This parameter can have the following values:
The default value for this parameter is fade. | fade |
allowToastClose | Indicates whether the toast message will be displayed with a close option or not. This parameter can have the following values:
The default value for this parameter is true. | true |
hideAfter | Indicates the time duration for the toast message. The value for this parameter must be provided in milli-seconds. | 5000 |
loader | Indicates whether the toast message will be displayed with a load mask or not. This parameter can have the following values:
The default value for this parameter is true. |
| false | ||||||
loaderBg | Indicates the background color for the load mask. The value for the background color should be specified as Hexadecimal. | #9EC601 | |||||
position | Indicates the position of the toast message on the screen. | top-right | |||||
bgColor | Indicates the background color for the toast message. The value for the background color should be specified as Hexadecimal. | #000000 | |||||
textColor | Indicates the text color of the toast message. The value for the color should be specified as Hexadecimal. | #fff | |||||
textAlign | Indicates the text alignment of the message content within the toast message. This parameter can have the following values:
The default value for this parameter is left. | left | |||||
icon | Indicates the icon for the toast message. | info | |||||
beforeShow | Indicates the event that can be triggered right before the toast is about to appear. |
|
Indicates the event that can be triggered after the toast appears. |
|
...
Info |
---|
If no values are provided for the API parameters mentioned in the above table, then the default values will be considered for execution. |
Unlike the other API methods, the values for this API's parameters have to be passed as objects.
Example - Declaring the objects:
Code Block | ||
---|---|---|
| ||
var config = |
...
canvas.toastMessageManager.defaultConfig |
...
config.heading = 'KYC' |
...
config.text = "Please update your Aadhar details" |
...
config.showHideTransition = 'slide' |
...
config.allowToastClose = false |
...
config.hideAfter = 5000 |
...
config.loader = false |
...
config.loaderBg = '#9EC600' |
...
config.position = 'top-right' |
...
config.bgColor = '#000000' |
...
config.textColor = '#fff' |
...
config.textAlign = 'left' |
...
config.icon = 'info' |
Example - API:
ct
Code Block | ||
---|---|---|
| ||
canvas.toastMessageManager.showCustomToastMessage(config) |
Figure 7: Custom Toast Message - Mobile
Figure 8: Custom Toast Message - Desktop
...