面向社区的Rich Publisher Apps -使用Apex触发器扩展可能性

学习目标

完成本单元后,您将能够:

  • 命名使用触发器与Rich Publisher Apps一起使用的用例。
  • 使用触发器构建智能的Rich Publisher App。
  • 描述Rich Publisher Apps API。

使用您的Apex触发技能

您不仅可以设置点击添加Rich Publisher Apps,还可以设置可以智能地预测成员所需信息的应用程序。例如,您的应用可以使用有用的数据或Rich Publisher App选择来回复成员帖子。成员不要单击应用程序图标。相反,Salesforce会在成员的帖子中自动包括相关的Rich Publisher App。

您可以使用针对Chatter对象的Apex触发器的功能来实现此目的。借助Apex触发器,您可以在更改Salesforce记录(如插入,更新或删除)之前或之后设置自定义操作。您可以添加一个插入后 FeedItem触发以收听成员帖子的内容并智能地插入Rich Publisher App。例如,您还可以添加触发器,以响应对其他对象(如评论或答案)的更改来更新应用程序。

让我们看一个 插入后 触发行动。

梦幻之梦

想象一下,您在Dreamforce上,并且正在寻找一些很棒的课程。在社区中输入问题作为您的问题,Looking for some DF sessions. 然后Looking for some cool DF sessions使用#标签添加详细信息#lookingForSessions。

Chatter发布者中的详细问题和主题

您单击“ 询问”,发布者将在发布的帖子中自动包含一个Rich Publisher App(Dreamforce校园地图)。

通过插入后触发器将Google Map附加到帖子

我们在这里做了什么?要获得此结果,您需要创建两件事。

  • Rich Publisher App,用于根据某些上下文将地图附加到提要项
  • 自动插入应用程序的触发器

梦想地图

首先,创建与第2单元中的支持案例应用类似的Rich Publisher App,但是这次使用Google Maps API。

用户无需点击图标,而是通过在Feed中输入特定主题来触发我们的地图应用。但是Rich Publisher App平台需要一个图标,那么您该怎么办?在这种情况下,您可以为该图标添加空白图像和一个空白的合成组件。

或者,您可以创建常规的点击添加应用并添加 插入后 触发附加体验。

这是为…编写基本触发器的一种方法 FeedItem。

trigger dreamforceMapInsertion on FeedItem (after insert) {
  // This is where we look for content in the post or topics. Based on our result, we can insert
  // a Rich Publisher App. Alternatively, we can continue adding a Rich Publisher App for each
  // post without the filtering. 
    
  // Get FeedItem Id & the body.
  String id = null;
  String body = “”;
  for(FeedItem f : Trigger.new) {
       id = f.id;
       body = f.body;
      }
  }
    
  if (id == null && !f.body.contains('#lookingForSessions’)) {
      return;
  }
  String communityId = Network.getNetworkId();
  String feedElementId = id;
  ConnectApi.FeedEntityIsEditable isEditable = 
    ConnectApi.ChatterFeeds.isFeedElementEditableByMe(communityId, feedElementId);
  
  // Make sure the post is user-editable before inserting the Rich Publisher App.
  if (isEditable.isEditableByMe == true) {

        // This is the setup for Rich Publisher App insertion. 
        ConnectApi.FeedItemInput feedItemInput = new ConnectApi.FeedItemInput();
        ConnectApi.FeedElementCapabilitiesInput feedElementCapabilitiesInput = 
          new ConnectApi.FeedElementCapabilitiesInput();
        feedItemInput.capabilities = feedElementCapabilitiesInput;
        feedItemInput.capabilities.extensions = new ConnectApi.ExtensionsCapabilityInput();
        feedItemInput.capabilities.extensions.itemsToAdd = new List<ConnectApi.ExtensionInput>();
        ConnectApi.ExtensionInput ext = new ConnectApi.ExtensionInput();
        
        // This is the id for your Rich Publisher App.     
        ext.extensionId = '<Insert your extensionId>'; // This would be something you get from 
          //Workbench which is the id for extension entity for example ‘0MYB00000001234567’
        
        // This is the payload associated with this instance of the app.
        ext.payload = '<Insert your payload>'; // This would be your JSON blob for example: 
          //‘{\”feedItemId\":\"'+id+’\”}’
        
        // This can change if you want to use multiple payload versions with different versions of
        // your app. Or you can just use 1 version. This is Optional.                	
        ext.payloadVersion = '<Insert your payloadVersion>'; // This can be anything like ‘1.0’

        // The following fields add metadata to your Rich Publisher App.
        // This is similar to our actions in Unit 2 when we added metadata to the lightning event.
	 alt.textRepresentation = '<Insert your text representation here>'; 
	 ConnectApi.AlternativeInput alt = new ConnectApi.AlternativeInput();
        ext.alternativeRepresentation = alt;
        
        // Add a Rich Publisher App to FeedItem capabilities.
        // Here you can add multiple Rich Publisher App instances in the itemsToAdd Array.
        feedItemInput.capabilities.extensions.itemsToAdd.add(ext);
    
        // Finally, edit the FeedItem to insert the Rich Publisher App.
        ConnectApi.FeedElement editedFeedElement = 
          ConnectApi.ChatterFeeds.updateFeedElement(communityId, feedElementId, feedItemInput);
  } 
}

在我们的代码示例中,我们介绍了许多有关如何编写 插入后 FeedItem 触发器以及如何使用Rich Publisher Apps API。

要将Rich Publisher App实例添加到您的供稿项,平台会编辑 FeedItem 在它创建之后 插入后触发。然后,它将Rich Publisher App实例作为FeedItem触发器中的表示形式。您可以在进行编辑之前进行过滤,以确定是否要进行插入。

在我们的示例中,触发器#lookingForSessions在提要主体中寻找主题。然后,它传递有效负载以向Rich Publisher App提供上下文。通过上下文,Rich Publisher App知道要显示Dreamforce校园的地图。您可以做各种事情来从帖子正文或其附件中获取上下文。有了上下文时,可以将其作为有效负载传递给Rich Publisher App,以便它可以呈现某些内容作为响应。您还可以向第三方服务提出请求。例如,您可以请求访问机器学习资源或其他智能API。这些代理可以在您的Rich Publisher Apps中提供智能响应。

颤振扩展

在我们的公共API中,Rich Publisher Apps API被称为 ChatterExtension。您只能通过Workbench使用SOAP API创建Chatter扩展。但是您可以使用Chatter Extensions Connect API (或Apex中的ConnectAPI)来获取它。创建Rich Publisher App时,基本上是ChatterExtension对象,如我们在单元2,第3步中介绍的那样。Salesforce将Rich Publisher Apps作为Feed的附件插入,类似于附加文件。这就是为什么您使用 扩展功能输入(或 Apex中的ConnectAPI)插入带有提要项的Rich Publisher实例的原因。

让我们回到我们的例子。有人看到您的问题,然后回复How to build Rich Publisher Apps at Moscone North。

更新的Google Map

即时,地图在Moscone North位置上用图钉更新。

另一个答案建议在洲际酒店举行会议。地图再次更新,这一次是在酒店位置使用图钉。

更新的Google Map

在这里,连同 FeedItem 触发,我们有一个 FeedComment触发正在监听评论。成员插入评论后,您的应用程序会将评论的内容主体与Dreamforce会话列表进行匹配。然后触发器编辑FeedItem 用上面提到的位置上的引脚更新有效负载。或者,您可以让Rich Publisher App收听外部第三方服务以获取要固定的位置列表。在这种情况下,FeedComment 触发器可以更新该第三方服务,而无需编辑 FeedItem。这样,您可以获得在地图上更新图钉的动态体验。

面向社区的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. 点击保存

面向社区的Rich Publisher Apps -可使用Lightning就绪的Rich Publisher应用程序入门

学习目标

完成本单元后,您将能够:

  • 描述什么是Rich Publisher Apps。
  • 列出Rich Publisher Apps的一些用例。
  • 描述Rich Publisher App的基本架构。

获得竞争优势

想象不只是添加文件或链接到您的提要帖子,还可以想象附加一个实时视频,醒目的GIF或交互式小部件。使用Rich Publisher Apps平台,几乎一切皆有可能。使用该平台可将多达五个自定义应用构建,配置和集成到Feed发布者中。为您的社区成员提供“现在就在这里可用”的便利,使您领先于竞争对手。

提要项上的映射Rich Publisher App

使用Rich Publisher Apps,您可以:

  • 将案例附加到帖子上。
  • 插入GIF文件或著名的引号。
  • 开始视频会议。
  • 附加一个Trailhead模块。
  • [您的想法在这里!]

在本模块中,我们描述如何构建Rich Publisher App,以使您的供稿更加动态,并向第三方服务开放它们。

注意

注意

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

那么它是怎样工作的?

Rich Publisher Apps平台为您提供了创建交互式应用并将其集成到Feed发布器中的所有必要工具。

您可以通过三种方式将Rich Publisher App添加到您的社区。

  • 从AppExchange获取。
  • 在您的组织中构建自定义应用。
  • 通过变更集或程序包移植应用程序。
将Rich Publisher Apps添加到组织的方法

从组织到社区

将Rich Publisher App添加到组织后,所有组织的社区均可使用。社区管理员和管理员可以在其社区的“管理工作区”中选择并启用可用的应用程序。

附加文件图标

当您将Rich Publisher App添加到社区时,成员会在发布者旁看到该应用程序的图标。

此示例显示了具有三个自定义应用程序集成的Feed发布者。有用于附加外壳(1),GIF(2)和Trailhead模块(3)的图标。

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

从社区到出版商

Rich Publisher Apps图标显示在文本和问题发布者的组,主题,直接消息和用户配置文件供稿中。它们不会出现在民意调查发布者中。

注意

注意

在问题发布者中,Rich Publisher App图标显示在RTF编辑器下的“详细信息”部分中。

社区成员单击该图标以打开选择框。

Rich Publisher选择框

他们选择一些东西,单击Add,然后单击Share或 Ask,然后Salesforce会发布带有附件的帖子。

问题发布中包含的Rich Publisher App有效负载

关键发展概念

在下一个单元中,我们将引导您创建动态的Rich Publisher App。作为后续,理解一些概念将很有用。

有效负载是开发Rich Publisher Apps的关键概念。有效载荷是提要项表示的一部分。这是附加到供稿项的东西-视频,GIF或小部件。

提要项表示有效负载

有效载荷可以是字符串,可以是base64编码的JSON对象(无论您选择什么)。作为开发人员,您可以控制有效负载。

当Salesforce通过API获取提要项目时:

  1. 它将有效负载与提要项目相关联。
  2. 它获取有效负载。
  3. 它将有效载荷与提要项数据一起发送到提要中。

现在让我们看一下该架构的概述。

Rich Publisher Apps的四个主要组件

  • 合成组件(闪电组件)
  • 渲染组件(闪电组件)
  • 图标(发布者中显示的图像文件)
  • 可本地化的标签(标题和悬停文本)
Rich Publisher App的主要组件

接下来,我们逐步完成这些元素的创建过程,并将它们组合在一起成为一个内聚且动态的Rich Publisher App。