Show Bottom Sheet

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

The Show Bottom Sheet action allows you to display a component as a bottom sheet over your current page. It supports customization of appearance and optional result handling.

---

📦 Properties

Property	Type	Required	Description
component and its args	Dropdown and value	✅	Add Component from dropdown and fill their respective component params
Expect Result	Boolean	❌	Boolean for trigger onResult or not
style	Object	❌	Visual styling configuration
onResult	Action Flow	❌	Actions to run when result is returned

---

🎨 Style Configuration

The style object supports comprehensive customization:

Style Property	Type	Description	Default
bgColor	String	Background color (hex or color name)	Transparent
barrierColor	String	Background overlay color	Semi-transparent black
maxHeight	Number	Maximum height ratio (0.0-1.0)	1.0 (full height)
useSafeArea	Boolean	Respect device safe areas	true
borderStyle	String	Border style (solid, dashed, etc.)	None
borderColor	String	Border color	None
borderWidth	Number	Border width in pixels	None
borderRadius	String	Corner radius (comma-separated)	None
strokeAlign	String	Border alignment	center
icon	Object	Close/dismiss icon configuration	None

---

✅ Common Use Cases

• Displaying filter options or search criteria

• Showing quick actions or context menus

• Collecting short form inputs or confirmations

• Presenting settings or configuration options

• Displaying media picker or selection interfaces

---

⚙️ Default Behavior

By default:

Behavior	Description
Modal Behavior	Blocks interaction with underlying content
Dismissal	Closes when tapped outside or via internal actions
Safe Area	Respects device safe areas by default
Result Handling	No result returned unless Expect Result is enabled
Animation	Smooth slide-up/slide-down transitions

---

🛠️ How to Use

Copy Slug

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

2. Choose Show Bottom Sheet from the action list

3. Set component from dropdown and fill their respective args

4. Optionally configure styling and result handling

---

📤 Result Handling

When Expect Result is enabled, the bottom sheet can return data that triggers the onResult action flow. The result is available as a result variable:

Copy Slug

Common Result Patterns:

• Form submission data

• Selected option/item

• Confirmation responses

• User input values

---

https://digiaacademy.portal.trainn.co/share/show-bottom-sheet-examplesdigiaacademy.portal.trainn.co

---

🔗 Related Documentation

• Finding Page/Component Slugs - How to locate and copy component slugs for bottom sheets

• Open Dialog - Display components as modal dialogs instead of bottom sheets

---