Criar um Rich Publisher App

Para fornecer um ícone que aparecerá no editor de feed e empacotá-lo com seu aplicativo, você precisará do ID do fileAsset do ícone.

Você usará o ID do fileAsset ao criar a entidade ChatterExtension. Adicionar o ID do fileAsset a ChatterExtension permite incluir o arquivo do ícone com seu aplicativo.

É aqui que você carrega a imagem de ícone e obtém seu ID do fileAsset.

Nota

A estrutura de componente do Lightning tem dois modelos de programação: os componentes do Lightning Web e o Aura. Neste módulo, vamos criar Rich Publisher Apps usando o Aura.

Quando um membro do site clica em um ícone do Rich Publisher App, a ação abre uma composição modal. O modal contém um componente do Lightning. O componente do Lightning permite que o usuário selecione, busque ou gere algo. Você tem a liberdade para personalizar este componente para seu caso de uso.

Vamos ver como uma empresa usa a plataforma Rich Publisher Apps para anexar casos a publicações e perguntas.

Crie um componente do Lightning que estenda a interface Lightning lightning:availableForChatterExtensionComposer. O componente da composição usa essa interface.

A equipe de desenvolvedores da Capricorn usa uma iteração Aura para exibir os itens da lista no código do componente. Aqui está o código do componente do Lightning.

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

A equipe Capricorn faz uma solicitação Apex na função init do controlador para buscar informações de caso de suporte para a lista de seleção. Aqui está o código do controlador associado ao componente do 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(); 
    }
})

Aqui está o código auxiliar para ir junto com o controlador.

({  
    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;
    }
})

Dica

Aqui está uma maneira de escrever uma chamada Apex para a função getCases.

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

É possível implementar sua própria maneira para que os usuários façam uma seleção. Você pode ter qualquer lógica no Apex para obter dados inteligentes ou novos usando serviços internos ou de terceiros para criar Rich Publisher Apps poderosos.

O importante é garantir que um clique do usuário dispare o evento Aura lightning:sendChatterExtensionPayload no código do controlador. Na amostra de código da Capricorn, a equipe criou o evento na função selected. A definição do evento na função selected envia o conteúdo para associá-lo com o item do feed quando o usuário faz uma seleção.

A equipe define os metadados extensionDescription e extensionTitle usando funções auxiliares para associar ao conteúdo. Estes metadados são para casos de uso que não sejam Lightning, como as notificações de email ou o modo de exibição clássico. Opcionalmente, também é possível adicionar um URL da miniatura.

Aqui está um modal com um título e miniaturas.

A plataforma Rich Publisher Apps também fornece os botões Adicionar e Cancelar. Na imagem anterior, o botão Adicionar está desativado. O botão Adicionar é habilitado somente após o evento lightning:sendChatterExtensionPayload ser disparado com um conteúdo que não esteja vazio. Observe na imagem anterior que nenhum caso está selecionado e, na próxima imagem, um caso será selecionado. Se o evento for disparado com um conteúdo vazio, o botão permanece desabilitado.

A seguir, a equipe Capricorn cria um componente do Lightning que estende a interface do Lightning lightning:availableForChatterExtensionRenderer. Esta interface renderiza o conteúdo selecionado no editor quando o FeedItem é renderizado. Há dois atributos essenciais como parte desta interface: variant e payload. O atributo variant permite que você decida como renderizar algo baseado na possibilidade de o aplicativo selecionado ser visualizado no editor ou renderizado no FeedItem. O atributo payload é o objeto JavaScript que o usuário selecionou no componente da composição.

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

A Capricorn usa a variante FEED para decidir qual classe CSS usar. O uso de FEED indica a renderização do Rich Publisher App em um FeedItem. Para renderizar o aplicativo no editor, use a variante PREVIEW. As informações do conteúdo mostram qual caso renderizar. Neste exemplo, o conteúdo é estático. Mas também é possível usar controladores do Apex do lado do servidor para obter informações dinâmicas e em tempo real dentro de seu componente renderizador.

Aqui está como é o conteúdo, como uma visualização dentro do editor (PREVIEW):

Aqui está como é o conteúdo no item de feed renderizado final (FEED):

Agora que você criou os componentes do Lightning e obteve o ID do fileAsset, já pode criar o Rich Publisher App no Workbench.

Acesse o Workbench e insira um objeto ChatterExtension (Workbench > Dados > Inserir > ChatterExtension). Em seguida, associe todos os valores dos componentes aos campos ChatterExtension.

Dica

Uma forma de obter os valores dos componentes é ir à Configuração e buscar por Lightning Components. Clique em um componente da lista para exibir seus detalhes. Copie o ID do componente do URL de seu navegador.

Nota

Você pode fazer a tradução do cabeçalho e dos textos flutuantes no Workbench de tradução.

Quando tudo está pronto, a equipe Capricorn adiciona o aplicativo ao editor de feed em seu site. É possível adicionar até cinco Rich Publisher Apps ao seu site por meio da Administração do Workspace, no Experience Workspaces.