Integrate Your Custom Apps into the Chatter Publisher (Pilot)

Use the Chatter Rich Publisher Apps API to integrate your custom apps into the Chatter publisher. Rich Publisher Apps enables developers to attach any custom payload to a feed item. Rich Publisher Apps uses lightning components for composition and rendering. We provide two lightning interfaces and a lightning event to assist with integration.

Use the lightning:availableForChatterExtensionComposer and lightning:availableForChatterExtensionRenderer interfaces with the lightning:sendChatterExtensionPayload event to integrate your custom apps into the Chatter publisher and carry your apps’ payload into a Chatter feed.

Note

Note

We provide Chatter Rich Publisher Apps to selected customers through a pilot program that requires agreement to specific terms and conditions. Rich Publisher Apps is subject to change and isn’t generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. We can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Example of a Custom App Integrated into a Chatter Publisher

This example shows a Chatter publisher with three custom app integrations, a video meeting app (1), an emoji app (2), and an app for selecting a daily quotation (3).Three apps integrated into the Chatter publisher

Example of a Custom App Payload in a Chatter Feed Post

This example shows the custom app’s payload included in a Chatter post.Custom apps payload in a Chatter post

The next sections describe how we integrated the custom quotation app with the Chatter publisher.

1. Set Up the Composer Component

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

This is 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>
        <ui:button label="Get next Quote" press="{!c.getQuote}"/>
    </div>

</aura:component>

Use your controller and helper to initialize the composer component and to get the quote from a source. Once you get the quote, fire the event sendChatterExtensionPayload so the platform can associate the app’s payload with the feed item that’s being composed in the publisher.

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.

This is the component markup in quotesRender.cmp. In this file, we implement the lightning:availableForChatterExtensionRenderer interface.

<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>

Use your controller to parse the payload that is provided by the lightning:availableForChatterExtensionRenderer interface and set its attributes. Then add a CSS resource to your renderer bundle to style your renderer component.

3. Set Up a New ChatterExtension Entity

After these components are created, go to Workbench and log into your org. Create a new ChatterExtension entity.

From the Data menu, select Insert.

Insert option on the data menu in Workbench

From the Object Type list select ChatterExtension.

The Object Type list in Workbench

In the Value column, provide values for ChatterExtension fields (see ChatterExtensions (Pilot) for values and descriptions).

ChatterExtensions fields and values in Workbench
Save your work to show your custom app in the Post and Question views of the Chatter publisher.
Note

Note

Rich Custom App information is cached, so there may be a 15 to 30 minute wait before your app appears in the publisher.