面向社区的Rich Publisher Apps -构建富发布者应用

学习目标

完成本单元后，您将能够：

  • 列出Rich Publisher Apps平台中提供的接口和事件。
  • 从头开始构建Rich Publisher App。
  • 在社区中配置Rich Publisher Apps。

步骤1.上传您的图标图像并获取其文件资产ID

问题发布者中的Rich Publisher App图标

要提供在供稿发布者中显示并与您的应用打包在一起的图标，您需要该图标的 fileAsset ID。

您使用 fileAsset 创建时的ID ChatterExtension实体。添加fileAsset ID到 ChatterExtension 可让您将图标文件与您的应用打包在一起。

这是您上传图标图像并获取它的方法 fileAsset ID。

注意

注意

Lightning Component框架具有两个编程模型，Lightning Web Components和Aura。在此模块中，我们使用Aura构建Rich Publisher Apps。

  1. 将您的图标文件上传到Salesforce。
  2. 复制文件ID。注意您可以从Salesforce中的文件详细信息中获取文件ID。转到“文件”页面，然后查看文件详细信息。从浏览器的URL复制文件ID。这是一个很长的数字，例如 069R00000003roQ。
  3. 转到Workbench，并获取以下值： ID 下 fileAsset。
    1. 在REST Explorer中，选择Post，然后输入路径： /services/data/v43.0/connect/files/[file_ID]/asset
    2. 对于[file_ID]，输入您在步骤2中复制的文件ID。
    3. 在请求正文中，输入{}。
    4. 点击执行。
    5. 展开 fileAsset 节点，将值复制为 ID，然后将其粘贴到以后的用户。

步骤2.创建用于合成和渲染的闪电组件

当社区成员单击Rich Publisher App图标时，该操作将导致打开合成模式。该模态包含一个闪电组件。Lightning组件使用户能够选择某些内容，搜索某些内容或生成某些内容。您可以根据自己的用例自定义此组件。

让我们看看一家公司如何使用Rich Publisher Apps平台将案例附加到帖子和问题上。

遇见摩ri座

摩ri座出售咖啡和高端咖啡冲泡设备，并以其客户服务而自豪。它的秘密之一是为客户服务代理商建立的社区，以讨论未决案例并就解决方案进行协作。摩ri座希望开发一个Rich Publisher App，用于将案例附加到帖子和问题上。他们希望给他们的代理商一种挖掘过去解决方案的方法，以解决目前的问题。这就是他们的工作。

A.创建第一个闪电组件

创建扩展Lightning接口的Lightning组件 闪电：适用于ChatterExtensionComposer。合成组件使用此接口。

摩ri座开发人员团队使用先兆迭代来显示组件代码中的列表项。这是闪电组件代码。

<aura:component implements="lightning:availableForChatterExtensionComposer" controller="caseController">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <aura:attribute name="items" type="List" description="Contains a list of items for user to select."/>
    
    <div class="container">
        <aura:iteration items="{!v.items}" var="item" indexVar="index">
            <div class="itemContainer" onclick="{!c.selected}">
                <div class="itemLeft">
                	<img class="itemIcon" src="https://login.salesforce.com/logos/Standard/record/logo.svg"></img>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">{!item.title}</div>
                	<div class="itemDescription">Case Number: {!item.caseNo}</div>
                </div>
            </div>
        </aura:iteration>
    </div>
</aura:component>

摩ri座团队在控制器中发出Apex请求 在里面函数获取选择列表的支持案例信息。这是与Lightning组件关联的控制器代码。

({
	init : function(cmp, event, helper) {
        var action = cmp.get("c.getCases");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var caseList = [];
                var response = response.getReturnValue();
                for (var i=0;i<response.length;i++) {
                    caseList.push({
                        "title": response[i].Subject,
                        "caseNo": response[i].CaseNumber
                    })
                }
                cmp.set("v.items", caseList);
            }
        });
        $A.enqueueAction(action);
	},
    
    selected: function(cmp, event, helper) {
        var selectedItem = helper.getSelectedItem(cmp, event);
		var compEvent = cmp.getEvent("sendChatterExtensionPayload");
		compEvent.setParams({
			"payload" : helper.getPayload(selectedItem),
			"extensionTitle" : helper.getTitle(selectedItem),
			"extensionDescription" : helper.getDescription(selectedItem)
		});
		compEvent.fire(); 
    }
})

这是与控制器一起使用的辅助代码。

({  
    getSelectedItem: function(cmp, event) {
        var clicked = event.currentTarget;
        var parent = clicked.parentElement;
        var total = parent.children.length;
        var selectedIndex = -1;
        for(var i=0; i<total; i++) {
            if(clicked === parent.children.item(i)) {
                selectedIndex = i;
            }
            $A.util.removeClass(parent.children.item(i), "selected");
        }
        $A.util.addClass(clicked, "selected");
        
        var selectedTh = cmp.get("v.items")[selectedIndex];
        return selectedTh;
    },
    
    getPayload: function(item) {
        return item;
    },
    
    getTitle: function(item) {
        return item.title;
    },
    
    getDescription: function(item) {
        return item.caseNo;
    }
})

这是为该应用编写Apex调用的一种方法 获取案例 功能。

public class caseController {
    
    @AuraEnabled
    public static List<Case> getCases() {
       List<Case> cases = [SELECT AccountId,CaseNumber,Subject,Description,Id FROM Case ORDER BY CreatedDate ASC NULLS FIRST LIMIT 20];
       return cases;
    }
}

您可以实现自己的方式让用户进行选择。您可以在Apex中使用任何逻辑，以使用内部或第三方服务来构建功能强大的Rich Publisher Apps来获取智能数据或新鲜数据。

重要的是要确保用户单击触发光环事件 闪电：发送ChatterExtension有效载荷在控制器代码中。在摩ri座的代码示例中，团队在已选功能。在事件中设置事件已选 当用户做出选择时，此功能会发送有效载荷以与提要项关联。

团队设定 extensionTitle 和 extensionDescription使用辅助函数将元数据与有效负载关联。此元数据用于非Lightning用例，例如电子邮件通知或经典视图。您也可以选择添加缩略图URL。

这是带有标题和缩略图的模态。

列出作曲家组件中的项目

Rich Publisher Apps平台还提供“ 添加”和“ 取消”按钮。在上一个图像中，“ 添加”按钮被禁用。Salesforce的启用 添加按钮后，才闪电：发送ChatterExtension有效载荷使用非空的有效负载触发事件。如果使用空的有效负载触发事件，则按钮保持禁用状态。

启用添加按钮

B.创建第二个闪电组件

接下来，摩ri座团队创建一个Lightning组件来扩展Lightning接口 闪电：可用ForChatterExtensionRenderer。当FeedItem被渲染。此接口有两个基本属性：变体 和 有效载荷。的变体 属性可让您根据所选应用是在发布者中预览还是在广告中呈现来决定如何呈现内容 FeedItem。的有效载荷 属性是用户在组合组件中选择的JavaScript对象。

<aura:component implements="lightning:availableForChatterExtensionRenderer">
    
    <div class="container">
        <a target="_blank" href="{!v.payload.url}">
            <div class="{! (v.variant == 'FEED' ? 'itemContainerBorder' : '') + ' itemContainer'}">
                <div class="itemLeft">
                    <img class="itemIcon" src="{!v.payload.icon}"></img>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">{!v.payload.title}</div>
                    <div class="itemSubtitle">{!v.payload.subtitle}</div>
                    <div class="itemDescription">Case Number: {!v.payload.caseNo}</div>
                </div>
            </div>
        </a>
    </div>
</aura:component>

Capricorn 使用变体 饲料决定使用哪个CSS类。指某东西的用途饲料 向Salesforce发出信号，以在其中呈现Rich Publisher App FeedItem。要在发布商中呈现应用，请使用变体预习。有效负载信息显示要呈现的情况。在此示例中，有效负载是静态的。但是，您也可以使用服务器端Apex控制器来获取渲染器组件内部的实时动态信息。

这是有效负载在发布者内部作为预览的样子（预习）：

Rich Publisher App有效内容的预览

有效负载在最终呈现的供稿项中的外观如下（饲料）：

与Feed项目一起发布的Rich Publisher App有效负载

步骤3.在Workbench中创建Rich Publisher App

现在，您已经创建了Lightning组件并抓取了 fileAsset ID，您已准备好在Workbench中创建Rich Publisher App。

转到工作台，然后插入 ChatterExtension对象（工作台>数据>插入> ChatterExtension）。然后将所有组件值与ChatterExtension 领域。

获取组件值的一种方法是转到“设置”并搜索 Lightning Components。单击列出的组件以查看其详细信息。从浏览器URL复制组件ID。

ChatterExtension对象
  • 提供合成组件的闪电组件ID。
  • 为模式标题添加文本。
  • 为应用程序图标（在Feed发布者中显示的图标）添加悬停文本。
  • 提供 fileAsset 应用程序图标的ID。
  • 提供渲染组件的Lightning组件ID。
  • 对于 类型输入Lightning。当前，闪电是唯一可用的类型。
注意

注意

您可以在Translation Workbench中本地化标题和悬停文本。

步骤4.在您的社区中启用Rich Publisher Apps

当一切准备就绪时，摩ri座团队会将应用程序添加到其社区中的供稿发布者。您可以通过“体验工作区”中的“管理工作区”向社区添加最多五个Rich Publisher Apps。

  1. 转到体验工作区，然后单击“ 管理”磁贴。
  2. 在导航列中，点击Rich Publisher Apps。
  3. 从“可用的应用程序”列中最多选择五个应用程序，然后将它们移动到“选定的应用程序”列中。
  4. 要设置发布者中图标的顺序，请在列表中上移或下移选定的应用。
  5. 点击保存。