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

Kapil May 24, 2020



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

Tags:

Post a Comment

5 Comments

  1. Salesforce DeveloperMay 28, 2020 at 9:02 PM

    I like your blog.
    Thanks for Sharing
    Salesforce Custom Application Development Services

    Good Post.

    ReplyDelete
  2. MdNoorMarch 7, 2021 at 6:01 AM

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

    ReplyDelete
  3. Rishi MehtaniNovember 28, 2022 at 7:47 AM

    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. KapilNovember 29, 2022 at 3:34 AM

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

      Delete