Vise brugerdefinerede ikoner sammen med værdier i listevisninger

Power Apps-miljøadministratorer og systemtilpassere kan føje grafik til en visning og oprette den logik, der bruges til at vælge grafik baseret på kolonneværdien, ved hjælp af JavaScript. Du kan bruge egenskaben til at tilpasse listevisninger, der viser ikoner sammen med tekst eller numeriske værdier.

I dette eksempel vises brugerdefinerede ikoner i en visning til tabellen salgsmulighed, som er tilgængelig sammen med bestemte apps, f.eks. Dynamics 365 Sales. Du kan få vist brugerdefinerede ikoner i visninger sammen med andre standardtabeller, f.eks. tabellen firma eller kontakt, samt brugerdefinerede tabeller.

Visningen Alle salgsmuligheder med kolonnen Klassificering, som viser ikoner og tekstværdi.

Brugerdefinerede ikoner i listevisninger kan vises i Unified Interface, gammel webklient, mobilapp og app til Outlook.

Bemærk

Brugerdefinerede ikoner er ikke tilgængelige, når appen er i mobil offlinetilstand.

Tilføje brugerdefineret grafik og JavaScript som webressourcer

  1. Opret de nye grafikfiler, der er nødvendige for tilpasningen. Vi anbefaler en ikonstørrelse på 16 x 16 pixel (større billeder skaleres ned).

  2. Skriv en eller flere JavaScript-funktioner, der fastlægger, hvilke ikoner der vises for hvilke værdier (du skal typisk bruge én funktion for hver kolonne, du vil tilpasse). Hver funktion skal acceptere et rækkedataobjekt og en sprogkode (LCID) som input og returnerer en matrix, der indeholder et billednavn og tekst for værktøjstip. Du kan se en eksempelfunktion under Eksempel på JavaScript-funktion senere i denne artikel.

  3. Log på miljøet som administrator og åbne løsningsoversigt.

  4. Pop op-vinduet Standardløsning åbnes. Naviger til Komponenter > Webressourcer her.

  5. Nu kan du overføre dine brugerdefinerede grafikelementer, et ad gangen, som webressourcer. Vælg knappen Ny på værktøjslinjen for at oprette en ny webressource. Et andet pop op-vindue åbnes for at hjælpe dig med at oprette ressourcen. Udfør disse trin:

    1. Giv den nye ressource et sigende Navn. Dette er det navn, du vil bruge til at henvise til hvert grafikelement fra din JavaScript-kode.

    2. Angiv Type til det grafikformat, du har brugt til at gemme din grafikfil (PNG, JPEG eller GIF).

    3. Vælg Vælg fil for at åbne et filbrowservindue. Brug den til at søge efter og vælge en grafikfil.

    4. Angiv Vist navn og/eller Beskrivelse efter ønske.

    5. Vælg Gem, og luk derefter vinduet Webressource.

  6. Gentag forrige trin for hver enkelt grafikfil, som du har.

  7. Nu skal du tilføje din JavaScript som den endelige webressource. Vælg Ny på værktøjslinjen for at oprette en ny webressource. Et andet pop op-vindue åbnes for at hjælpe dig med at oprette ressourcen. Benyt følgende fremgangsmåde:

    1. Giv den nye ressource et sigende Navn.

    2. Angiv Type til Script (JScript).

    3. Vælg Teksteditor (ud for indstillingen Type) for at åbne et teksteditorvindue. Indsæt Javascript-koden her, og vælg OK for at gemme den.

    4. Angiv Vist navn og/eller Beskrivelse efter ønske.

    5. Vælg Gem, og luk derefter vinduet Webressource.

  8. Mens pop op-vinduet Standardløsning stadig er åbent, skal du udvide træet Komponenter > Tabeller og finde den tabel, som du vil tilpasse.

  9. Udvid din tabel, og vælg dens ikon Visninger.

  10. Du får nu vist en liste over visninger for den valgte tabel. Vælg en visning på listen. Åbn derefter rullelisten Flere handlinger på værktøjslinjen, og vælg Rediger.

  11. Der åbnes et pop op-vindue med kontrolelementer til redigering af den valgte visning. Vinduet viser de kolonner, der er en del af visningen. Vælg destinationskolonnen, og vælg derefter Skift egenskaber i boksen Almindelige opgaver. Dialogboksen Skift kolonneegenskaber åbnes. Kontroller følgende indstillinger her:

    • Webressource: Angiv navnet på den webressource, du har oprettet, for at bevare dine Javascript-funktioner (vælg Gennemse for at vælge på en liste).

    • Funktionsnavn: Skriv navnet på den funktion, du skrev, for at redigere den valgte kolonne og visning.

  12. Vælg OK for at lukke dialogboksen Skift kolonneegenskaber.

  13. Vælg Gem og luk for at gemme visningen.

  14. Gentag disse trin for hver tabel, visning og kolonne efter behov.

  15. Når du er klar, skal du vælge Publicer alle tilpasninger for at publicere ændringerne. Derefter kan du lukke vinduet Standardløsning.

Eksempel på JavaScript-funktion

JavaScript-funktionen til visning af brugerdefinerede ikoner og værktøjstip forventer følgende to argumenter: hele rækkeobjektet, som er angivet i layoutxml, og den kaldende brugers landestandard-id (LCID). Med LCID-parameteren kan du angive værktøjstip på flere sprog. Hvis du vil have flere oplysninger om de sprog, der understøttes af miljøet, skal du se Aktivere sprog og Installere eller opgradere sprogpakker. Hvis du vil se en liste over værdier for landestandard-id'er (LCID), som du kan bruge i din kode, skal du se Landestandard-id'er, der er tildelt af Microsoft.

Hvis du vil tilføje brugerdefinerede ikoner til en attribut af typen grupperet indstilling, som har et begrænset sæt foruddefinerede indstillinger, skal du sørge for at bruge heltalsværdien for indstillingerne i stedet for etiketten for at undgå problemer med lokaliseringen.

Bemærk: Hvis det er nødvendigt at hente data for at bestemme ikonet, understøtter Unified Interface returnering af et JavaScript Promise-objekt, der fortolkes som en boolesk værdi (i stil med regler for bånd). Brug ikke en synkron XMLHttpRequest (XHR) i den brugerdefinerede funktion.

Følgende eksempelkode viser ikoner og værktøjstip, der er baseret på én af tre værdier (1: Hot 2: Varm 3: Kold) i attributten opportunityratingcode (Klassificering). Eksempelkoden viser også, hvordan du får vist oversat tekst i værktøjstip. Hvis dette eksempel skal fungere, skal du oprette tre billedwebressourcer med 16x16-billeder med følgende navne: new_Hot, new_Warm og new_Cold.

Vigtigt

Dette eksempel kræver salgsmulighedstabellen, som er tilgængeligt i 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;  
}  

Visningsfunktion for brugerdefineret ikon

Kolonnen Primær

I gitterlistevisning vil de brugerdefinerede ikoner, der er anvendt på den primære kolonne i tabellen, erstatte det standardikon, der genereres af systemet.

Primær kolonne erstatter standardikon i visningen af brugerdefineret ikon.

Andre kolonner

I gitterlistevisningen vises brugerdefinerede ikoner i en kolonne, der ikke er den primære kolonnevisning, som et sekundært ikon, ud over det systemgenererede standardikon.

Ikke en brugerdefineret ikonvisning for tabellens primære kolonne.

Kortformularer

Brugerdefinerede ikoner erstatter det systemgenererede standardikon, når visningen er konfigureret til at bruge en kortformular.

Visning af brugerdefineret ikon for kortvisning.

Se også

Om modelbaserede appvisninger

Bemærk

Kan du fortælle os om dine sprogpræferencer for dokumentation? Tag en kort undersøgelse. (bemærk, at denne undersøgelse er på engelsk)

Undersøgelsen tager ca. syv minutter. Der indsamles ingen personlige data (erklæring om beskyttelse af personlige oplysninger).