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 na Interface Unificada, cliente Web legado, aplicação móvel e Aplicação para Outlook.
Nota
Os ícones personalizados não estão disponíveis quando a aplicação está no modo mobile offline.
Adicionar gráficos personalizados e Javascript como recursos Web
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).
Escreva uma ou mais funções de Javascript que definam que ícones apresentar para que valores (normalmente, precisará de uma função para cada coluna que pretende personalizar). Cada função tem de aceitar um objeto de dados coluna e um código de idioma (LCID) como entrada e devolver uma matriz contendo 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.
Inicie sessão no seu ambiente como administrador e abra o explorador de soluções.
A janela de pop-up da Solução Predefinida é aberta. Navegue para Componentes > Recursos Web aqui.
Agora, irá carregar os seus gráficos personalizados, um de cada vez, como recursos Web. Selecione o botão Novo na barra de ferramentas para criar um novo recurso Web. É aberta outra janela de pop-up para o ajudar a criar o recurso. Siga estes passos:
Dê ao novo recurso um Nome significativo. Este é o nome que irá utilizar para fazer referência a cada gráfico a partir do código Javascript.
Defina o Tipo como o do formato de gráfico que utilizou para guardar o ficheiro de gráfico (PNG, JPEG ou GIF).
Selecione Escolher Ficheiro para abrir uma janela do navegador de ficheiro. Utilize-a para localizar e selecionar o seu ficheiro de gráfico.
Adicione um Nome a Apresentar e/ou uma Descrição, se quiser.
Selecione Guardar e feche a janela do Recurso Web.
Repita o passo anterior para cada um dos ficheiros de gráfico.
Agora, irá adicionar 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. Efectue o seguinte procedimento:
Dê ao novo recurso um Nome significativo.
Defina o Tipo como Script (JScript).
Selecione Editor de Texto (ao lado da definição de Tipo) para abrir uma janela do editor de texto. Cole o código Javascript no editor de texto e selecione OK para o guardar.
Adicione um Nome a Apresentar e/ou uma Descrição, se quiser.
Selecione Guardar e feche a janela do Recurso Web.
Na janela de pop-up Solução Predefinida ainda aberta, expanda a árvore Componentes > Tabelas e localize a tabela que pretende personalizar.
Expanda a tabela e selecione o ícone Vistas.
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.
É 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.
Selecione OK para fechar o diálogo Alterar Coluna.
Selecione Guardar e Fechar para guardar a vista.
Repita estes passos para cada tabela, vista e coluna conforme necessário.
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 de Javascript para apresentar ícones e descrições personalizados espera os dois argumentos seguintes: o objeto coluna completo especificado no esquema xml e o ID de Região do utilizador chamador (LCID). O parâmetro LCID permite-lhe especificar o texto de descrição em vários idiomas. Para mais informações sobre idiomas suportados pelo ambiente, consulte Ativar Idiomas e Instalar ou atualizar language packs. Para uma lista de valores de IDs de Região (LCID) que pode utilizar no código, consulte IDs de Região atribuídos pela Microsoft.
Supondo que irá 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.
Nota: se for necessário recolher dados para determinar o ícone, a Interface Unificada suporta a devolução de um objeto JavaScript Promise que resolve para um booleano (semelhante às regras da faixa). Não utilize um XMLHttpRequest (XHR) sincronizado na sua função personalizada.
O seguinte exemplo de código apresenta ícones e descrições com base num dos 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.
Importante
Este exemplo requer a tabela oportunidade, que está disponível com a aplicação 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 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 é o ecrã da coluna primária da tabela 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.
Consulte também
Compreender vistas da aplicação orientada por modelos
Nota
Pode indicar-nos as suas preferências no que se refere ao idioma da documentação? Responda a um breve inquérito. (tenha em atenção que o inquérito está em inglês)
O inquérito irá demorar cerca de sete minutos. Não são recolhidos dados pessoais (declaração de privacidade).