Power Pages: Show Bell Icon in Header to display Notifications

To display a bell icon in the header of a Power Pages to indicate notifications, you can follow these steps:

Step 1: Create a Notification Entity

First, you need to create a table in Dataverse to store notification data. This table should include fields such as notification message, timestamp, status (read/unread), and any other relevant information.

Step 2: Add Bell Icon

Create a new link under Default or Primary Navigation weblink (depends upon which is being used in your Header Web Template) and add font awesome bell icon in Image URL field and check Display Image Only checkbox.

Step 3: Customize the Header Web Template

In your Power Pages site, design the header where you want to display the bell icon. To do that, go to Power Pages Management App > Click on Websites from left panel > Open website > Open Header web template. Here you have to do two things. First, retrieve notification count using Fetch XML and display the count on bell icon.

Retrieve Notification Count

Use Power Automate or a custom API or Fetch XML to retrieve the count of unread notifications for the current user from your notification entity. You can trigger this action when the portal page loads or when the user logs in. For demonstration, i am taking example of Fetch XML in Header Web Template.

{% assign currentDate = now | date: "yyyyMMddHHmmss" %}
{% assign conditionCache = ' <condition attribute="subject" operator="ne" value="' | append: currentDate | append: '" />' %}
{% fetchxml NotificationQuery %}
<fetch version="1.0" mapping="logical" no-lock="false" distinct="true">
	<entity name="arp_notification">
	  <attribute name="statecode"/>
	  <attribute name="activityid"/>
	  <attribute name="subject"/>
	  <attribute name="createdon"/>
          <order attribute="subject" descending="false"/>
	  <attribute name="regardingobjectid"/>
	  <attribute name="statuscode"/>
	  <filter type="and">
          <filter type="or">
           <condition attribute="arp_markasread" operator="eq" value="0" />
       	  </filter>
	   {{ conditionCache }} 
	  </filter>
	</entity>
</fetch>
{% endfetchxml %}

Display Notification Count Badge

Display the count of unread notifications next to the bell icon. You can use a label or span Html element to display the count and position it appropriately next to the bell icon.

 <span class="badge">{% if NotificationQuery.results.entities.size > 0 -%}{{NotificationQuery.results.entities.size}}{%- endif -%}</span>

Step 6: Notification Popup

Implement a popup or dropdown menu that appears when the user clicks on the bell icon. This popup should display a list of notifications, including their messages and timestamps. You can design this popup using components like galleries or data tables.

Step 7: Mark Notifications as Read

Implement functionality to mark notifications as read when the user views them in the popup. This ensures that the count of unread notifications is updated accordingly.

Step 8: Real-time Updates (Optional)

If you want real-time updates for notifications (similar to Facebook), you can use technologies like SignalR or Power Automate Cloud Flows to push notifications to the portal in real-time whenever a new notification is added.

Summary

By following these steps, you can create a bell icon in the header of your Power Apps portal page to display notifications, similar to how it’s done on Facebook. Users can click on the bell icon to view their notifications, and the count of unread notifications is dynamically updated as new notifications are received.