How To Notifying User that New Data is Available

In some circumstances, updating the data underneath a user would be disorienting. Instead you could notify them that new data exists, and let them chose when to refresh.

This blog is intended to show you a technique for doing so.

Demo Specifics:

Example: An employer is running a town hall and wants employees to submit their questions in a way that other employees can read them, and up-vote them. This allows the questions to be crowd sourced to determine which questions the employer should address at the end of the presentation.
This solution allows users to be notified that they can refresh to see new questions. This option rather than having the data update beneath them and shift while they are scrolled and reading.

Back End Used: SPO List

End Product: Point of interest with this blog is the refresh icon shown in the red box.

Steps at a high level:

1. Add a second connector to your Data Source
2. Add a timer which updates your secondary copy on a fixed cadence
3. Add to that logic, comparison logic to see if your data source changed
4. Add UI which is shown only when that comparison logic indicates that new data exists

Step 1: Add a second connector to your Data Source

The steps are the same as creating the first connection, please see the following blog for details: https://powerapps.microsoft.com/en-us/tutorials/add-data-connection/

Once you add a second connection to your data, you will see something like the following under your data sources.

Step 2: Add a timer which updates your secondary copy on a fixed cadence

Timers are controls you can use you make things happen on a cadence, or generally to make the app do something at the end of the timer.

For verbose information about timers, please see this blog: https://powerapps.microsoft.com/en-us/tutorials/control-timer/

Timers have to be on the active screen in order to run, so you cant hide them away on other screens. But they don’t have to be visible.

Below are the settings used for our timer:

— Name your timer —

Its good to name all your controls so they are easily found/used later.

I called mine backupCheck

— Make it run —

Duration: 30000 //to refresh the backup every 30 seconds

Repeat: True //this allows the timer to loop over and over

AutoStart: True //to have the timer start when the screen becomes visible

— Make it hidden —

Visible: false

X: 0

Y: 0

Width: 0

Height: 0

Tip: I like to make non-visible things 0 on size and placement vectors as well, so that they don’t interfere with design time selection

Tip: You can watch the timer for your testing even with the timer hidden by looking at the Properties pane on the right, while the timer is selected

— Make it update the secondary connector for your data source —

On timer End: Refresh(QnA_1)

Step 3: Add to that logic, comparison logic to see if your data source changed

So now we have the timer hidden and running, updating the second data copy.

Now lets add the logic to compare the two copies of the data and see if something updated.

In my example, I expect to only have additive items, so my logic simply compares count. You may require more complex comparison logic.

— at the load time of the screen, set up the data sources and variables

We will use Global Variables for measuring if new data exists.

This means setting the values when we are ready to check, they wont update automatically like the rest of the values in the PA which are model based

(for more information about the model based approach of PA see Deep Dive on Functions)

(for more information about global variables see https://powerapps.microsoft.com/en-us/tutorials/working-with-variables/)

— setup on load–

onVisible:

Refresh(QnA); Refresh(QnA_1); Set(Count_Questions, CountRows(Filter(QnA, isApprovedText=”Yes”))); Set(Count_Backup, CountRows(Filter(QnA_1, isApprovedText=”Yes”))); Set(Count_Diff, Abs(Count_Backup-Count_Questions))

–check it out —

You can view your variable values in the file menu as shown here. At this point, because you have just refreshed both, you should have Count_Diff = 0

–augment timer to update the variables–

On timer End: Refresh(QnA_1); Set(Count_Backup, CountRows(Filter(QnA_1, isApprovedText=”Yes”))); Set(Count_Diff, Abs(Count_Backup-Count_Questions))

You’ve done it! Except you would only know that by looking at the variables page. To show to the user, finish with step 4.

 

Step 4: Add UI which is shown only when that comparison logic indicates that new data exists

— Add your UI —

I have a circle (called diffCircle) and a text box (called diffText)

I also have a refresh icon (called refreshIcon) underneath these two objects

— Make them only visible when there is a diff (be sure set for both the circle and the text objects) —

Visible: If(Count_Diff<=0, false, true)

— Make the text of the text box (diffText) show the number —

Text: If(Count_Diff<9, Count_Diff, “9+”)

— Reset these values when the user hits refresh (refreshIcon) after refresh —

OnSelect: Refresh(QnA); Refresh(QnA_1); Set(Count_Questions, CountRows(Filter(QnA, isApprovedText=”Yes”))); Set(Count_Backup, CountRows(Filter(QnA_1, isApprovedText=”Yes”))); Set(Count_Diff, Abs(Count_Backup-Count_Questions))

That’s It!

I hope this was helpful for you.