Adicionar ícones personalizados a uma exibição de lista
Este tópico se aplica a Dynamics 365 Customer Engagement (on-premises). Para a versão Power Apps deste tópico, consulte: Exibir ícones personalizados juntamente com valores em exibições de lista
Os administradores e personalizadores podem adicionar gráficos a uma exibição e estabelecer a lógica usada para selecionar um gráfico com base no valor da coluna usando o JavaScript. Isso permite personalizar exibições de lista que mostram ícones ao lado de texto ou de valores numéricos, como nesta coluna Classificação da exibição Todas as Oportunidades.
Ícones personalizados nas visualizações de lista podem ser exibidos na Interface Unificada, no cliente Web clássico, no aplicativo móvel e no Aplicativo para Outlook.
Adicionar gráficos personalizados e JavaScript como recursos da Web
Criar os novos arquivos gráficos necessários para a sua personalização. Nós recomendamos um tamanho de ícone de 16 x 16 pixels (as imagens maiores serão reduzidas).
Escreva uma ou mais funções JavaScript que estabeleçam quais ícones serão mostrados para quais valores (normalmente, você precisará de uma função para cada coluna que queira personalizar). Cada função deve aceitar um objeto de dados de linha e um código de idioma (LCID) como entrada e retornar uma matriz com um nome de imagem e um texto de dica de ferramenta. Para obter uma função de exemplo, consulte Função JavaScript de exemplo, posteriormente neste tópico.
Fazer logon no ambiente como administrador e abrir o gerenciador de soluções.
A janela pop-up Solução Padrão será aberta. Navegue até Componentes>Recursos da Web aqui.
Agora, você carregará seus gráficos personalizados, um de cada vez, como recursos da Web. Selecione o botão Novo na barra de ferramentas para criar um novo recurso da Web. Outra janela pop-up abre para ajudar você a criar o recurso. Faça o seguinte:
Dê ao novo recurso um Nome significativo. Este é o nome que você usará para se referir a cada gráfico do seu código JavaScript.
defina o Tipo para o formato gráfico usado para salvar seu arquivo gráfico (PNG, JPEG ou GIF).
Selecione Escolher Arquivo para abrir uma janela do navegador de arquivos. Use-o para localizar e selecionar seu arquivo gráfico.
Adicione um Nome para Exibição e/ou uma Descrição, se quiser.
Selecione Salvar e feche a janela Recurso da Web.
Repita a etapa anterior para cada arquivo gráfico que você tiver.
Agora, você adicionará seu JavaScript como o recurso da Web final. Selecione Novo na barra de ferramentas para criar um novo recurso da Web. Outra janela pop-up abre para ajudar você a criar o recurso. Faça o seguinte:
Dê ao novo recurso um Nome significativo.
Defina o Tipo como Script (JScript).
Selecione o Editor de Texto (ao lado da configuração Tipo) para abrir uma janela de editor de texto. Cole seu código Javascript aqui e selecione OK para salvá-lo.
Adicione um Nome para Exibição e/ou uma Descrição, se quiser.
Selecione Salvar e feche a janela Recurso da Web.
Com a janela pop-up Solução Padrão ainda aberta, expanda a árvore Componentes>Entidades e localize a entidade que você deseja personalizar.
Expanda sua entidade e selecione seu ícone Modos de Exibição.
Agora você verá uma lista de modos de exibição para a entidade selecionada. Selecione uma exibição da lista. Em seguida, abra a lista suspensa Mais Ações na barra de ferramentas e selecione Editar.
Uma janela pop-up é aberta com controles para a edição do modo de exibição selecionado. Ela mostra cada coluna como parte do modo de exibição. Selecione a coluna de destino e selecione Alterar Propriedades na caixa Tarefas Comuns. O diálogo Alterar Propriedades da Coluna é aberta. Faça as seguintes configurações aqui:
Recurso da Web: especifique o nome do recurso da Web que você criou para armazenar suas funções Javascript (selecione Pesquisar para escolher uma opção da lista).
Nome da Função: digite o nome da função que você escreveu para modificar a coluna e o modo de exibição selecionados.
Selecione OK para fechar a caixa de diálogo Alterar Propriedades da Coluna.
Selecione Salvar e Fechar para salvar o modo de exibição.
Repita essas etapas para cada entidade, modo de exibição e coluna, como necessário.
Quando você terminar, selecione Publicar Todas as Personalizações para publicar suas alterações. Em seguida, feche a janela Solução Padrão.
Função JavaScript de exemplo
A função JavaScript para exibir ícones personalizados e dicas de ferramentas espera estes dois argumentos: o objeto de linha inteiro especificado em layoutxml e a ID de Localidade (LCID) do usuário que está chamando. O parâmetro LCID permite que você especifique o texto de dica de ferramenta em vários idiomas. Para obter mais informações sobre os idiomas com suporte pelo ambiente, consulte Habilitar idiomas e Instalar ou atualizar pacotes de idiomas para o Dynamics 365 for Customer Engagement. Para obter uma lista de valores de ID de localidade (LCID) que você pode usar no seu código, consulte IDs de localidade atribuídas pela Microsoft.
Supondo que você adicionará ícones personalizados para um tipo de atributo option-set, que tem um conjunto limitado de opções predefinidas, use o valor inteiro das opções em vez de rótulo para evitar problemas de localização.
Observação: Se for necessário recuperar dados para determinar o ícone, a Interface Unificada dará suporte ao retorno de um objeto JavaScript Promise resolvido para um booliano (semelhante às regras da faixa de opções). Não use um XMLHttpRequest (XHR) síncrono na função personalizada.
O código de exemplo a seguir exibe ícones e dicas de ferramentas com base em um de três valores (1: Quente, 2: Morno, 3: Frio) no atributo opportunityratingcode (Classificação). O código de exemplo também mostra como exibir texto de dica de ferramenta localizado. Para que este exemplo funcione, você deverá criar três recursos da Web de imagem com imagens de 16 x 16 com os seguintes nomes: novo_Quente, novo_Morno e novo_Frio.
"use strict";
function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var coldata = str.opportunityratingcode_Value;
var imgName = "";
var tooltip = "";
switch (parseInt(coldata,10)) {
case 1:
imgName = "new_Hot";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Hot";
break;
default:
tooltip = "Opportunity is Hot";
break;
}
break;
case 2:
imgName = "new_Warm";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Warm";
break;
default:
tooltip = "Opportunity is Warm";
break;
}
break;
case 3:
imgName = "new_Cold";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Cold";
break;
default:
tooltip = "Opportunity is Cold";
break;
}
break;
default:
imgName = "";
tooltip = "";
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}