Bell Notifications Lightning Components

Question

I need to add bell notifications to a Community using Napili template.

I tried to search if there is an OOTB Lightning Component but I did not found anything.

Anyone knows if exists a open source or free bell notification component ?

Answer 1

You should be able to use lightning:icon in your component, as follows:

<lightning:icon iconName="utility:notification" />

This is also in the standard SLDS library if you're using the static resource version of SLDS, located under utility/notification.png or the svg version at /assets/icons/utility-sprite/svg/symbols.svg#notification

Answer 2

UPDATE:

Since Winter 17
forceCommunity:notifications https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_forceCommunity_notifications.htm#!

Finally, I found that what I wanted is something like this :

MARKUP

    <span class="counterLabelContainer" aura:id="divNotificationCount">
        <span class="counterLabel">{!v.unreadNotifications}</span>
    </span>            
</ui:button>

CONTROLLER

retrieveNotifications : function(objComponent) {
        var objControllerAction = null;
        var arrFeedElements = null;
        var intUnreadNotifications = 0;
        var objNotificationList = null;
        var strState = null;
        var objNotifications = null;
        var strHTML = null;

        objControllerAction = objComponent.get("c.getNotifications");
        objNotificationList = objComponent.get("v.NotificationElements");
        objControllerAction.setCallback(this, function(objResponse) {           
            strState = objResponse.getState();

            if (objComponent.isValid() && strState === "SUCCESS") {
                arrFeedElements = objResponse.getReturnValue();
                if(arrFeedElements != null && arrFeedElements.length != null) {
                    intUnreadNotifications = arrFeedElements.length;
                    objComponent.set("v.unreadNotifications", intUnreadNotifications);

                    objNotifications = objComponent.find("divNotificationCount");

                    if(intUnreadNotifications > 0) {
                        $A.util.removeClass(objNotifications, "counterLabelContainerHidden");
                        $A.util.addClass(objNotifications, "counterLabelContainer");

                        strHTML = '';
                        for(var intIndex = 0; intIndex < intUnreadNotifications; intIndex++) {
                            strHTML += this.createNotificationRow(arrFeedElements[intIndex]); 
                        }

                        document.getElementById('NotificationElements').innerHTML = strHTML;

                    }                 
                } 
            } else {
                console.log("Failed with state: " + strState);
            }
        });
        $A.enqueueAction(objControllerAction);
    },

APEX CALL

    @AuraEnabled
public static List<ConnectApi.FeedElement> getNotifications() {
    ConnectApi.Community objCommunity = null;
    CECC_Community_Settings__c objConfig = null;
    List<ConnectApi.FeedElement> lstNews = null;
    ConnectApi.FeedElementPage objPage = null;

    objConfig = CECC_HelperFunctions.retrieveConfig();
    objCommunity = CECC_HelperFunctions.retrieveCommunity(objConfig.Portal_Name__c);        

    objPage = ConnectApi.ChatterFeeds.getFeedElementsFromFeed(objCommunity.Id, ConnectApi.FeedType.News, 'me');

    if(objPage != null && objPage.elements != null && objPage.elements.size() > 0) {
        lstNews = objPage.elements;
    }

    return lstNews;
}  

UPDATE:

Since Winter 17
forceCommunity:notifications https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_forceCommunity_notifications.htm#!