Vis 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 en grafikk basert på kolonneverdien ved hjelp av 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 modelldrevne apper, mobilapper og apper for Outlook.

Legg til egendefinert grafikk og JavaScript som nettressurser

1. 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).

2. 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 et array som inneholder et bildenavn og verktøytipstekst. Se Eksempel på JavaScript-funksjon for en eksempelfunksjon senere i denne artikkelen.

3. Logg på miljøet, og åpne løsningsutforskeren.

4. Løsningsfanen åpnes. Gå til Komponenter>Nettressurser.

5. Last opp egendefinerte grafikkelementer, ett om gangen, som nettressurser. Velg Ny på verktøylinjen for å opprette en ny nettressurs. Et popup-vindu åpnes for å hjelpe deg å opprette ressursen. Gjør følgende:

   1. Gi den nye ressursen et meningsfullt navn. Dette er navnet du bruker til å henvise til hver grafikk fra JavaScript-koden.

   2. Sett Type til grafikkformatet du brukte til å lagre grafikkfilen (PNG, JPEG eller GIF).

   3. Velg Velg fil for å åpne et filutforskervindu. Bruk det til å finne og velge grafikkfilen.

   4. Legg til et Visningsnavn og/eller en Beskrivelse hvis du ønsker.

   5. Velg Lagre, og lukk deretter Nettressurs-vinduet.

6. Gjenta det forrige trinnet for hver grafikkfil du har.

7. Legg til ditt JavaScript som den siste nettressursen. Velg Ny på verktøylinjen for å opprette en ny nettressurs. Et nytt popup-vindu åpnes for å hjelpe deg med å opprette ressursen. Gjør følgende:

   1. Skriv inn et beskrivende navn på den nye ressursen.

   2. Sett Type til Skript (JScript).

   3. Velg Text Editor (ved siden av Type-innstillingen) for å åpne et tekstredigeringsvindu. Lim inn JavaScript-koden her, og velg OK for å lagre den.

   4. Legg til et Visningsnavn og/eller en Beskrivelse hvis du ønsker.

   5. Velg Lagre, og lukk deretter Nettressurs-vinduet.

8. Med løsningsfanen fremdeles åpen utvider du treet Komponenter>Tabeller og finner tabellen du vil tilpasse.

9. Utvid tabellen og velg Visninger-ikonet for den.

10. 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.

11. 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. Endre kolonneegenskaper-dialogboksen åpnes; angi følgende innstillinger her:

    • Nettressurs: Angi navnet på nettressursen 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.

12. Velg OK for å lukke dialogboksen Endre kolonneegenskaper.

13. Velg Lagre og lukk for å lagre visningen.

14. Gjenta disse trinnene for hver tabell, visning og kolonne etter behov.

15. Når du er klar, velger du Publiser alle tilpassinger for å publisere endringene. Lukk deretter Default Solution-vinduet.

Eksempel på JavaScript-funksjon

JavaScript-funksjonen for visning av egendefinerte ikoner og verktøytips forventer følgende to argumenter: hele radobjektet som er angitt i layoutxml , og den kallende brukerens nasjonal innstillings-ID (LCID). LCID-parameteren lar deg angi teksten for verktøytipset på flere språk. Hvis du vil ha mer informasjon om språk som støttes, kan du se Region- og språkalternativer for miljøet ditt. 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 vil 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.

Eksempelkoden viser ikoner og verktøytips basert på én av tre verdier (1: Hot, 2: Warm, 3: Cold) i attributtet opportunityratingcode (Rating). Eksempelkoden viser også hvordan du viser lokalisert verktøytipstekst. Hvis dette eksemplet skal fungere, må du opprette tre bildenettressurser med 16 x 16-bilder med følgende navn: new_Hot, new_Warm og new_Cold.

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;  
}  

Visningsvirkemåte for egendefinert ikonvisning

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å visninger for modelldrevne apper