Del via


Føje brugerdefinerede ikoner til en listevisning

Dette emne gælder for Dynamics 365 Customer Engagement (on-premises). Du kan finde Power Apps-versionen af dette emne under: Vise brugerdefinerede ikoner sammen med værdier i listevisninger

Systemadministratorer og systemtilpassere kan føje grafik til en visning og oprette den logik, der bruges til at vælge en grafik baseret på kolonneværdien, ved hjælp af JavaScript. Egenskaben bruges til at tilpasse listevisninger, der viser ikoner ved siden af tekst eller numeriske værdier, f.eks. i denne Klassificering-kolonne i visningen Alle salgsmuligheder.

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

Brugerdefinerede ikoner i listevisninger kan vises i Unified Interface, klassisk webklient, 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 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 dette emne.

  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. Benyt følgende fremgangsmåde:

    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>Objekter og finde det objekt, som du vil tilpasse.

  9. Udvid dit objekt, og vælg dets ikon Visninger.

  10. Du får nu vist en liste over visninger for det valgte objekt. 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 hvert objekt, hver visning og kolonne efter behov.

  15. Når du er klar, skal du vælge Udgiv alle tilpasninger for at udgive æ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 Aktiver sprog og Installer eller opgrader sprogpakker til Dynamics 365 for Customer Engagement. 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.

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

Se også

Oprette eller redigere visninger