Components from Components - Stacked Notification Toasts

[wyattdave]

Toasts are small in app notifications which generally last for a few seconds (like the default notification action). A stack is how you handle multiple at once. In this demo I will show you how to create one using just standard components.

The main component to create the toast stack is a gallery (probably the most versatile component).

The gallery has 3 internal components, a label showing how many seconds before it is deleted, another label showing the message, and a icon that deletes the notification.

To make sure the gallery only appears when there is a notification we set its height to

CountRows(colToast)*110

The template size is 100 so we add 10 for padding

With colToast being the collection we store our messages, it only has 2 columns, id (so we know which order they arrived to delete in right order), and message.

To add a new notification we use below code (in the demo its on a button OnSelect but can be on any trigger).

Collect(colToast,{message:TextInput1.Text,id:Last(colToast).id+1});
Set(vbToasts,true);

Now we have our toast stack and a way to add to it we need a way to remove them, this action requires a timer. The timers Start is set to vbToasts (now you see why we set it to on when there is a notification), Repeat and Reset to true. Duration is how long you want the notification to show (I use 3 seconds). The code to delete the notification is on the OnTimerEnd event:

If(CountRows(colToast)=0,
    Set(vbToasts,false);
,
    Remove(colToast,First(colToast));
)

It checks to see if all the notifications are deleted, if they are it ends the timer. Else it removes the first in the collection (the oldest).

And that's about it, the icon on the notification to delete the notification is simply:

Remove(colToast,ThisItem)

and the count down timer label is just

Text(Time(0, 0, tiToast.Value/1000), "mm:ss")

There are loads of ways to improve it and make it look better but it covers the basics.

I've attached the solution if you want to take a look at it working.

>--------------------------------------------
This is a series of short blogs designed to help create new components from existing components, keep your eyes out for more


l also do long form and broader Power Platform blogs here https://dev.to/wyattdave

StackedNotificationToastDemo_1_0_0_1.zip