Custom Aura Feed Component | forceChatter:feed | Chatter in Salesforce




Hello guys, 

In this article I will create a custom aura feed component with two picklists to select Group and then based on the Group selection, select user inside that Group and display the chatter of that particular user.

Please follow the code below : 

FeedComponent.cmp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<aura:component controller="feedComponentCTRL" implements="force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="options" type="List" />
    <aura:attribute name="type" type="String" default="News" description="The type of feed" access="GLOBAL"/>
    <aura:attribute name="types" type="String[]"
                    default="Bookmarks,Company,DirectMessages,Feeds,Files,Filter,Groups,Home,Moderation,Mute,News,PendingReview,Record,Streams,To,Topics,UserProfile"
                    description="A list of feed types"/>
    <div class="slds-grid slds-gutters">
        <div class="slds-col">
            <p style="font-size:larger; color:black; font-weight:bold">Groups</p>
            <ui:inputSelect aura:id="Groups" class="slds-input" change="{!c.onGroupChanged}"/>
        </div>
        <div class="slds-col">
            <p style="font-size:larger; color:black; font-weight:bold">Users</p>
            <ui:inputSelect aura:id="Users" class="slds-input" change="{!c.onUserChanged}"/>
        </div>
    </div>
    <br/>
  
     <div aura:id="feedContainer" class="feed-container">
        <forceChatter:feed />
    </div>
</aura:component>

FeedComponentController.js
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
({
    // Handle component initialization
    doInit : function(component, event, helper) {
        helper.fetchPickListVal(component);
    },

  
    onGroupChanged : function(component, event, helper) {
        var groupId='';
        var value = component.find("Groups").get("v.value");
        var action = component.get("c.getGroupID");
        action.setParams({
            "groupName": value
        });
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                console.log('###Success');
                groupId = response.getReturnValue();
                console.log('###Group ID : '+groupId);
                //
                //
                var opts = [];
                var action1 = component.get("c.getGroupUsers");
                action1.setParams({
                    "groupId": groupId
                });
                action1.setCallback(this, function(response1) {
                    if (response1.getState() == "SUCCESS") {
                        //
                        //
                        var allValues = response1.getReturnValue();
                        if (allValues != undefined && allValues.length > 0) {
                            opts.push({
                                class: "optionClass",
                                label: "--- None ---",
                                value: ""
                            });
                        }
                        for (var i = 0; i < allValues.length; i++) {
                            opts.push({
                                class: "optionClass",
                                label: allValues[i],
                                value: allValues[i]
                            });
                        }
                        component.find("Users").set("v.options", opts);
                        //
                        //
                        //
                    }
                    else{
                        var errors = response1.getError();
                        console.log('###Error'+errors[0].message);
                    }
                });
                $A.enqueueAction(action1);
                //
                //
                //
            }
            else{
                var errors = response.getError();
                console.log('###Error'+errors[0].message);
            }
        });
        $A.enqueueAction(action);
    },
    onUserChanged : function(component, event, helper){
        var value = component.find("Users").get("v.value");
        var action = component.get("c.getUserId");
        action.setParams({
            "userName": value
        });
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                value = response.getReturnValue();
                //
                //
                var type = component.get("v.types");
                var types = component.get("v.types");
                var feedContainer = component.find("feedContainer");
                var feedContainers=[];
                //  for(var i=0; i<component.get("v.userIds").length; i++){
                for (var j = 0; j < types.length; j++) {
                    // console.log('!!!'+component.get("v.userIds["+i+"]")+'-'+types[j]);
                    $A.createComponent("forceChatter:feed", {"type": types[j], "subjectId": value}, function(feed) {
                        feedContainers.push(feed);
                    });
                }
                //}
                feedContainer.set("v.body", feedContainers);
                //
                //
            }
            else{
                var errors = response.getError();
                console.log('###Error'+errors[0].message);
            }
        });
        $A.enqueueAction(action);
    }
})


FeedComponentHelper.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
({
	fetchPickListVal: function(component, elementId, plType) {
        var action = component.get("c.getGroups");
        var opts = [];
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                var allValues = response.getReturnValue();
                if (allValues != undefined && allValues.length > 0) {
                    opts.push({
                        class: "optionClass",
                        label: "--- None ---",
                        value: ""
                    });
                }
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass",
                        label: allValues[i],
                        value: allValues[i]
                    });
                }
                component.find("Groups").set("v.options", opts);
            }
            else{
                var errors = response.getError();
                console.log('###Error'+errors[0].message);
            }
        });
        $A.enqueueAction(action);
    }
})



feedComponentCTRL.apxc
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public class feedComponentCTRL {
    @AuraEnabled
    public static List < String > getGroups() {
        String userId=UserInfo.getUserId();
        List<String> grpList = new List<String>();
        List<CollaborationGroup> grp = [select name from CollaborationGroup where CreatedById=:userId];
        for(CollaborationGroup s:grp){
            grpList.add(s.name);
        }
        return grpList;
    }
    @AuraEnabled
    public static String getGroupID(String groupName) {
        List<CollaborationGroup> grp = [select Id from CollaborationGroup where Name=:groupName limit 1];
        return grp[0].Id;
    }
    @AuraEnabled
    public static String getUserId(String userName) {
        List<User> u = [select Id from User where Name=:userName limit 1];
        return u[0].Id;
    }  
    @AuraEnabled
    public static List<String> getGroupUsers(String groupId) {
        List<String> usersIdsInGroup= new List<String>();
        List<CollaborationGroupMember> groupMembers=[Select Id, memberid, Member.Name, CollaborationGroupId From CollaborationGroupMember where CollaborationGroupId=:groupId];
        system.debug('### groupMembers size: '+groupMembers.size());
        for(CollaborationGroupMember gm : groupMembers)
        {
            usersIdsInGroup.add(gm.Member.Name);
        }
        return usersIdsInGroup;
    }
}

Output

Salesforce Bolt

Post a Comment

5 Comments

  1. You need to build a custom feed , while edit comment you should be able to attach file and then post

    ReplyDelete
  2. Hello Kapil, Thanks for sharing this example. It is really helpful. However, when I am setting the type to "Email MessageEvent" or any other type other than "Record" it isn't showing any results. Any idea on what could be causing this? Thanks in advance. :)

    Rishi

    ReplyDelete
    Replies
    1. Well, it's a very old post. Need a deeper analysis!

      Delete