Mostrar iconas personalizadas xunto con valores en visualizacións de listas
Os administradores e personalizadores do ambiente de Power Apps poden engadir gráficas a unha visualización e establecer a lóxica utilizada para seleccionar unha gráfica segundo o valor da columna utilizando JavaScript. A capacidade permítelle personalizar as visualizacións de lista que mostran iconas xunto cos valores numéricos ou de texto.
Este exemplo mostra iconas personalizadas nunha vista para a táboa de oportunidades, que está dispoñible con certas aplicacións, como Dynamics 365 Sales. Pode amosar iconas personalizadas en vistas con outras táboas estándar, como a táboa de contas ou contactos, así como táboas personalizadas.
As iconas personalizadas nas vistas da lista poden mostrarse en Interface unificada, no cliente web herdado, na aplicación móbil e na aplicación para Outlook.
Nota
As iconas personalizadas non están dispoñibles cando a aplicación está no modo móbil sen conexión.
Engadir gráficos personalizados e JavaScript como recursos web
Crear os novos ficheiros de gráficos necesarios para a súa personalización. Recomendámoslle unha icona de tamaño de 16x16 píxeles (as imaxes máis grande poden reducirse).
Escriba unha ou máis funcións de JavaScript que establezan que iconas se mostrarán para os diferentes valores (normalmente, precisarás unha función para cada columna que desexa personalizar). Cada función debe aceptar un obxecto de datos de liña e un código de idioma (LCID) como entrada e devolver unha matriz que contén un nome de imaxe e texto de información sobre ferramentas. Para ver unha función de exemplo, consulte Función JavaScript de exemplo, máis adiante neste artigo.
Inicie sesión no seu ambiente como administrador e abra o explorador de solucións.
Abrirase a ventá emerxente Solución predefinida. Vaia a Compoñentes > Recursos web aquí.
Agora, ten que cargar os gráficos personalizados un a un, como recursos web. Seleccione o botón Novo na barra de ferramentas para crear un novo recurso web. Abrirase outra ventá para axudarlle a crear o recurso. Siga estes pasos:
Asigne ao dereito un Nome significativo. Este será o nome que vai utilizar para facer referencia a cada gráfico desde o código de JavaScript.
Defina o Tipo para o formato do gráfico que usou para gardar o ficheiro do gráfico (PNG, JPEG ou GIF).
Seleccione Escoller Ficheiro para abrir a ventá do explorador ficheiro. Úsea para buscar e seleccionar o ficheiro do gráfico.
Engada un Nome para Mostrar ou Descrición se o desexa.
Seleccione Gardar e peche a ventá Recurso Web.
Repita o paso anterior para cada ficheiro gráfico que teña.
Agora, engada o seu JavaScript como o recurso web final. Seleccione Novo na barra de ferramentas para crear un novo recurso web. Abrirase outra ventá para axudarlle a crear o recurso. Faga o seguinte:
Asigne ao dereito un Nome significativo.
Defina o Tipo para Script (JScript).
Seleccione Editor de Texto (xunto á configuración de Tipo) para abrir unha ventá do editor de texto. Pegue aquí o código de Javascript e seleccione Aceptar para gardalo.
Engada un Nome para Mostrar ou Descrición se o desexa.
Seleccione Gardar e peche a ventá Recurso Web.
Coa ventá emerxente de Solución predefinida aínda aberta, expanda a árbore Compoñentes > Táboas e localice a táboa que desexe personalizar.
Expanda a táboa e seleccione a icona Visualizacións.
Agora verá unha lista de visualizacións para a táboa seleccionada. Seleccione unha visualización da lista. Despois, abra a lista despregable Máis Accións na barra de ferramentas e seleccione Editar.
Abrirase unha ventá con controis de edición para a visualización seleccionada. Mostra cada columna que forma parte da visualización. Seleccione a columna de destino e, a seguir, seleccione Modificar Propiedades na caixa Tarefas Comúns. O diálogo Modificar Propiedades da Columna ábrese. Realice aquí os seguintes axustes:
Recurso web: especifique o nome do recurso web que creou para manter as funcións de Javascript (seleccione Explorar para escoller a partir dunha lista).
Nome da función: escriba o nome da función que escribiu para modificar a visualización e a columna seleccionada.
Seleccione Aceptar para pechar a caixa de diálogo Modificar propiedades da columna.
Seleccione Gardar e pechar para gardar a visualización.
Repita eses paso para cada táboa, visualización e columna, segundo sexa necesario.
Cando estea listo, seleccione Publicar Todas as Personalizacións para publicar as súas modificacións. Despois, peche a ventá de Solución Predefinida.
Función de exemplo de JavaScript
A función de JavaScript para mostrar información sobre ferramentas e iconas personalizadas espera os dous argumentos seguintes: o obxecto completo da fila en layoutxml e o LCID do usuario. O parámetro LCID permítelle especificar texto da información sobre ferramentas en varios idiomas. Para obter máis información sobre os idiomas compatibles co ambiente, consulte Activar idiomas e Instalar ou actualizar paquetes de idioma. Para obter unha lista de valores de ID local (LCID) que pode utilizar no seu código, consulte LCID atribuídos por Microsoft .
Se engade iconas personalizadas para un tipo de conxunto de opcións do atributo, que ten un conxunto limitado de opcións predefinidas, asegúrese de utilizar o valor de número enteiro das opcións en lugar da etiqueta, para evitar problemas de localización.
Nota: Se é necesario recuperar datos para determinar a icona, Interface unificada admite devolver un obxecto JavaScript Promise que se resolva nun booleano (semellante ás regras de fita). Non use un XMLHttpRequest (XHR) síncrona na súa función personalizada.
O seguinte código de exemplo mostra iconas e información sobre ferramentas segundo de un a tres valores (1: Quente, 2: Morno, 3: Frío) no atributo de opportunityratingcode (Clasificación). O código de exemplo tamén mostra como mostrar o texto localizado de información sobre ferramentas. Para que funcione este exemplo, debe crear tres recursos web de imaxes con imaxes de 16x16 cos nomes seguintes: new_Hot, new_Warm e new_Cold.
Importante
Este exemplo precisa a táboa de oportunidade, que está dispoñible coa aplicacións 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 visualización de iconas personalizadas
Columnas primarias
Na vista da lista de grades, as iconas personalizadas aplicadas á columna principal da táboa substitúen a icona xerada polo sistema por defecto.
Outras columnas
Na vista da lista de grade, as iconas personalizadas aplicadas a unha columna que non é a columna principal da táboa móstranse como unha icona secundaria ademais da icona xerada polo sistema por defecto.
Formularios de cartón
As iconas personalizadas substitúen a icona xerada polo sistema predeterminada cando a vista está configurada para usar un formulario de cartón.
Consulte tamén
Nocións sobre as visualizacións de aplicacións controladas por modelos
Nota
Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)
Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).