Display Notification in Portal increases productivity and user can able to know the information instantly.
In this blog, I have made the Proof of Concept to display the notification counter in CRM Portal using Alert Subscription Entity(adx_alertsubscription).
Finally, the result will be showing the notification counter at the end of Primary Navigation.

Please follow the below steps:
1. Create a System View for Alert Subscription Entity with the given condition.

2. Create a new Entity list for Alert Subscription Entity name it as “Alert List” and also configure the Entity permission with Read , Append and Append to.

Filter Condition for Entity list:

Create a Workflow to Change the status and as on-demand.

Call the workflow in Entity list as shown below.

3. Save the Entity List and Assign to Web Page with the following configuration as shown below.

4. After Creating a Web Page and Create a Primary Navigation.


Save the Primary Navigation it will show like this after saving the navigation.

Now time to identify the control for Navigation using Chrome Browser. Open the Portal in chrome browser, press F12 Key and selection the control.

Now we have identified the control by copy selector CRM Portal navigation doesn’t have any proper HTML id assigned and it is the only possible way to identify the control.

Test the notification counter using chrome first before implementing: Now you can able to see the counter in Portal and it is time to implement in Portal from CRM where the value will be populated dynamically.

5. Create a Web Template name it as FetchxmlAlert and configure the Configure Fetch and output as “application/json“.
Reason for using JSON to expose the counter:
- Not Possible to use the Liquid Template fetchxml in Javascript.
- Gives flexibility to call the function using REST Operation.
Configuration for Web Template:

Click the below link to view or download the Code for FetchXML Feed Web Template:
fetchxml feed
6. Create a Page Template name it as Alert Counter Page Template

7. Create a Web page as below and assign the above Page Template

8. After configuring the JSON for Alert Counter and Signing into the portal with a user account which has permission to read the Alert Subscription entity. Test the JSON by entering URL.

9. In Web Template, open the Footer Web Template and paste the below code at the end of Web Template.
<script>
$(document).ready(function ()
{
alertcheck();
});
setInterval(function(){
alertcheck()}, 60000);
function alertcheck(){
$('#spancounter').remove();
$('#navbar > div.navbar-right.menu-bar > ul > li:nth-child(13) > a').append('<span id="spancounter" class="badge badge-notify"></span>');
// document ready
$.ajax({
method: "GET",
async:false,
url: "/alert-counter/"
})
.done(function(results) {
$.each(results, function(index, element) {
counterstring=element.count;
var counter = parseInt(counterstring);
$('#spancounter').text(counter);
});
});
}
</script>
Reason for using the code in the Footer Web Template:
jQuery doesn’t work with Header Template.
10. Create some Alert subscription records in CRM and set the Regarding Portal user contact lookup to display some alerts in Portal.
11. Now you can see the notification counter with an update value. Also, try to click the notification it will display the Alert List and select Mark as read it will reduce the counter.



Demo:

Some of the Feature of the Alert Notification:
1. A function will be running asynchronously so the user will be the notification if any new record created in CRM.
2. “Mark as Read” ensures that user has clicked the notification in Portal.
3.Works flawlessly in mobile tablet and desktop.
Hope you have enjoyed my blog. Please shared the post if you like it.

