Legge til egendefinerte ikoner i en listevisning
Dette emnet gjelder for Dynamics 365 Customer Engagement (on-premises). Du finner Power Apps-versjonen for dette emnet her: Vis egendefinerte ikoner ved siden av verdier i listevisninger
Administratorer og tilpassere kan legge til grafikk i en visning og etablere logikken som brukes til å velge en grafikk, basert på kolonneverdien med JavaScript. Med funksjonen kan du tilpasse listevisninger som viser ikonene ved siden av teksten eller numeriske verdier, for eksempel i denne Vurdering-kolonnen i Alle salgsmuligheter visningen.
Egendefinerte ikoner i listevisninger kan vises i Enhetlig grensesnitt, klassiske webklienter, mobilapper og apper for Outlook.
Legge til egendefinert grafikk og JavaScript som webressurser
Opprett de nye grafikkfilene som trengs for tilpassingen. Vi anbefaler en ikonstørrelse på 16 x 16 piksler (større bilder vil bli skalert ned).
Skriv én eller flere JavaScript-funksjoner som definerer hvilke ikoner som skal vises for hvilke verdier (vanligvis trenger du én funksjon for hver kolonne du vil tilpasse). Hver funksjon må godta et raddataobjekt og en språkkode (LCID) som inndata, og returnere en matrise som inneholder et bildenavn og verktøytipstekst. Se Eksempel på JavaScript-funksjon for en eksempelfunksjon senere i dette emnet.
Logg på miljøet som administrator, og åpne løsningsutforskeren.
Popup-vinduet Standardløsning åpnes. Gå til Komponenter>Webressurser.
Nå skal du laste opp egendefinerte grafikk, én om gangen, som webressurser. Velg Ny-knappen på verktøylinjen for å opprette en ny webressurs. Et nytt popup-vindu åpnes for å hjelpe deg med å opprette ressursen. Gjør følgende:
Skriv inn et beskrivende navn på den nye ressursen. Dette er navnet du bruker til å referere til hver enkelt grafikkforekomst fra JavaScript-koden.
Sett Type til grafikkformatet du brukte til å lagre grafikkfilen (PNG, JPEG eller GIF).
Velg Velg fil for å åpne et filleservindu. Bruk det til å finne og velge grafikkfilen.
Legg til et Visningsnavn og/eller en Beskrivelse hvis du ønsker.
Velg Lagre, og lukk deretter Webressurs-vinduet.
Gjenta det forrige trinnet for hver grafikkfil du har.
Nå skal du legge til ditt JavaScript som endelig webressurs. Velg Ny på verktøylinjen for å opprette en ny webressurs. Et nytt popup-vindu åpnes for å hjelpe deg med å opprette ressursen. Gjør følgende:
Skriv inn et beskrivende navn på den nye ressursen.
Sett Type til Skript (JScript).
Velg Tekstredigering (ved siden av Type-innstillingen) for å åpne et tekstredigeringsvindu. Lim inn Javascript-koden her, og velg OK for å lagre den.
Legg til et Visningsnavn og/eller en Beskrivelse hvis du ønsker.
Velg Lagre, og lukk deretter Webressurs-vinduet.
Med Standardløsning-popup-vinduet fremdeles åpent, utvider du treet Komponenter>Enheter og finner enheten som du vil tilpasse.
Utvid din enhet, og velg Visninger-ikonet for enheten.
Nå kan du se en liste over visninger for den valgte enheten. Velg en visning fra listen. Åpne rullegardinlisten Flere handlinger på verktøylinjen, og velg Rediger.
Et popup-vindu åpnes med kontroller for å redigere den valgte visningen. Den viser hver kolonne som er del av visningen. Velg målkolonnen, og velg deretter Endre egenskaper i Vanlige oppgaver-boksen. Dialogboksen Endre kolonneegenskaper åpnes. Angi følgende innstillinger her:
Webressurs: Angi navnet på webressursen som du opprettet for Javascript-funksjonene (velg Bla gjennom for å velge fra en liste).
Funksjonsnavn: Skriv inn navnet på funksjonen som du skrev for å endre den merkede kolonnen og visningen.
Velg OK for å lukke dialogboksen Endre kolonneegenskaper.
Velg Lagre og lukk for å lagre visningen.
Gjenta disse trinnene for hver enhet, visning og kolonne etter behov.
Når du er klar, velger du Publiser alle tilpassinger for å publisere endringene. Lukk deretter Standardløsning-vinduet.
Eksempel på JavaScript-funksjon
JavaScript-funksjonen for å vise egendefinerte ikoner og verktøytips forventer følgende to argumenter: hele radobjektet angitt i layoutxml og den anropende brukerens ID for nasjonal innstilling (LCID). LCID-parameteren lar deg angi teksten for verktøytipset på flere språk. Hvis du vil ha mer informasjon om språkene som støttes av miljøet, kan du se Aktivere språk og Installere eller oppgradere språkpakker for Dynamics 365 for Customer Engagement. Hvis du vil ha en liste over ID-verdier for nasjonal innstilling (LCID) som du kan bruke i koden, kan du se ID-er for nasjonal innstilling tilordnet av Microsoft.
Hvis du skal legge til egendefinerte ikoner for et attributt av typen alternativsett, som har et begrenset sett med forhåndsdefinerte alternativer, må du passe på at du bruker heltallsverdien for alternativene i stedet for etiketten for å unngå lokaliseringsproblemer.
Obs! Hvis det kreves for å hente data for å fastslå ikonet, støtter Enhetlig grensesnitt retur av et JavaScript Promise-objekt som løses til en boolsk verdi (på samme måte som regler på båndet). Ikke bruk en synkron XMLHttpRequest (XHR) i den egendefinerte funksjonen.
Følgende eksempelkode viser ikoner og verktøytips basert på én av tre verdier (1: Meget interessert, 2: Interessert, 3: Lite interessert) i attributtet opportunityratingcode (rangering). Eksempelkoden viser også hvordan du viser lokalisert verktøytipstekst. For at dette eksemplet skal fungere, må du opprette tre bildewebressurser med 16 x 16 bilder med følgende navn: ny_Meget interessert, ny_Interessert og ny_Lite interessert.
"use strict";
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;
}