Tracking Visits and Visitor Details on PowerApps Page

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 a 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 power apps and the list structure looks like below.

Step 2. Design screen and form as per requirement.

Below screenshot shows all the articles which are entered, on click of 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.

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

Step 3. Save Logged in 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 where ever required.

Step 4. Add list DataSource from SharePoint.

Add PageViewCountItemWise List from SharePoint as DataSource.

So that the patch function can use this datasource to store the views and show it back on the PowerApp.

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

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

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 App’s Run OnStart.

We must run the below property in case, we are not seeing the values.

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

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

Container we use to enhance the UI by selecting.

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

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

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 names.

Add Datasource to gallery. Delete all other controls which comes in built. When we delete other controls we get error which are dependent formula, we need to correct the formula.

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

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

Step 12. Change Gallery Items property.

Step 13. Verify hide and show variables properly.

On 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.

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

So, the 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.

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

Conclusion

In 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.