Chatter Rich Publisher Apps Example

By Raj Vakati December 2, 2018 Lightning 0 Comments

Use the Chatter Rich Publisher Apps API to integrate your custom apps into the Chatter publisher. The Rich Publisher Apps API enables developers to attach any custom payload to a feed item. Rich Publisher Apps uses lightning components for composition and rendering. Salesforce provides two lightning interfaces and a lightning event to assist with integration. Rich Publisher Apps are available to Lightning communities in topics, group, and profile feeds and indirect messages. Use the lightning:availableForChatterExtensionComposer interface to integrate your custom apps into the Chatter publisher and place the custom app’s payload in the feed. This interface is available in Lightning communities. Use the lightning:availableForChatterExtensionRenderer interface to integrate your custom apps into the Chatter publisher and place the custom app’s payload in the feed. This interface is available in Lightning communities. The lightning:availableForChatterExtensionComposer interface works with the lightning:availableForChatterExtensionRenderer interface and the lightning:sendChatterExtensionPayload event to integrate your custom apps into the Chatter publisher and to render the app’s payload in the feed.

1. Set Up the Composer Component

For the composer component, we created the component, controller, helper, and style files. Here is the component markup in compose.cmp. In this file, we implement the lightning:availableForChatterExtensionComposer interface.

<aura:component implements="lightning:availableForChatterExtensionComposer">
    <aura:attribute name="options" type="List" default="[
                                                        {'label': 'Gold Badge', 'value': 'https://img.icons8.com/dusk/50/000000/prize.png'},
                                                        {'label': 'Start', 'value': 'https://img.icons8.com/color/50/000000/sheriff.png'},
                                                        {'label': 'Best Seller', 'value': 'https://img.icons8.com/dusk/50/000000/best-seller.png'},
                                                        {'label': 'Start Rating', 'value': 'https://img.icons8.com/dusk/50/000000/star.png'},
                                                        {'label': 'Down Rating', 'value': 'https://img.icons8.com/flat_round/50/000000/thumbs-down.png'} ,
                                                        {'label': 'Up Rating', 'value': 'https://img.icons8.com/color/50/000000/facebook-like.png'} 
                                                        ]"/>
    <aura:iteration items="{!v.options}" var="item">
        <lightning:buttonIcon size="medium"  value="{!item.value}" title="{!item.label}" onclick="{! c.handleClick }" variant="brand"  />
    </aura:iteration>
    
</aura:component>

<aura:component implements="lightning:availableForChatterExtensionComposer">

<aura:attribute name="options" type="List" default="[

{'label': 'Gold Badge', 'value': 'https://img.icons8.com/dusk/50/000000/prize.png'},

{'label': 'Start', 'value': 'https://img.icons8.com/color/50/000000/sheriff.png'},

{'label': 'Best Seller', 'value': 'https://img.icons8.com/dusk/50/000000/best-seller.png'},

{'label': 'Start Rating', 'value': 'https://img.icons8.com/dusk/50/000000/star.png'},

{'label': 'Down Rating', 'value': 'https://img.icons8.com/flat_round/50/000000/thumbs-down.png'} ,

{'label': 'Up Rating', 'value': 'https://img.icons8.com/color/50/000000/facebook-like.png'}

]"/>

<aura:iteration items="{!v.options}" var="item">

<lightning:buttonIcon size="medium" value="{!item.value}" title="{!item.label}" onclick="{! c.handleClick }" variant="brand" />

</aura:iteration>

</aura:component>

Use your controller and helper to initialize the composer component and to get the rating from a source. Once you get the rating, fire the event sendChatterExtensionPayload. Firing the event enables the Add button so the platform can associate the app’s payload with the feed item. You can also add a title and description as metadata for the payload. The title and description are shown in a non-Lightning context, like Salesforce Classic.

({
    handleClick : function (cmp, event, helper) {
        var lratings =event.getSource().get("v.label");    
        var compEvent = cmp.getEvent("sendChatterExtensionPayload");
        compEvent.setParams({
            "payload" : lratings,
            "extensionTitle" : "Selected Rating",
            "extensionDescription" : "Selected Rating"
        });
        compEvent.fire(); 
    }
    
})

({

handleClick : function (cmp, event, helper) {

var lratings =event.getSource().get("v.label");

var compEvent = cmp.getEvent("sendChatterExtensionPayload");

compEvent.setParams({

"payload" : lratings,

"extensionTitle" : "Selected Rating",

"extensionDescription" : "Selected Rating"

});

compEvent.fire();

}

})

2. Set Up the Renderer Component

Here is the component markup in Render.cmp. In this, we implement the lightning:availableForChatterExtensionRenderer interface, which provides the payload as an attribute in the component. You have a couple of ways of dealing with the payload. You can use the payload directly in the component {!v.payload}. You can use your controller to parse the payload provided by the lightning:availableForChatterExtensionRenderer interface and set its attributes yourself.

<aura:component implements="lightning:availableForChatterExtensionRenderer">
    {!v.payload}
 </aura:component>

<aura:component implements="lightning:availableForChatterExtensionRenderer">

{!v.payload}

</aura:component>

3. Get the Asset Id

You need to get the asset id that shows as a charter extension icon. Go and upload the image in files as shown below

Get the File Id from the URL. After that Use the below Rest URI to get the Asset Id.

/services/data/v43.0/connect/files/0691U000000Lup8/asset

1	/services/data/v43.0/connect/files/0691U000000Lup8/asset

Go to Workbench > utilities > REST Explorer and make a new POST request for creating a file asset with a file Id from your Org.

4. Get Renderer and Composer Component Ids

You need to get the component composer and render record ids to setup the Chatter Publisher. Use below SOQL

Select Id , DeveloperName from AuraDefinitionBundle

1	Select Id , DeveloperName from AuraDefinitionBundle

5. Set Up a New ChatterExtension Entity

ChatterExtension represents the metadata used to describe a Rich Publisher App that’s integrated with the Chatter publisher. Here is the key metadata about chatter extension.

Not go to Workbench Make sure that you’re using at least API version 41.0. Log in to your org, and create a ChatterExtension entity.

From the Data menu, select Insert.

In the Value column, provide values for charter extension fields. click confirm insert.

6. Select the Apps to Embed in the Chatter Publisher

An admin page is available in each community for selecting and arranging the apps to show in the Chatter publisher. Select up to five apps, and arrange them in the order you like. The order you set here controls the order the app icons appear in the publisher. In your community, go to Community Workspaces and open the Administration page. Click Rich Publisher Apps to open the page.