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 structure]()
Article list content
![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.
![Add a cancel icon]()
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.
![Cancel icon]()
Step 14. Make PopUp look and feel attractive.
Container UI values
![Container UI values]()
Gallery UI Values
![Gallery UI Values]()
Separator 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.