# Musson Industrial's Embr-Periscope Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [November 24, 2024, 10:26pm UTC](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047 "2024-11-24T22:26:31Z")\
**Posts on this page:** 1\
**Showing post:** 23

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [March 31, 2025, 11:06pm UTC](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047/23 "2025-03-31T23:06:00Z")

</div>

# The Toasts Update

[Periscope version 0.7.0](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fperiscope%400.7.0) includes toasts powered by [react-toastify](https://github.com/fkhadra/react-toastify).

> **[Release @embr-modules/periscope@0.7.0 · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fperiscope%400.7.0)**
>
> Minor Changes
> 
> 
> b2f5657: Add Perspective client toast feature powered by https://github.com/fkhadra/react-toastify.
> This feature is accessed through the JavaScript scoped object periscope.toast usi...

The toasts also work in the designer 😉.

## Creating a Toast

These are client-side toasts, therefore all the interaction is done via [`system.perspective.runJavaScriptAsync`](https://docs.mussonindustrial.com/ignition/embr-periscope/scripting/perspective/system-perspective-runJavaScriptAsync).

`periscope.toast` is directly mapped to `react-toastify`'s `toast` object, all features are supported.

### Simplest Example

```python
system.perspective.runJavaScriptAsync('''() => {
	periscope.toast('Your first toast!')
}''')

```

## Embedded View Toast

This is somewhat advanced, but if you're reading this I trust you can figure it out.

A new helper function `perspective.createView` is available to remove the React/component store boilerplate; however, you still need to provide a unique and stable mount path. The easiest method for creating the mount path is by using the `toastId` available in the `toastProps` (basically just copy this example).

```python
system.perspective.runJavaScriptAsync('''() => {		
	periscope.toast(({ toastProps }) => {
		return perspective.createView({
			resourcePath: 'Path/To/Your/View',
			mountPath: `toast-${toastProps.toastId}`,
			params: {}
		})
	})
}''')

```

## More Information

For full details, check out the attached example views as well as the [react-toastify documentation](https://fkhadra.github.io/react-toastify).

## Example Views

[periscope\_toasts.zip](https://forum.inductiveautomation.com/uploads/short-url/7ZHpO2Bhkl0mS6vMqH9odrzoCM2.zip) (62.4 KB)

## Side Note

If you update to [Embr-Charts 2.2.4](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fcharts%402.2.4), you can also create toasts from within chart callbacks 😉 (the beginning of a shared JavaScript function registry system is in progress....)

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047)._