Integrate Your Custom Apps into the Chatter Publisher

1. Set Up the Composer Component

For the composer component, we created component, controller, helper, and style files.

Here’s the component markup in quotesCompose.cmp. In this file, we implement the lightning:availableForChatterExtensionComposer interface.

<aura:component implements="lightning:availableForChatterExtensionComposer">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <div class="container">
    	<span class="quote" aura:id="quote"></span>
        <span class="author" aura:id="author"></span>
        <lightning:button label="Get next Quote" onclick="{!c.getQuote}"/>
    </div>

</aura:component>

Use your controller and helper to initialize the composer component and to get the quote from a source. When you get the quote, 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.

getQuote: function(cmp, event, helper) {
    // get quote from the source
    var compEvent = cmp.getEvent("sendChatterExtensionPayload");
    compEvent.setParams({
        "payload" : "<payload object>",
        "extensionTitle" : "<title to use when extension is rendered>",
        "extensionDescription" : "<description to use when extension is rendered>"
    });
    compEvent.fire(); 
}

Add a CSS resource to your component bundle to style your composition component.

2. Set Up the Renderer Component

For the renderer component, we created component, controller, and style files.

Here’s the component markup in quotesRender.cmp. In this file, we implement the lightning:availableForChatterExtensionRenderer interface, which provides the payload as an attribute in the component.

<aura:component implements="lightning:availableForChatterExtensionRenderer">
    <aura:attribute name="_quote" type="String"/>
    <aura:attribute name="_author" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <div class="container">
    	<span class="quote" aura:id="quote">{!v._quote}</span>
        <span class="author" aura:id="author">--- {!v._author} ---</span>
    </div>
</aura: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. Add a CSS resource to your renderer bundle to style your renderer component.

3. Set Up a New ChatterExtension Entity

After you create these components, open Postman or any tool that can make SOAP and REST API calls. Make sure that you’re using at least API version 41.0. Log in to your org, and create a ChatterExtension entity using the Salesforce SOAP API.

Provide values for ChatterExtension fields (see ChatterExtension for values and descriptions).

Get the IconId for the file asset. Go to Postman, or your preferred tool, and make a new POST request for creating a file asset with a fileId from your org. The filepath is /services/data/v41.0/connect/files/<fileid>/asset. Replace the version number with the current version.

4. Package Your App and Upload It to AppExchange

The Second-Generation Managed Packaging Developer Guide provides useful information about packaging your apps and publishing them on AppExchange.

5. Select the Apps to Embed in the Chatter Publisher

An admin page is available in each Experience Builder site 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 site, go to Experience Workspaces and open the Administration page. Click Rich Publisher Apps to open the page.

After you move apps to the Selected Items column and click Save, the selected apps appear in the Chatter Publisher.