Power Community

Power Community

Components from Components – Stacked Notification Toasts

wyattdave_0-1715373412871.gif

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.

wyattdave_0-1715348277537.png

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.

wyattdave_1-1715348502617.png

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

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Preferred Solution | New feature | Microsoft Dataverse

Click on the below image to navigate to my YouTube Channel. Please like and share your valuable feedback on this...

More Articles Like This

- Advertisement -spot_img