Apresentar ícones personalizados a par dos valores nas vistas de lista

Os administradores e personalizadores do ambiente do Power Apps podem adicionar gráficos a uma vista e estabelecer a lógica utilizada para selecionar um gráfico com base no valor da coluna utilizando JavaScript. A capacidade permite personalizar as vistas de lista que apresentam ícones a par do texto ou dos valores numéricos.

Este exemplo exibe ícones personalizados numa vista para a tabela de oportunidades, que está disponível com certas aplicações, como o Dynamics 365 Sales. Pode exibir ícones personalizados em vistas com outras tabelas padrão, como a tabela de conta ou de contacto, bem como tabelas personalizadas.

Os ícones personalizados nas vistas de lista podem ser apresentados em aplicações orientadas por modelos, aplicação móvel e Aplicação para Outlook.

Adicionar gráficos personalizados e Javascript como recursos Web

1. Crie os novos ficheiros de gráficos necessários para a sua personalização. Recomendamos ícones com um tamanho de 16x16 pixéis (imagens maiores serão reduzidas proporcionalmente).

2. Escreva uma ou mais funções de Javascript que definam que ícones apresentar para que valores (normalmente, precisa de uma função para cada coluna que pretende personalizar). Cada função tem de aceitar um objeto de dados de linha e um código de idioma (LCID) como entrada e devolver uma matriz que contenha o nome e o texto de descrição de uma imagem. Para uma função de exemplo, consulte Funçao JavaScript de Exemplo, posteriormente neste artigo.

3. Inicie sessão no seu ambiente e abra o explorador de soluções.

4. O separador da solução abre-se. Aceda a Componentes>Recursos Web.

5. Agora, carregue os seus gráficos personalizados, um de cada vez, como recursos Web. Selecione Novo na barra de ferramentas para criar um novo recurso Web. É aberta uma janela de pop-up para o ajudar a criar o recurso. Siga estes passos:

   1. Dê ao novo recurso um Nome significativo. Este é o nome que utiliza para fazer referência a cada elemento gráfico a partir do código JavaScript.

   2. Defina o Tipo como o formato de imagem que utilizou para guardar o ficheiro de imagem (PNG, JPEG ou GIF).

   3. Selecione Escolher Ficheiro para abrir uma janela do browser de ficheiro. Utilize-a para localizar e selecionar o seu ficheiro de imagem.

   4. Adicione um Nome a Apresentar e/ou uma Descrição, se quiser.

   5. Selecione Guardar e feche a janela do Recurso Web.

6. Repita o passo anterior para cada um dos ficheiros de gráfico que tiver.

7. Agora, adicione o seu Javascript como recurso Web final. Selecione Novo na barra de ferramentas para criar um novo recurso Web. É aberta outra janela de pop-up para o ajudar a criar o recurso. Efetue o seguinte:

   1. Dê ao novo recurso um Nome significativo.

   2. Defina o Tipo como Script (JScript).

   3. Selecione Editor de Texto (ao lado da definição de Tipo) para abrir uma janela do editor de texto. Cole o código JavaScript aqui e selecione OK para o guardar.

   4. Adicione um Nome a Apresentar e/ou uma Descrição, se quiser.

   5. Selecione Guardar e feche a janela do Recurso Web.

8. Com o separador da solução ainda aberto, expanda a árvore Componentes>Tabelas e localize a tabela que pretende personalizar.

9. Expanda a tabela e selecione o ícone Vistas.

10. Agora pode ver uma lista de vistas para a tabela selecionada. Selecione uma vista da lista. Em seguida, abra a lista pendente Mais Ações na barra de ferramentas e selecione Editar.

11. É aberta uma janela de pop-up com controlos para editar a vista selecionada. Mostra cada coluna que faz parte da vista. Selecione a coluna de destino e, em seguida, selecione Alterar Propriedades na caixa Tarefas Comuns. É aberto o diálogo Alterar Propriedades da Coluna; neste diálogo efetue as seguintes definições:

    • Recurso Web: especifique o nome do recurso Web que criou para conter as funções de JavaScript (selecione Procurar para escolher a partir de uma lista).

    • Nome da Função: introduza o nome da função que escreveu para modificar a coluna e a vista selecionadas.

12. Selecione OK para fechar o diálogo Alterar Propriedades da Coluna.

13. Selecione Guardar e Fechar para guardar a vista.

14. Repita estes passos para cada tabela, visualização e coluna conforme necessário.

15. Quando estiver preparado, selecione Publicar Todas as Personalizações para publicar as suas alterações. Em seguida, feche a janela Solução Predefinida.

Função de JavaScript de exemplo

A função JavaScript para exibir ícones e tooltips personalizados espera os seguintes dois argumentos: o objeto de linha completo especificado em layoutxml e o ID de Localização (LCID) do utilizador que chama. O parâmetro LCID permite-lhe especificar o texto de descrição em vários idiomas. Para mais informações sobre as línguas suportadas, consulte Opções regionais e linguísticas para o seu ambiente. Para uma lista de valores de IDs de configuração regional (LCID) que pode utilizar no código, consulte IDs de configuração regional atribuídos pela Microsoft.

Supondo que está a adicionar ícones personalizados para um atributo do tipo conjunto de opções, que tem um conjunto limitado de opções predefinidas, certifique-se de que utiliza o valor inteiro das opções em vez da etiqueta, para evitar problemas de localização.

A amostra de código apresenta ícones e descrições com base num de três valores (1: Muito Interessado, 2: Interessado, 3: Sem Interesse) do atributo opportunityratingcode (Classificação). O código de exemplo também mostra como apresentar texto de descrição localizado. Para que este exemplo funcione, tem de criar três recursos Web de imagem com imagens 16x16 com os nomes seguintes: new_Hot, new_Warm e new_Cold.

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 da apresentação da vista de ícones personalizados

Colunas primárias

Na vista da lista de grelhas, os ícones personalizados aplicados na coluna primária da tabela substituem o ícone predefinido gerado pelo sistema.

Outras colunas

Na vista da lista de grelhas, os ícones personalizados aplicados a uma coluna que não é a coluna primária da tabela são apresentados como um ícone secundário, além do ícone predefinido gerado pelo sistema.

Formulários de cartão

Os ícones personalizados substituem o ícone predefinido gerado pelo sistema quando a vista está configurada para utilizar um formulário de cartão.

Veja também

Compreender as vistas de aplicações condicionadas por modelo