Custom Toast Message

Owned by kiran.kumari@intellectdesign.com (Unlicensed)
Last updated: Jul 22, 2019 by Ravikumar Babu CTOO (Unlicensed)

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.
The maximum character limit for this parameter is 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.
The maximum character limit for this parameter is 30. The characters exceeding this limit will not be displayed and only an eclipse (...) will be rendered.

Please update your Aadhar details

showHideTransition

Indicates the type of transition effect. This parameter can have the following values:

  • fade
  • slide
  • plain

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:

  • true: Enables the close option for the toast message that can be used by the user to close the toast before its time lapses.
  • false: Does not enable the close option.

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.
The default value for this parameter is 3000.

5000

loader

Indicates whether the toast message will be displayed with a load mask or not. This parameter can have the following values:

  • true: Enables the loader (load mask) for the toast message.
  • false: Does not enable the loader.

The default value for this parameter is true.

The load mask for the toast message indicates the time duration of the toast message.

false

loaderBg

Indicates the background color for the load mask. The value for the background color should be specified as Hexadecimal.
The default value for this parameter is #9EC600 (strong yellow).

#9EC601

position

Indicates the position of the toast message on the screen.
This parameter can have values such as top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, and mid-center.
The default value for this parameter is mid-center.

top-right

bgColor

Indicates the background color for the toast message. The value for the background color should be specified as Hexadecimal.
The default value for this parameter is #31708f (dark blue).

#000000

textColor

Indicates the text color of the toast message. The value for the color should be specified as Hexadecimal.
The default value for this parameter is #d9edf7(light blue).

#fff

textAlign

Indicates the text alignment of the message content within the toast message. This parameter can have the following values:

  • left
  • center
  • right

The default value for this parameter is left.

left

icon

Indicates the icon for the toast message.
Only fontawesome, flaticon, and glyphicons based values can be configured for the icon parameter. Hence, the custom icons need to be made available in these formats before associating those with the toast message.
Default value for this parameter is info.

info

beforeShow

Indicates the event that can be triggered right before the toast is about to appear.
The default value for this parameter is null.

config.beforeShow=function()
{
	launchObjects_create_tickets = 
	{ 
		"formId" : "FORM_DEF1", 
		"renderType" : 'WINDOW' 
	}
canvas.launch(launchObjects_create_tickets);
}

Indicates the event that can be triggered after the toast appears.
The default value for this parameter is null.

config.afterShown=function()
{
	launchObjects_create_tickets =
 	{ 
		"formId" : "FORM_DEF1", 
		"renderType" : 'WINDOW' 
	}
canvas.launch(launchObjects_create_tickets);
}

 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:

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:

canvas.toastMessageManager.showCustomToastMessage(config)



Figure 7: Custom Toast Message - Mobile


Figure 8: Custom Toast Message - Desktop