Toast

Watch this on Youtube: https://www.youtube.com/watch?v=zl7ZAsgPghQ

The Show Toast action displays a temporary, customizable notification message to provide user feedback. Toasts appear as floating overlays that automatically disappear after a specified duration, making them ideal for non-intrusive confirmations, alerts, or status updates.

Toast Action

---

✅ Common Use Cases

• Showing success messages after form submissions

• Confirming actions like "Item saved" or "Copied to clipboard"

• Displaying error messages or warnings

• Providing feedback after API calls or data operations

• Alerting users about background processes

---

⚙️ Default Behavior

By default:

Behavior	Description
Duration	Toast displays for 2 seconds before auto-dismissing
Position	Appears at the bottom center of the screen
Appearance	Black background with white text, rounded corners
Size	Auto-sized based on content (customizable)
Interaction	Non-interactive - cannot be tapped or dismissed manually

---

🛠️ How to Use

1. Add the action to a widget event (e.g., button tap, form submission)

2. Choose Show Toast from the action list

3. Set the message text to display

4. Optionally customize duration and style properties

---

📦 Properties

Property	Type	Required	Description
message	Expression (String)	✅	The text content to display in the toast
duration	Expression (Number)	❌	Display duration in seconds (default: 2)
style	Object	❌	Visual styling configuration

---

🎨 Style Configuration

The style object supports extensive customization:

Style Property	Type	Description	Default
bgColor	String	Background color (hex code or color name)	"#000000"
borderRadius	String	Corner radius (comma-separated: topLeft,topRight,bottomRight,bottomLeft)	"12,12,12,12"
height	Number	Toast height in pixels	Auto-sized
width	Number	Toast width in pixels	Auto-sized
padding	String	Inner spacing (comma-separated: left,top,right,bottom)	"24,12,24,12"
margin	String	Outer spacing (same format as padding)	None
alignment	String	alignment within toast	"center"
textStyle	Object	Text styling (see Text Style Properties)	White text

---

💡 Examples

Basic Success Message:

// message: "Data saved successfully!"
// duration: 2
// style: {}

Error Toast with Custom Styling:

// message: "Failed to save data. Please try again."
// duration: 3
// style: {
//   "bgColor": "#dc3545",
//   "borderRadius": "8,8,8,8",
//   "textStyle": {
//     "color": "#ffffff",
//     "fontSize": 14,
//     "fontWeight": "500"
//   }
// }

Dynamic Message from State:

// message: appState.lastActionMessage
// duration: 2

API Response Feedback:

// message: if(isNull(jsonGet(response.body, 'message')), 'Operation completed', jsonGet(response.body, 'message'))
// duration: 2

Custom Styled Confirmation:

// message: "Welcome back!"
// style: {
//   "bgColor": "#28a745",
//   "borderRadius": "20,20,20,20",
//   "padding": "32,16,32,16",
//   "textStyle": {
//     "fontSize": 16,
//     "fontWeight": "600"
//   }
// }

https://digiaacademy.portal.trainn.co/share/toast-examplesdigiaacademy.portal.trainn.co