Lägga till egna ikoner i en listvy

Det här ämnet gäller för Dynamics 365 Customer Engagement (on-premises). En Power Apps-version för det här ämnet finns i: Visa anpassade ikoner bredvid värden i listvyer

Administratörer och anpassare kan lägga till bilder i en vy och skapa den logik som används för att välja bilden baserat på ett kolumnvärde med hjälp av JavaScript. Möjligheten låter dig anpassa vyer som visar ikonerna bredvid text eller numeriska värden, t.ex. i den här kolumnen klassificering i vyn alla affärsmöjligheter.

Anpassade ikoner i listvyer kan visas i enhetligt gränssnitt, klassisk webbklient, mobilapp och app för Outlook.

Lägg till egen grafik och JavaScript som webbresurser

1. Skapa nya grafiska filer som behövs för anpassningen. Vi rekommenderar en ikonstorlek på 16 x 16 bildpunkter (större bilder skalas ned).

2. Skriv en eller flera JavaScript-funktioner som fastställer vilka ikoner som ska visas för vilka värden (vanligtvis behövs en funktion för varje kolumn som du vill anpassa). Varje funktion måste acceptera ett raddataobjekt och en språkkod (LCID) som indata, och returnerar en matris som innehåller ett bildnamn och en beskrivningstext. För exempelfunktion, se Exempel på JavaScript-funktionen senare i det här avsnittet.

3. Logga in i din miljö som administratör och öppna lösningsutforskaren.

4. Popufönstret för Standardlösningen visas. Navigera till Komponenter>Webbresurser här.

5. Nu ska du överföra dina anpassade bilder, en i taget, som webbresurser. Välj knappen Ny i verktygsfältet för att skapa en ny webbresurs. Ett annat popup-fönster öppnas för att hjälpa dig skapa resursen. Gör följande:

   1. Ange ett meningsfullt Namn för den nya resursen. Detta är namnet som du använder för att referera till respektive bild från din JavaScript-kod.

   2. Ange Typen som det grafiska format som du har använt för att spara bildfilen (PNG, GIF eller JPEG).

   3. Välj Välj fil så öppnas ett webbläsarfönster för filer. Använd det för att söka efter och markera din bildfil.

   4. Lägg till ett Visningsnamn och/eller en Beskrivning om du vill.

   5. Välj Spara och stäng sedan fönstret Webbresurs.

6. Upprepa föregående steg för varje bildfil som du har.

7. Nu lägger du till ditt JavaScript som den slutliga webbresursen. Välj knappen Ny i verktygsfältet för att skapa en ny webbresurs. Ett annat popup-fönster öppnas för att hjälpa dig skapa resursen. Gör följande:

   1. Ange ett meningsfullt Namn för den nya resursen.

   2. Ange Typen som Skript (JScript).

   3. Välj Textredigerare (bredvid inställningen Typ) för att öppna ett textredigeringsfönster. Klistra in din Javascript-kod här och välj sedan OK för att spara den.

   4. Lägg till ett Visningsnamn och/eller en Beskrivning om du vill.

   5. Välj Spara och stäng sedan fönstret Webbresurs.

8. Med popup-fönstret för Standardlösning fortfarande öppet, expandera trädet Komponenter>Entiteter och leta upp den entitet som du vill anpassa.

9. Expandera din entitet och markera dess Vyer-ikon.

10. Du ser nu en lista över vyer för den valda entiteten. Välj en vy i listan. Öppna sedan listrutan Fler åtgärder i verktygsfältet och välj Redigera.

11. Ett nytt popup-fönster öppnas med kontroller för att redigera den valda vyn. Varje kolumn som ingår i vyn visas. Markera målkolumnen och välj sedan Ändra egenskaper i rutan Vanliga uppgifter. Dialogrutan Ändra kolumnegenskaper. Gör följande inställningar här:

    • Webbresurs: Ange namnet på den webbresurs som du skapade för att förvara dina Javascript-funktioner (välj Bläddra för att välja i en lista).

    • Funktionsnamn: Ange namnet på den funktion som du skrev för att ändra den markerade kolumnen och vyn.

12. Välj OK för att stänga dialogfönstret för Ändra kolumnegenskaper.

13. Välj Spara och stäng för att spara din vy.

14. Upprepa dessa steg för varje entitet, vy och kolumn efter behov.

15. När du är klar väljer du Publicera alla anpassningar för att publicera dina ändringar. Du kan sedan stänga fönstret för Standardlösning.

Exempel på JavaScript-funktionen

JavaScript-funktionen för att visa anpassade ikoner och knappbeskrivningar förväntar sig följande två argument: Hela radobjektet som anges i layoutxml, samt den anropande användarens språkvariant-ID (LCID). LCID-parametern låter dig ange beskrivningstexter på flera olika språk. För mer information om vilka språk som stöds av miljön, se Aktivera språk och Installera eller uppgradera språkpaket för Dynamics 365 for Customer Engagement. För att se en lista över värden för språkvariant-ID (LCID) som du kan använda i din kod, se Språk-ID tilldelas av Microsoft .

Under förutsättning att du kommer att lägga till anpassade ikoner för en alternativ uppsättning attribut som har en begränsad uppsättning fördefinierade alternativ, kontrollera att du använder alternativen heltalsvärde i stället för etikett för att undvika lokaliseringsproblem.

Obs! Om du behöver hämta data för att identifiera ikonen stöder Enhetligt gränssnitt retur av ett JavaScript Promise-objekt som omvandlas till ett booleskt (liknande regler för menyfliksområdet). Använd inte en synkron XMLHttpRequest (XHR) i den anpassade funktionen.

Följande exempelkod visar ikoner och knappbeskrivningar baserat på ett av tre värden (1: Het 2: Varm 3: Kall) i opportunityratingcode (klassificeringsattributet). Kodexemplet visar också hur lokaliserad knappbeskrivningstext bör visas. För att det här exemplet ska fungera måste du skapa tre bildwebbresurser med 16x16-bilder med följande namn: new_Hot, new_Warm och 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 även

Skapa eller redigera vyer