Visualitzar icones personalitzades al costat de valors a les vistes de llista
Els administradors i personalitzadors d'entorn del Power Apps poden afegir gràfics a una vista i establir la lògica utilitzada per seleccionar el gràfic basat en valors de columna utilitzant el JavaScript. La capacitat us permet personalitzar les visualitzacions de llista que mostren icones al costat de text o valors numèrics.
En aquest exemple es mostren les icones personalitzades en una visualització de la taula d'oportunitats, que està disponible amb algunes aplicacions, com ara el Dynamics 365 Sales. Podeu visualitzar icones personalitzades a les visualitzacions amb altres taules estàndard, com ara la taula de compte o de contactes, així com taules personalitzades.
Les icones personalitzades de les visualitzacions de llista poden mostrar a la interfície unificada, el client web del llegat, l'aplicació mòbil i l'aplicació per a l'Outlook.
Nota
Les icones personalitzades no estan disponibles quan l'aplicació està en mode mòbil fora de línia.
Afegir gràfics personalitzats i el JavaScript com a recursos web
Creeu nous fitxers de gràfics necessaris per a la personalització. Us recomanem una mida d'icona de 16 x 16 píxels (les imatges més grans es reduiran).
Escriure una o més funcions JavaScript que estableixen quines icones a mostrar quins valors (normalment necessitareu una funció per a cada columna que voleu personalitzar). Cada funció ha d'acceptar un objecte de dades de fila i un codi d'idioma (LCID) com a entrada i retornar una matriu que contingui el nom d'una imatge i el text d'indicador de funció. Per veure un exemple de funció, consulteu Funció de JavaScript d'exemple més endavant en aquest article.
Inicieu la sessió a l'entorn com a administrador i obriu l'explorador de solucions.
S'obre la finestra emergent Solució per defecte. Aneu a Components > Recursos web.
Ara, carregareu els gràfics personalitzats un per un com a recursos web. Seleccioneu el botó Crea a la barra d'eines per crear un recurs web nou. S'obre una altra finestra emergent per ajudar-vos a crear el recurs. Seguiu aquests passos:
Assigneu un nom que tingui sentit al recurs nou. Aquest és el nom que veureu per fer referència a cada gràfic del codi de JavaScript.
A Tipus definiu el format del gràfic que heu utilitzar per desar el fitxer de gràfics (PNG, JPEG o GIF).
Seleccioneu Trieu el fitxer per obrir una finestra del navegador d'arxius. Utilitzeu-la per trobar i seleccionar el fitxer de gràfics.
Afegiu un nom de visualització o una descripció si voleu.
Seleccioneu Desa i tanqueu la finestra Recurs web.
Repetiu el pas anterior per a cada fitxer de gràfics que tingueu.
Ara, afegireu el JavaScript com el recurs web final. Seleccioneu Crea a la barra d'eines per crear un recurs web nou. S'obre una altra finestra emergent per ajudar-vos a crear el recurs. Feu el següent:
Assigneu un nom que tingui sentit al recurs nou.
Establiu Tipus en Script (JScript).
Seleccioneu Editor de text (al costat de la configuració Tipus) per obrir una finestra d'editor de text. Enganxeu el codi de Javascript i seleccioneu D'acord per desar-lo.
Afegiu un nom de visualització o una descripció si voleu.
Seleccioneu Desa i tanqueu la finestra Recurs web.
Amb la finestra emergent Solució per defecte oberta, amplieu l'arbre Components > Taules i trobeu la taula que voleu personalitzar.
Expandiu la taula i seleccioneu-ne la icona Visualitzacions.
Ara veureu una llista de visualitzacions de la taula seleccionada. Seleccioneu una vista de la llista. Obriu la llista desplegable Més accions a la barra d'eines i trieu Edita.
S'obre una finestra emergent amb controls per editar la visualització seleccionada. Mostra cada columna que forma part de la visualització. Seleccioneu la columna de destinació i, a continuació, Canvia les propietats al quadre Tasques comunes. S'obre el quadre de diàleg Canvia les propietats de la columna; definiu la configuració següent:
Recurs web: especifiqueu el nom del recurs web que heu crear per mantenir les funcions de Javascript (seleccioneu Navega per tirar-les d'una llista).
Nom de la funció: escriviu el nom de la funció que vàreu escriure per modificar la visualització i la columna seleccionades.
Seleccioneu D'acord per tancar el quadre de diàleg Canvia les propietats de la columna.
Seleccioneu Desa i tanca per desar la visualització.
Repetiu aquests passos per a cada taula, visualització i columna segons sigui necessari.
Quan estigueu preparat, seleccioneu Publica totes les personalitzacions per publicar els canvis. A continuació, tanqueu la finestra Solució per defecte.
Funció de JavaScript d'exemple
La funció de JavaScript per visualitzar icones personalitzades i indicadors de funció espera els dos arguments següents: l'objecte de la fila complet especificar al fitxer layoutxml i l'identificador local de l'usuari que truca (LCID). El paràmetre del LCID permet especificar el text d'indicador de funció en diversos idiomes. Per obtenir més informació sobre es idiomes compatibles amb l'entorn, consulteu Habilitar les llengües i Instal·lar o actualitzar els paquets de llengua. Per obtenir una llista dels valors d'identificadors locals (LCID) que podeu utilitzar al vostre codi, consulteu Identificadors locals assignats per Microsoft.
Suposant que afegireu icones personalitzades per a un tipus de conjunt d'opcions d'atribut, que té un conjunt limitat d'opcions predefinides, assegureu-vos que utilitzeu el valor enter de les opcions en comptes de l'etiqueta per evitar els problemes de localització.
Nota: si cal recuperar les dades per determinar la icona, la Interfície unificada admet la devolució d'un objecte Promise de JavaScript que es resolgui en un booleà (similar a les regles de la franja). No utilitzeu una sol·licitud XMLHttpRequest síncrona (XHR) en la vostra funció personalitzada.
El codi d'exemple següent mostra icones i indicadors de funció basats en un dels tres valors (1: Molt interessant, 2: Una mica interessant, 3: Gens interessant) a l'atribut opportunityratingcode (Nivell d'interés). El codi d'exemple també mostra com visualitzar el text d'indicador de funció localitzat. Perquè aquest exemple funcioni, heu de crear tres recursos web d'imatges amb imatges de 16x16 amb els noms següents: new_Hot, new_Warm i new_Cold.
Important
Aquest exemple requereix la taula d'oportunitat, que està disponible amb l'aplicació 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;
}
Comportament de visualització de la visualització d'icones personalitzades
Columnes principals
A la visualització de la llista de quadrícula, les icones personalitzades aplicades a la columna principal de la taula substitueixen la icona generada per defecte pel sistema.
Altres columnes
A la visualització de la llista de quadrícula, les icones personalitzades aplicades a una columna que no és la columna principal de la taula es mostren com a icona secundària a més de la icona generada per defecte pel sistema.
Formats de targeta
Les icones personalitzades reemplacen la icona generada per defecte del sistema quan la visualització es configura per utilitzar un format de targeta.
Consulteu també
Informació sobre les visualitzacions d'aplicacions basades en models
Nota
Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)
Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).