Criar um Rich Publisher App

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Listar as interfaces e os eventos fornecidos na plataforma Rich Publisher Apps.
  • Criar um Rich Publisher App desde o início.
  • Configurar os Rich Publisher Apps em um site do Experience Cloud.

Etapa 1. Fazer upload de sua imagem de ícone e obter seu ID de recurso de arquivo

Ícones do Rich Publisher App no editor de pergunta

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

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.

  1. Carregue seu arquivo do ícone para o Salesforce.
  2. Copie o ID do arquivo. Nota Você pode obter o ID do arquivo nos detalhes do arquivo no Salesforce. Acesse a página Arquivos e veja os detalhes do arquivo. Copie o ID do arquivo do URL de seu navegador. É um número longo, como 069R00000003roQ.
  3. Acesse o Workbench e obtenha o valor do ID em fileAsset.

    1. No REST Explorer, selecione Publicar e informe o caminho: /services/data/v43.0/connect/files/[file_ID]/asset
    2. Para [file_ID], digite o ID do arquivo copiado no passo 2.
    3. No corpo da solicitação, digite {}.

      Um ID do fileAsset no Workbench

    4. Clique em Executar.
    5. Expanda o nó do fileAsset, copie o valor do ID e cole-o em algum lugar para usar mais tarde.

Etapa 2. Criar componentes do Lightning para composição e renderização

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.

Conheça a Capricorn

A Capricorn vende café e equipamentos sofisticados para fazer café, e se orgulha de seu atendimento ao cliente. Um de seus segredos é o site criado para os agentes de atendimento ao cliente discutirem casos em aberto e colaborarem nas soluções. A Capricorn quer desenvolver um Rich Publisher App para anexar casos a publicações e perguntas. Eles querem dar a seus agentes uma maneira de pesquisar soluções já adotadas no passado para facilitar resoluções rápidas no presente. Aqui está o que eles fazem.

A. Criar o primeiro componente do Lightning

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

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.

Listar itens em um componente de compositor

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.

Botão Adicionar habilitado

B. Criar o segundo componente do Lightning

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

Visualização de conteúdo de um Rich Publisher App

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

Conteúdo do Rich Publisher App publicado com um item de feed

Etapa 3. Criar um Rich Publisher App no Workbench

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

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.

O objeto ChatterExtension

  • Forneça o ID do componente do Lightning para o componente da composição.
  • Adicione o texto ao cabeçalho do modal.
  • Adicione os textos flutuantes ao ícone do aplicativo (o ícone exibido no editor do feed).
  • Forneça o ID do fileAsset para o ícone do aplicativo.
  • Forneça o ID do componente do Lightning para o componente de renderização.
  • Para Type, insira Lightning. Atualmente, o Lightning é o único tipo disponível.
Nota

Nota

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

Etapa 4. Habilitar os Rich Publisher Apps em seu site do Experience Cloud

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.

  1. Acesse o Experience Workspaces e clique no bloco Administração.
  2. Na coluna de navegação, clique em Rich Publisher Apps.
  3. Selecione até cinco aplicativos a partir da coluna Aplicativos disponíveis e mova-os para a coluna Aplicativos selecionados.Rich Publisher Apps em Administração do Workspace
  4. Para definir a ordem dos ícones no editor, mova os aplicativos selecionados para cima ou para baixo na lista.
  5. Clique em Salvar.