Seen by people on the page load in powerapps.

Introduction

The total page view count is frequently displayed on numerous websites. In one of my use cases, I needed to display the unique number of times each user viewed the page.

Scenario

We will see 1 scenario in the article.

Objective

This requirement's goal is extremely difficult because it frequently displays the overall number of views on the page as well as the number of users who have left comments on any given article. We'll continue to patch the most recent count to a list row and display it on the powerapps.

Step 1. The list structure would look like below.

A list structure might be created based on our requirements. I've made two distinct lists here for the experiment, and the data is displayed along with its list structure.

Article list structure

List structure

Article list content

list content

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

Settings

Step 2. Design screen and form as per requirement.

The snapshot below displays every article that has been submitted. By selecting an item, we can check its details as well as the number of views it has received. I've taken control of the gallery so that it displays all items.

Design screen

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

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(). The 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 the patch function can use this data source to store the views and show it back on the PowerApp.

PageView

Step 5. Adjust the page's OnVisible Property count. Display the total number of unique views for a page on PowerApps, or the number and identity of visitors.

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.

PowerApps

NOTE. After the screen loads, the OnVisible attribute activates. For the first time, we have to manually load the screen. To use the OnVisible attribute, navigate to any other screen and then return to this one.

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

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

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.

Attractive visuals

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.

Container

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

Hide

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

There will only be two controls in the vertical gallery: a separator and a label that displays the names of the persons.

Include Datasource in the gallery. Eliminate every other built-in control. We see errors when we remove additional controls, indicating that the formula is reliant and has to be corrected.

Data Source

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

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

Irrelevant controls

Step 12. Change Gallery Items property.

Items property

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.

Visible property

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.

Order

Step 14. Make PopUp look and feel attractive.

Container UI values

Container UI

Gallery UI Values

UI Values

Separator UI Values

Separator UI

Step 15. The gallery height is set to flexible.

Flexible

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

Container height

Conclusion

We showed in the example above how we may represent individual visitors to a specific page. Additionally, we learned how to obtain the unique number of visitors to the website.