Skip to content

CRM Portal Notification Counter

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.

image001

Please follow the below steps:

1. Create a System View for Alert Subscription Entity with the given condition.

image002

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.

image003

Filter Condition for Entity list:

image004

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

image005

Call the workflow in Entity list as shown below.

image006

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

image007

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

image008

image009

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

image010

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

image011

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.

image012

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.

image013

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:

fetchxml

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

image014

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

image015

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.

image016

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.

image017

image018

image019

Demo:

image020

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.

Sathis Kumar originally posted this article on 21 January 2018 at 9:05 AM.

Leave a Reply