Musson Industrial's Embr-Periscope Module

3rd Party Modules
23

The Toasts Update

Periscope version 0.7.0 includes toasts powered by react-toastify.

The toasts also work in the designer :wink:.

Creating a Toast

These are client-side toasts, therefore all the interaction is done via system.perspective.runJavaScriptAsync.

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

Simplest Example

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).

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.

Example Views

periscope_toasts.zip (62.4 KB)

Side Note

If you update to Embr-Charts 2.2.4, you can also create toasts from within chart callbacks :wink: (the beginning of a shared JavaScript function registry system is in progress....)

15 Likes