Chatter Rich Publisher Apps Example
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
({ 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.
|
1 2 3 |
<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.
|
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
|
1 |
Select Id , DeveloperName from AuraDefinitionBundle |
5. Set Up a New ChatterExtension Entity
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.
After you include the Rich Publisher Apps into the community, you can able to see the new icon as shown below image.
On click of the chatter publish action icon you can able to see the ratings. select the rating and click add to post on chatter.
References
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_integrate_customapps_to_publisher.htm
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/meta_chatterextensions.htm#meta_chatterextensions
https://developer.salesforce.com/docs/atlas.en-us.216.0.chatterapi.meta/chatterapi/connect_resources_files_asset.htm
