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.
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).
Example of a Custom App Payload in a Chatter Feed Post
This example shows the custom app’s payload included in a Chatter post.
The next sections describe how we integrated the custom quotation app with the Chatter publisher.
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.
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.
After these components are created, go to Workbench and log into your org. Create a new ChatterExtension entity.
From the Data menu, select Insert.
From the Object Type list select ChatterExtension.
In the Value column, provide values for ChatterExtension fields (see ChatterExtensions (Pilot) for values and descriptions).