Alerts & Dialogs

Alert Destructive Animated

Added Jun 23, 2026

An animated error alert: slides in on appear and shows a red progress bar sweeping left to right. Powered by two PA Timer controls inside the group.

Connection lost

Unable to reach the server. Check your internet connection and try again.

CopySnips Live Preview

How to Use

Paste the copied YAML into Power Apps Studio (Ctrl+V).
Set varAlertTitle and varAlertBody via context or global variables.
⚡ Create a boolean variable named varPlayAlertDestructive in your app.
⚡ Set varPlayAlertDestructive = true to trigger the animation: the alert slides in and the red bar fills over 4 seconds.
⚡ Set varPlayAlertDestructive = false to hide the alert and reset both timers. The next time you set it to true, the animation replays from the beginning.

Problem Solved

Provides a visually engaging error alert for Power Apps. The slide-in draws user attention, and the red progress bar can indicate a countdown before an automatic action (e.g., retry or redirect).

Integration

⚡ Animation is controlled entirely by the boolean variable varPlayAlertDestructive. Set it to true when an error occurs to show the alert with animation. Set it back to false to hide and reset. Both Timer controls (timAlertAnim, timAlertProgress) use Start: =varPlayAlertDestructive and Reset: =!varPlayAlertDestructive, so no manual timer wiring is needed.

- conAlertDestructiveAnim:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(239, 68, 68, 0.5)
      BorderThickness: =1
      Fill: =RGBA(255, 255, 255, 1)
      Height: =100
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Width: =502
      X: =100
      Y: =100
    Children:
      - timAlertProgress:
          Control: Timer@2.1.0
          Properties:
            Duration: =4000
            Height: =10
            Repeat: =false
            Reset: =!varPlayAlertDestructive
            Start: =varPlayAlertDestructive
            Visible: =false
            Width: =10
            X: =0
            Y: =0
      - rectAlertProgress:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(220, 38, 38, 1)
            Height: =3
            Width: =Parent.Width * Min(timAlertProgress.Value, 4000) / 4000
            X: =0
            Y: =Parent.Height - 3
      - icoAlertIcon:
          Control: Image@2.2.3
          Properties:
            Height: =16
            Image: ="data:image/svg+xml," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>")
            Width: =16
            X: =16
            Y: =20
      - lblAlertTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(220, 38, 38, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =24
            Size: =13
            Text: ="Connection lost"
            Width: =Parent.Width - 60
            X: =44
            Y: =16
      - lblAlertBody:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(220, 38, 38, 1)
            Font: =Font.'Open Sans'
            Height: =37
            Size: =12
            Text: ="Unable to reach the server. Check your internet connection and try again."
            Width: =Parent.Width - 60
            X: =44
            Y: =48

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide