Vis 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 funktionen 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 for salgsmuligheder, 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.

Brugerdefinerede ikoner i listevisninger kan vises i modelbaserede apps, mobilapp og app til Outlook.

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 returnere et array, 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 og åbn solution explorer.

4. Løsningsfanen åbnes. Gå til Komponenter>Webressourcer.

5. Nu kan du overføre dine brugerdefinerede grafikelementer, et ad gangen, som webressourcer. Vælg Ny på værktøjslinjen for at oprette en ny webressource. Et pop op-vindue åbnes for at hjælpe dig med at oprette ressourcen. Følg 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 Visningsnavn 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. Gør følgende:

   1. Giv den nye ressource et sigende Navn.

   2. Angiv Type til Script (JScript).

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

   4. Angiv Visningsnavn og/eller Beskrivelse efter ønske.

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

8. Mens løsningsfanen 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 ikonet Visninger.

10. Du får nu vist en liste over visninger for den valgte tabel. Vælg en visning fra 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. Den 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 indeholde dine JavaScript-funktioner (vælg Gennemse for at vælge fra 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 Default Solution.

Eksempel på JavaScript-funktion

JavaScript-funktionen til visning af brugerdefinerede ikoner og værktøjstip forventer følgende to argumenter: hele det rækkeobjekt, der er angivet i layoutxml, og den kaldende brugers Locale ID (LCID). Med LCID-parameteren kan du angive tekst til værktøjstip på flere sprog. Du kan få flere oplysninger om understøttede sprog under Regionale og sproglige indstillinger for dit miljø. Hvis du vil se en liste over værdier for locale-id'er (LCID), som du kan bruge i din kode, skal du se Locale-id'er tildelt af Microsoft.

Hvis du vil tilføje brugerdefinerede ikoner til en attribut af typen valgmulighedssæt, 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.

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 (Vurdering). 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.

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

Visningsadfærd for brugerdefineret ikonvisning

Primære kolonner

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

Andre kolonner

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

Betalingskortformularer

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

Se også

Forstå modelbaserede appvisninger