FeedbackCanvas appIntermediate

Notification center

A panel of notifications with type icons, unread dots and count, an All or Unread filter, mark-as-read on tap and a Mark all as read button.

Notification center in Power Apps Studio
Version
1.0.0
Updated
Verified in Studio
Not yet
Tags
notificationsinboxunreadalerts

Overview

A notification center for apps that tell people about overdue work, replies and changes. The header shows the number of unread notifications and a Mark all as read button; two pills switch between all notifications and unread ones. Each notification has a tile with an icon for its type, a title, a one-line message and how long ago it arrived.

Unread notifications have a tinted background, a bold title and a dot. Selecting one marks it as read. In the example the read state lives in locNotificationCenterRead; with your data, patch a Read column instead. When the Unread filter has nothing left, the panel says you're all caught up.

When to use

  • Behind the bell icon of an app header, in a side panel or on its own screen.
  • Up to about twenty recent notifications.

When not to use

  • Messages that need action right now: use an alert banner on the screen they concern.
  • Confirming an action people just took: use a toast.

Controls used

ControlVersion
GroupContainer1.5.0
ModernText1.0.0
ModernBadge1.0.0
ModernButton1.0.0
Gallery2.15.0
ModernIcon1.1.1

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml
- NotificationCenterRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =Color.White
      Height: =NotificationCenterHeader.Height + NotificationCenterFilters.Height + If(NotificationCenterList.Visible, NotificationCenterList.Height, NotificationCenterEmpty.Height) + 2 * 8 + 32
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =8
      PaddingBottom: =12
      PaddingLeft: =16
      PaddingRight: =12
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(440, Parent.Width)
    Children:
      - NotificationCenterHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =32
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =32
            LayoutMinWidth: =120
          Children:
            - NotificationCenterTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FontWeight: =FontWeight.Semibold
                  Height: =28
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingLeft: =4
                  PaddingTop: =0
                  Size: =16
                  Text: ="Notifications"
                  Width: =120
                  Wrap: =false
            - NotificationCenterUnread:
                Control: ModernBadge@1.0.0
                Properties:
                  AccessibleLabel: |
                    =CountRows(Filter(NotificationCenterSource.AllItems, Unread && Not("|" & Id & "|" in Coalesce(locNotificationCenterRead, "")))) & " unread"
                  Appearance: =BadgeAppearance.Filled
                  Content: |
                    =Text(CountRows(Filter(NotificationCenterSource.AllItems, Unread && Not("|" & Id & "|" in Coalesce(locNotificationCenterRead, "")))))
                  Height: =22
                  Intent: =BadgeIntent.Informative
                  LayoutMinHeight: =22
                  LayoutMinWidth: =24
                  Size: =12
                  Visible: |
                    =CountRows(Filter(NotificationCenterSource.AllItems, Unread && Not("|" & Id & "|" in Coalesce(locNotificationCenterRead, "")))) > 0
                  Width: =28
            - NotificationCenterSpacer:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =1
                  LayoutMinHeight: =1
                  LayoutMinWidth: =0
            - NotificationCenterMarkAll:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Subtle
                  Height: =32
                  Icon: ="CheckmarkCircle"
                  LayoutMinHeight: =32
                  LayoutMinWidth: =96
                  OnSelect: |
                    =UpdateContext({locNotificationCenterRead: Concat(NotificationCenterSource.AllItems, "|" & Id & "|")})
                  Size: =13
                  Text: ="Mark all as read"
                  Width: =152
      - NotificationCenterSource:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="All notifications"
            Height: =0
            Items: |
              =Table(
                  {Id: 1, Type: "Warning", Title: "Inspection overdue", Message: "Ladder certification at Office Leuven was due 9 Oct.", When: DateAdd(Now(), -12, TimeUnit.Minutes), Unread: true},
                  {Id: 2, Type: "Comment", Title: "Tom Janssens replied", Message: "Pallets are moved. Can someone check before Thursday?", When: DateAdd(Now(), -2, TimeUnit.Hours), Unread: true},
                  {Id: 3, Type: "Success", Title: "Report sent", Message: "The September safety report went to 4 site managers.", When: DateAdd(Now(), -5, TimeUnit.Hours), Unread: false},
                  {Id: 4, Type: "Info", Title: "New checklist version", Message: "Fire safety checklist v3 is used for new inspections.", When: DateAdd(Now(), -26, TimeUnit.Hours), Unread: false}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TabIndex: =0
            Visible: =false
      - NotificationCenterFilters:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =36
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =6
            LayoutMinHeight: =36
            LayoutMinWidth: =120
          Children:
            - NotificationCenterAll:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: ="Show all notifications"
                  Appearance: =If(Coalesce(locNotificationCenterUnreadOnly, false), ButtonAppearance.Subtle, ButtonAppearance.Secondary)
                  Height: =30
                  LayoutMinHeight: =30
                  LayoutMinWidth: =48
                  OnSelect: |
                    =UpdateContext({locNotificationCenterUnreadOnly: false})
                  RadiusBottomLeft: =15
                  RadiusBottomRight: =15
                  RadiusTopLeft: =15
                  RadiusTopRight: =15
                  Size: =13
                  Text: ="All"
                  Width: =56
            - NotificationCenterUnreadOnly:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: ="Show unread notifications"
                  Appearance: =If(Coalesce(locNotificationCenterUnreadOnly, false), ButtonAppearance.Secondary, ButtonAppearance.Subtle)
                  Height: =30
                  LayoutMinHeight: =30
                  LayoutMinWidth: =48
                  OnSelect: |
                    =UpdateContext({locNotificationCenterUnreadOnly: true})
                  RadiusBottomLeft: =15
                  RadiusBottomRight: =15
                  RadiusTopLeft: =15
                  RadiusTopRight: =15
                  Size: =13
                  Text: ="Unread"
                  Width: =80
      - NotificationCenterList:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Notifications"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            Items: |
              =Filter(
                  AddColumns(
                      NotificationCenterSource.AllItems,
                      IsUnread,
                      Unread && Not("|" & Id & "|" in Coalesce(locNotificationCenterRead, ""))
                  ),
                  Not(Coalesce(locNotificationCenterUnreadOnly, false)) || IsUnread
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =80
            Visible: =Self.AllItemsCount > 0
          Children:
            - NotificationCenterRowFill:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =If(ThisItem.IsUnread, ColorFade(App.Theme.Colors.Lighter80, 40%), Color.Transparent)
                  Height: =Parent.TemplateHeight - 4
                  RadiusBottomLeft: =10
                  RadiusBottomRight: =10
                  RadiusTopLeft: =10
                  RadiusTopRight: =10
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =2
            - NotificationCenterIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: =ThisItem.Type
                  Fill: |
                    =Switch(
                        ThisItem.Type,
                        "Warning", RGBA(255, 244, 206, 1),
                        "Success", RGBA(223, 246, 221, 1),
                        App.Theme.Colors.Lighter80
                    )
                  Height: =36
                  Icon: |
                    =Switch(ThisItem.Type, "Warning", "Warning", "Success", "CheckmarkCircle", "Comment", "Chat", "Info")
                  IconColor: |
                    =Switch(
                        ThisItem.Type,
                        "Warning", RGBA(138, 90, 0, 1),
                        "Success", RGBA(16, 124, 16, 1),
                        App.Theme.Colors.Primary
                    )
                  PaddingBottom: =8
                  PaddingLeft: =8
                  PaddingRight: =8
                  PaddingTop: =8
                  RadiusBottomLeft: =10
                  RadiusBottomRight: =10
                  RadiusTopLeft: =10
                  RadiusTopRight: =10
                  Width: =36
                  X: =8
                  Y: =12
            - NotificationCenterItemTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text & If(ThisItem.IsUnread, ", unread", "")
                  FontWeight: =If(ThisItem.IsUnread, FontWeight.Semibold, FontWeight.Normal)
                  Height: =22
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =14
                  Text: =ThisItem.Title
                  Width: =Parent.TemplateWidth - 88
                  Wrap: =false
                  X: =52
                  Y: =8
            - NotificationCenterMessage:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Color: =ColorFade(App.Theme.Colors.Darker70, 30%)
                  Height: =20
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =ThisItem.Message
                  Width: =Parent.TemplateWidth - 88
                  Wrap: =false
                  X: =52
                  Y: =30
            - NotificationCenterTime:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =20
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =12
                  Text: |
                    =If(
                        DateDiff(ThisItem.When, Now(), TimeUnit.Minutes) < 60, DateDiff(ThisItem.When, Now(), TimeUnit.Minutes) & " min ago",
                        DateDiff(ThisItem.When, Now(), TimeUnit.Hours) < 24, DateDiff(ThisItem.When, Now(), TimeUnit.Hours) & " h ago",
                        Text(ThisItem.When, "d mmm")
                    )
                  Width: =Parent.TemplateWidth - 88
                  Wrap: =false
                  X: =52
                  Y: =52
            - NotificationCenterDot:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =App.Theme.Colors.Primary
                  Height: =8
                  RadiusBottomLeft: =4
                  RadiusBottomRight: =4
                  RadiusTopLeft: =4
                  RadiusTopRight: =4
                  Visible: =ThisItem.IsUnread
                  Width: =8
                  X: =Parent.TemplateWidth - 20
                  Y: =16
            - NotificationCenterOpen:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =ThisItem.Title & ". " & ThisItem.Message
                  Appearance: =ButtonAppearance.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: |
                    =UpdateContext({locNotificationCenterRead: Coalesce(locNotificationCenterRead, "") & "|" & ThisItem.Id & "|"})
                  Text: =""
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - NotificationCenterEmpty:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            Align: =Align.Center
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            Height: =64
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            Size: =14
            Text: ="You're all caught up"
            Visible: =Not(NotificationCenterList.Visible)

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

Items on NotificationCenterSource

The notifications, newest first, each with an Id, a Type (Warning, Success, Comment or Info), Title, Message, When and Unread. This gallery is hidden; the visible list and the count read it.

In the YAML

YAML
Items: |
  =Table(
      {Id: 1, Type: "Warning", Title: "Inspection overdue", Message: "Ladder certification at Office Leuven was due 9 Oct.", When: DateAdd(Now(), -12, TimeUnit.Minutes), Unread: true},
      {Id: 2, Type: "Comment", Title: "Tom Janssens replied", Message: "Pallets are moved. Can someone check before Thursday?", When: DateAdd(Now(), -2, TimeUnit.Hours), Unread: true},
      {Id: 3, Type: "Success", Title: "Report sent", Message: "The September safety report went to 4 site managers.", When: DateAdd(Now(), -5, TimeUnit.Hours), Unread: false},
      {Id: 4, Type: "Info", Title: "New checklist version", Message: "Fire safety checklist v3 is used for new inspections.", When: DateAdd(Now(), -26, TimeUnit.Hours), Unread: false}
  )

Your version

YAML
Items: |
  =ForAll(
      Sort(Filter(Notifications, Recipient = User().Email), Created, SortOrder.Descending) As n,
      {Id: n.ID, Type: n.Type, Title: n.Title, Message: n.Message, When: n.Created, Unread: Not(n.Read)}
  )

OnSelect on NotificationCenterOpen

Mark the notification as read and open what it is about. The example only keeps read notifications in a variable.

In the YAML

YAML
OnSelect: |
  =UpdateContext({locNotificationCenterRead: Coalesce(locNotificationCenterRead, "") & "|" & ThisItem.Id & "|"})

Your version

YAML
OnSelect: |
  =Patch(Notifications, LookUp(Notifications, ID = ThisItem.Id), {Read: true});
  Navigate(InspectionScreen, ScreenTransition.None)

Fill on NotificationCenterIcon

The tile colour per type. Warning and Success use hard-coded amber and green tints, with matching IconColor; change both to suit your theme.

In the YAML

YAML
Fill: |
  =Switch(
      ThisItem.Type,
      "Warning", RGBA(255, 244, 206, 1),
      "Success", RGBA(223, 246, 221, 1),
      App.Theme.Colors.Lighter80
  )

Your version

YAML
Fill: =Switch(ThisItem.Type, "Warning", RGBA(255, 237, 213, 1), "Success", RGBA(220, 252, 231, 1), App.Theme.Colors.Lighter80)

How to paste

  1. Open your app in Power Apps Studio.
  2. Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
  3. Copy the YAML with the Copy button above the code.
  4. In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, NotificationCenterRoot, with all its controls inside.
  5. Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.