Exibir ícones personalizados juntamente com valores em exibições de lista

Artigo
03/15/2023

Os personalizadores e os administradores do ambiente do Power Apps podem adicionar elementos gráficos a uma exibição e estabelecer a lógica usada para selecionar um elemento gráfico com base no valor da coluna usando JavaScript. O recurso permite que você personalize as exibições de lista que mostram ícones ao lado de texto ou de valores numéricos.

Este exemplo exibe ícones personalizados em uma exibição para a tabela de oportunidades, que está disponível com certos aplicativos, como o Dynamics 365 Sales. Você pode exibir ícones personalizados em exibições com outras tabelas padrão, como a conta ou a tabela de contatos, bem como tabelas personalizadas.

Ícones personalizados nas visualizações de lista podem ser exibidos na Interface Unificada, no cliente Web herdado, no aplicativo móvel e no Aplicativo para Outlook.

Observação

Ícones personalizados não estão disponíveis quando o aplicativo está no modo offline móvel.

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 artigo.
Entre no seu ambiente como administrador e abra 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. Siga estas etapas:
1. 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.
2. defina o Tipo para o formato gráfico usado para salvar seu arquivo gráfico (PNG, JPEG ou GIF).
3. Selecione Escolher Arquivo para abrir uma janela do navegador de arquivos. Use-o para localizar e selecionar seu arquivo gráfico.
4. Adicione um Nome para Exibição e/ou uma Descrição, se quiser.
5. 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:
1. Dê ao novo recurso um Nome significativo.
2. Defina o Tipo como Script (JScript).
3. 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.
4. Adicione um Nome para Exibição e/ou uma Descrição, se quiser.
5. Selecione Salvar e feche a janela Recurso da Web.
Com a janela pop-up Solução Padrão ainda aberta, expanda a árvore Componentes > Tabelas e localize a tabela que você deseja personalizar.
Expanda sua tabela e selecione o ícone Exibições.
Agora você verá uma lista de exibições para a tabela 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 tabela, exibição e coluna, conforme 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 no ambiente, consulte Habilitar idiomas e Instalar ou atualizar pacotes de idiomas. 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.

Nota: 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.

Importante

Este exemplo requer a tabela oportunidade, que está disponível no aplicativo Dynamics 365 Sales.

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

Comportamento de exibição da visualização do ícone personalizado

Colunas principais

Na exibição de lista de grade, os ícones personalizados aplicados à coluna principal da tabela substituem o ícone padrão gerado pelo sistema.

Outras colunas

Na exibição de lista de grade, os ícones personalizados aplicados a uma coluna que não é a coluna principal da tabela são exibidos como um ícone secundário, além do ícone padrão gerado pelo sistema.

Não é uma exibição de ícone personalizada da coluna principal da tabela.

Formulários de cartão

Os ícones personalizados substituem o ícone padrão gerado pelo sistema quando a visualização é configurada para usar um formulário de cartão.

Consulte também

Compreender as exibições de aplicativos orientados a modelo

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).

Compartilhar via