Vise egendefinerte ikoner ved siden av verdier i listevisninger
Power Apps-miljøadministratorer og -tilpassere kan legge til grafikk i en visning og etablere logikken som brukes til å velge grafikken, basert på kolonneverdien med JavaScript. Denne funksjonen lar deg tilpasse listevisninger som viser ikoner ved siden av teksten eller numeriske verdier.
Dette eksemplet viser egendefinerte ikoner i en visning for salgsmulighet-tabellen, som er tilgjengelig med bestemte apper, for eksempel Dynamics 365 Sales. Du kan vise egendefinerte ikoner i visninger med andre standardtabeller, for eksempel tabellen for forretningsforbindelse eller kontaktperson, samt egendefinerte tabeller.
Egendefinerte ikoner i listevisninger kan vises i Enhetlig grensesnitt, eldre webklienter, mobilapper og apper for Outlook.
Obs!
Egendefinerte ikoner er ikke tilgjengelige når appen er i modusen for Mobile offline-modus.
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 denne artikkelen.
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. Følg denne fremgangsmåten:
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 > Tabeller og finner tabellen som du vil tilpasse.
Utvid din tabell, og velg Visninger-ikonet for den.
Nå kan du se en liste over visninger for den valgte tabellen. 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 tabell, 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. 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.
Viktig
Dette eksemplet krever salgsmulighet-tabellen, som er tilgjengelig med Dynamics 365 Sales-appen.
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;
}
Funksjonalitet for visning av egendefinerte ikoner
Hovedkolonner
I rutenettvisningen kan egen definerte ikoner som brukes på hovedkolonnen for tabellen, erstatte det standard system genererte ikonet.
Andre kolonner
I rutenettvisningen vises egendefinerte ikoner som brukes på en kolonne som ikke er hovedkolonne for tabellen, som et sekundært ikon i tillegg til det standard systemgenererte ikonet.
Kortskjemaer
Egendefinerte ikoner erstatter standard systemgenerert ikon når visningen konfigureres til å bruke et kortskjema.
Se også
Forstå modelldrevne appvisninger
Obs!
Kan du fortelle oss om språkinnstillingene for dokumentasjonen? Ta en kort undersøkelse. (vær oppmerksom på at denne undersøkelsen er på engelsk)
Undersøkelsen tar rundt sju minutter. Det blir ikke samlet inn noen personopplysninger (personvernerklæring).