Sync status indicator

Shows whether the app is online, when it last synced and which changes are waiting, with a Sync now button and a spinner while it runs.

Overview

A status card for apps that work offline. It reads Connection.Connected and says Online or Offline, when the last sync was, and how many changes are waiting; the changes fold out as a list with what changed and when. Sync now is disabled while offline or busy, and a spinner shows while it runs.

The component doesn't sync anything by itself: it shows the changes you keep on the device, for example in a collection saved with SaveData, and runs your own sync from the button. A hidden timer keeps the "min ago" texts current.

When to use

Apps used on site with poor signal, which save changes locally and send them later.
On a settings or home screen, or in a side panel opened from a status icon.

When not to use

Apps that only work online: show an error when a save fails instead.
Model-driven or canvas apps with Dataverse offline profiles, which have their own sync status.

Controls used

Control	Version
GroupContainer	`1.5.0`
Gallery	`2.15.0`
Timer	`2.1.0`
ModernIcon	`1.1.1`
ModernText	`1.0.0`
ModernSpinner	`1.1.0`
ModernButton	`1.0.0`

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

- SyncStatusIndicatorRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =SyncStatusIndicatorStatus.Height + If(SyncStatusIndicatorToggle.Visible, 8 + SyncStatusIndicatorToggle.Height, 0) + If(SyncStatusIndicatorList.Visible, 8 + SyncStatusIndicatorList.Height, 0) + 28
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =8
      PaddingBottom: =12
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(440, Parent.Width)
    Children:
      - SyncStatusIndicatorSource:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Changes waiting to sync"
            Height: =0
            Items: |
              =Table(
                  {Title: "Inspection INS-1042", Change: "Status changed to Done", Changed: DateAdd(Now(), -6, TimeUnit.Minutes)},
                  {Title: "Finding: blocked exit", Change: "2 photos added", Changed: DateAdd(Now(), -14, TimeUnit.Minutes)},
                  {Title: "Checklist hall B", Change: "3 checks completed", Changed: DateAdd(Now(), -21, TimeUnit.Minutes)}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TabIndex: =0
            Visible: =false
      - SyncStatusIndicatorTimer:
          Control: Timer@2.1.0
          Properties:
            AutoStart: =true
            Duration: =30000
            OnTimerEnd: |
              =UpdateContext({locSyncStatusIndicatorNow: Now()})
            Repeat: =true
            Visible: =false
      - SyncStatusIndicatorStatus:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =44
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =12
            LayoutMinHeight: =44
            LayoutMinWidth: =120
          Children:
            - SyncStatusIndicatorIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: =SyncStatusIndicatorTitle.Text
                  Fill: =If(Connection.Connected, App.Theme.Colors.Lighter80, ColorFade(App.Theme.Colors.Darker70, 92%))
                  Height: =40
                  Icon: =If(locSyncStatusIndicatorBusy, "ArrowSync", Connection.Connected, "CheckmarkCircle", "Warning")
                  IconColor: =If(Connection.Connected, App.Theme.Colors.Primary, ColorFade(App.Theme.Colors.Darker70, 30%))
                  LayoutMinHeight: =40
                  LayoutMinWidth: =40
                  PaddingBottom: =9
                  PaddingLeft: =9
                  PaddingRight: =9
                  PaddingTop: =9
                  RadiusBottomLeft: =20
                  RadiusBottomRight: =20
                  RadiusTopLeft: =20
                  RadiusTopRight: =20
                  Width: =40
            - SyncStatusIndicatorTexts:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =42
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =0
                  LayoutMinHeight: =42
                  LayoutMinWidth: =80
                Children:
                  - SyncStatusIndicatorTitle:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =22
                        LayoutMinHeight: =22
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingTop: =0
                        Size: =14
                        Text: =If(locSyncStatusIndicatorBusy, "Syncing…", Connection.Connected, "Online", "Offline")
                        Wrap: =false
                  - SyncStatusIndicatorLast:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                        Height: =20
                        LayoutMinHeight: =20
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingTop: =0
                        Size: =12
                        Text: |
                          =With(
                              {m: DateDiff(Coalesce(locSyncStatusIndicatorLast, DateAdd(Now(), -2, TimeUnit.Minutes)), Coalesce(locSyncStatusIndicatorNow, Now()), TimeUnit.Minutes)},
                              "Last synced " & If(m < 1, "just now", m < 60, m & " min ago", "at " & Text(Coalesce(locSyncStatusIndicatorLast, Now()), "hh:mm"))
                          )
                        Wrap: =false
            - SyncStatusIndicatorSpinner:
                Control: ModernSpinner@1.1.0
                Properties:
                  AccessibleLabel: ="Syncing"
                  Height: =28
                  LayoutMinHeight: =28
                  LayoutMinWidth: =28
                  Visible: =locSyncStatusIndicatorBusy
                  Width: =28
            - SyncStatusIndicatorSync:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Secondary
                  DisplayMode: =If(Connection.Connected && Not(locSyncStatusIndicatorBusy), DisplayMode.Edit, DisplayMode.Disabled)
                  Height: =36
                  Icon: ="ArrowSync"
                  LayoutMinHeight: =36
                  LayoutMinWidth: =96
                  OnSelect: |
                    =UpdateContext({locSyncStatusIndicatorBusy: true});
                    Notify("Synced (example only).", NotificationType.Success);
                    UpdateContext({locSyncStatusIndicatorBusy: false, locSyncStatusIndicatorLast: Now()})
                  Size: =14
                  Text: ="Sync now"
                  Width: =116
      - SyncStatusIndicatorToggle:
          Control: ModernButton@1.0.0
          Properties:
            AccessibleLabel: =Self.Text & If(locSyncStatusIndicatorOpen, ", expanded", ", collapsed")
            Align: =Align.Left
            AlignInContainer: =AlignInContainer.Stretch
            Appearance: =ButtonAppearance.Subtle
            Height: =32
            Icon: =If(locSyncStatusIndicatorOpen, "ChevronUp", "ChevronDown")
            LayoutMinHeight: =32
            LayoutMinWidth: =120
            OnSelect: |
              =UpdateContext({locSyncStatusIndicatorOpen: Not(locSyncStatusIndicatorOpen)})
            Size: =13
            Text: =SyncStatusIndicatorSource.AllItemsCount & If(SyncStatusIndicatorSource.AllItemsCount = 1, " change", " changes") & If(Connection.Connected, " waiting to sync", " saved on this device")
            Visible: =SyncStatusIndicatorSource.AllItemsCount > 0
      - SyncStatusIndicatorList:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Changes waiting to sync"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            Items: =SyncStatusIndicatorSource.AllItems
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =52
            Visible: =locSyncStatusIndicatorOpen && SyncStatusIndicatorSource.AllItemsCount > 0
          Children:
            - SyncStatusIndicatorDot:
                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
                  Width: =8
                  X: =12
                  Y: =14
            - SyncStatusIndicatorItem:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FontWeight: =FontWeight.Semibold
                  Height: =22
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =ThisItem.Title
                  Width: =Parent.TemplateWidth - 112
                  Wrap: =false
                  X: =28
                  Y: =6
            - SyncStatusIndicatorChange:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Color: =ColorFade(App.Theme.Colors.Darker70, 40%)
                  Height: =20
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =12
                  Text: =ThisItem.Change
                  Width: =Parent.TemplateWidth - 112
                  Wrap: =false
                  X: =28
                  Y: =27
            - SyncStatusIndicatorWhen:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Right
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =22
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =12
                  Text: =DateDiff(ThisItem.Changed, Coalesce(locSyncStatusIndicatorNow, Now()), TimeUnit.Minutes) & " min ago"
                  Width: =84
                  Wrap: =false
                  X: =Parent.TemplateWidth - 88
                  Y: =6

Make it yours

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

`Items` on `SyncStatusIndicatorSource`

The changes saved on the device and not yet sent, with the columns Title, Change and Changed.

In the YAML

YAML

Items: |
  =Table(
      {Title: "Inspection INS-1042", Change: "Status changed to Done", Changed: DateAdd(Now(), -6, TimeUnit.Minutes)},
      {Title: "Finding: blocked exit", Change: "2 photos added", Changed: DateAdd(Now(), -14, TimeUnit.Minutes)},
      {Title: "Checklist hall B", Change: "3 checks completed", Changed: DateAdd(Now(), -21, TimeUnit.Minutes)}
  )

Your version

YAML

Items: =colOutbox

`OnSelect` on `SyncStatusIndicatorSync`

Sends the waiting changes. Keep setting locSyncStatusIndicatorBusy and locSyncStatusIndicatorLast around your own sync.

In the YAML

YAML

OnSelect: |
  =UpdateContext({locSyncStatusIndicatorBusy: true});
  Notify("Synced (example only).", NotificationType.Success);
  UpdateContext({locSyncStatusIndicatorBusy: false, locSyncStatusIndicatorLast: Now()})

Your version

YAML

OnSelect: |
  =UpdateContext({locSyncStatusIndicatorBusy: true});
  ForAll(colOutbox As c, Patch(Inspections, LookUp(Inspections, ID = c.ID), {Status: c.Status}));
  Clear(colOutbox);
  SaveData(colOutbox, "outbox");
  UpdateContext({locSyncStatusIndicatorBusy: false, locSyncStatusIndicatorLast: Now()})

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
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, SyncStatusIndicatorRoot, with all its controls inside.
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.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Sync status indicator

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on SyncStatusIndicatorSource

OnSelect on SyncStatusIndicatorSync

How to paste

When Studio flags a control version

`Items` on `SyncStatusIndicatorSource`

`OnSelect` on `SyncStatusIndicatorSync`