How to Display Unique Page Views in PowerApps

Introduction

We often see in many of the sites that the total page view count is shown. I have come across one of the use cases where I wanted to show how many times that page was visited by any user uniquely.

Scenario

We will see 1 scenario in the article.

Objective

The objective of this requirement is very demanding as it is often seen total number of views on the page and how many people provided their views on any article. We will keep patching the latest count to a list row and keep showing on the power apps.

Step 1. The list structure would look like below.

The list structure could be designed as per our needs. Here for the demo, I have created 2 different lists and shown the data with its list structure.

Article list structure

Article list content

The second list will save data from powerapps and the list structure looks like below.

Powerapps

Step 2. Design screen and form as per requirement.

The below screenshot shows all the articles that are entered, on clicking on articles, we can see the details of the article and all the views that we got on that article. To show all articles, I have taken gallery control.

Design screen

Below is the display form which shows the variable View value. Variable View value shows gallery-selected item details.

Variable View value

Step 3. Save the Logged User in a Global variable.

We keep logged-in user details in a global variable for performance improvement. Otherwise User().Email could directly be used wherever required.

Global variable

Step 4. Add a list of DataSource from SharePoint

Add PageViewCountItemWise List from SharePoint as DataSource.

So that the patch function can use this data source to store the views and show them back on the PowerApp.

DataSource

Step 5. Patch the count on the OnVisible Property of the page. Show unique total views on a page on powerapps or how many and who all people have seen/visited the page.

We will patch on OnVisible property. If it's first a first-time entry then the patch function will create a new record other it will not do anything because we are only showing a uniquely visited people list.

OnVisible Property

Note. OnVisible property only runs after the screen is loaded. We have to manually load the screen for the first time. Go to any other screen and come back to this screen to run the OnVisible property.

Step 6. Must run the App’s Run OnStart.

We must run the below property in case we do not see the values.

App’s Run OnStart

Step 7. Add a Label and show it on the screen.

Add a label and show the count on that label. To look better we can have an icon with attractive visuals.

Container we use to enhance the UI by selecting.

Add a label

Step 8. Add a container to show it on the screen who all have visited.

We add a container as shown above to make the glossy look. Drag and Drop the container below the text so that it looks like a good popup.

Add a container

Step 9. Add a cancel icon to hide the popup.

Step 10. Add a vertical Gallery to show people and associate the datasource.

Inside the vertical gallery, we will have only two controls, a separator and a Label to show people's names.

Add Datasource to the gallery. Delete all other controls that come inbuilt. When we delete other controls we get errors that are dependent on formulas, we need to correct the formula.

Add a vertical Gallery

Step 11. Correct the error that comes after deleting irrelevant controls.

Give Y=0 which fixes the error and delete the existing formula.

Formula

Step 12. Change Gallery Items property.

Change Gallery Items

Step 13. Verify hide and show variables properly.

On the Select of Visited People label the popup should show. On click of cancel it should hide. When we are coming from any other page or OnVisible property it should hide.

Verify hide

Bring the cancel icon forward otherwise, it remains visible and it is confusing because it is not clickable and the popup does not close.

So icon and gallery must be in the below order.

Step 14. Make PopUp look and feel attractive.

Container UI values

Gallery UI Values

Separator UI Values

Step 15. The gallery height is set to flexible.

Gallery height

Step 16. Container height is set to automatic Gallery height.

Container height

Conclusion

In the above example, we saw how could we represent unique people who visited a particular page. We also saw how to get the unique count of people who visited the page.