Create an *Animated* Toast Notification in Power Apps

In today’s post, we’re going to build an animated toast notification. You know… that little sliding popup showing up and disappearing on the side of your screen 😉

We’re going to build a Power Apps component in a components library, and then we’ll focus on the animation. Let’s do this!

Build the component

Navigate to your Power Apps portal and go to Component libraries. If you don’t see it, click on More (left navigation), then Component libraries > New component library.

We’re going to name the component Fluent2 Toast Notification, and give it the following size:

• Width = 300
• Height = 120
• Fill = Transparent

Then we’ll add a (normal) container, and rename it to contToast (feel free to rename to whatever you wish):

• Width = 275
• Height = 110
• Fill = White
• Border radius = 4
• Drop shadow = Regular

Inside this container, let’s add other controls:

• Icon for a checkmark
  • Size = 18×18
  • Icon = checkmark
  • Color = Green
  • Style = Filled
• Label for the header
  • Rename = lblHeader
  • Vertical align = Middle
  • Font = Lato
  • Font size = 16
  • Font weight = Semi-bold
• Label for the content (body)
  • Rename = lblContentBody
  • Vertical align = top
  • Font size = 12
• Icon for dismissing the notification
  • Rename = btnCancel
  • Icon = Dismiss
  • Layout = Icon only
  • Size = 32×32
  • Type = Subtle
  • Icon style = Filled

And finally, let’s create some custom properties. Select your component (Fluent2 Toast Notification) and click on New custom property (bottom right under Custom properties).

👉 HeaderText property:

👉 ContentBody property:

👉 OnToastCancel property:

Now let’s modify some properties. Select lblHeader, and on the Text property, add the formula:

'Fluent2 Toast Notification'.HeaderText

Select lblContentBody and in the Text property, add the formula:

'Fluent2 Toast Notification'.ContentBody

Select btnCancel, and in the OnSelect property, add the formula:

'Fluent2 Toast Notification'.OnToastCancel()

Now we’re done. Let’s Save and Publish our component.

Add component to app

Now’s the time to import our component to a new app or screen, and add some animation. I’ll create a new app (tablet layout – important for later!) but feel free to use an existing one and create a blank screen for testing 😉

On your (new) screen, click on the “+” sign > folder icon > select your component > Click on Import.

The component has now been added under Library components. Click on it to add to the app.

Animate the Toast Notification

You’ll notice that when you add the component, it’s added to the LEFT of the screen canvas. Most toast notifications will show up from the RIGHT of the screen. And that’s where we’re going to animate from 😉

So… what do we need for the animation to work? Well, for this blog post, we’re going to use a button to show & hide the notification by using a context variable. In your scenario, you might link the toast to a save or submit button.

We also going to need 2x timers:

• Timer for animation
• Timer to close the toast after a period of time if the user doesn’t close it

Alright, let’s get into it.

Button & Animation Timer

Let’s start with our Open/Close button. We’ll add a button control and rename it to btnOpenClose.

Next, we’ll add our first timer, which will be for the smooth animation of coming in & going out of the screen. Rename it to timerAnimation with a duration of 400.

Also, set the Start property to the (future) variable of StartTimer (will error for now but don’t worry, we’ll fix it next).

Let’s go back to the btnOpenClose, and on the OnSelect property of that button, enter the formula:

Reset(timerAnimation); UpdateContext({StartTimer: false}); UpdateContext({StartTimer: true}); UpdateContext({ShowHideToast: !ShowHideToast}); 

Now the error for the StartTimer variable has vanished 😁 This part of the formula UpdateContext({StartTimer: false}); UpdateContext({StartTimer: true}); will trigger the animation.

Component placement

For now, move the component to the right of the canvas to the maximum or manually enter the X position of 1066. The Y position is not really important in our case because we want to animate horizontally and not vertically. So choose your Y position where it suits you best.

The X position of 1066 is the position we want when the toast is showing up. Meaning it’s INSIDE the screen. What about the OUTSIDE then?? Let’s concentrate our brain for what’s coming…. 😁

To get the size of the screen, click on the screen itself (i.e.: Screen1 in my case), and go to the Width property. The Width of my screen is 1366 because I’ve created my app with the tablet layout (remember?)

So… Why is it important? It’s important because it means:

• When showing the component, we want the X position at 1066 (like it is right now)
• When HIDING the component, we want the X position to be AT LEAST at 1366

If we wanted to see the X position of our component during the animation, we could add a label with the following formula:

$"X position is: {'Fluent2 Toast Notification_1'.X}"

⚠️ However, DO NOT HARDCODE the X position to 1366. You should grab the original formula from the screen Width:

Max(App.Width, App.MinScreenWidth)

With that being said, the following formula should go into the X property of the component:

If(
    ShowHideToast,
    Max(App.Width, App.MinScreenWidth) - 'Fluent2 Toast Notification_1'.Width * timerAnimation.Value/timerAnimation.Duration,
    (Max(App.Width, App.MinScreenWidth) - 'Fluent2 Toast Notification_1'.Width) + ('Fluent2 Toast Notification_1'.Width * timerAnimation.Value/timerAnimation.Duration)
)

Let’s check it out! 🥳

Close toast with timer or user action

Good work so far. Now we’d like the notification to close by itself after a certain period of time OR by the user clicking on the dismiss icon of our component.

Here comes our second timer. Add another timer onto the app, rename it to timerCloseToast, and set a duration of 3000 (=3 seconds) so we don’t wait forever!

We also want to timer to start when the toast is showing up, therefore set the Start property to:

If(ShowHideToast, true, false)

When it comes to the end of the timer duration, I can offer you 2 ways of animation 😎 Either we can have the toast notification to “just vanish”, OR we can have a smooth effect to go out of the screen.

👉 For a “just vanish” way out, enter the following formula on the OnTimerEnd property:

//DISAPPEAR BRUTALLY
UpdateContext({ShowHideToast: false});

👉 For a smoother way of getting out of the screen, enter the following instead:

Reset(timerAnimation); UpdateContext({StartTimer: false}); UpdateContext({StartTimer: true}); UpdateContext({ShowHideToast: false});

Our last thing to configure is the closing by user interaction. And if the user wants the notification to be out of the way, it has to be gone quick! Therefore, we can reuse the following formula in the OnToastCancel property of the component:

UpdateContext({ShowHideToast: false});

Housekeeping

You can amend the header and content body properties to whatever text you need!

That’s it!

Thanks for reading! 🙂