Visa anpassade ikoner istället för värden i listvyer

Gäller för Dynamics 365 (online), version 9.x

Vissa funktioner för relationsinsikter visar listvyer som visar ikoner istället för text eller numeriska värden i vissa kolumner. Även om denna funktion har skapats för att stödja specifika funktioner för relationsinsikter, kan administratörer och anpassare också lägga till nya bilder och upprätta den logik som används för att välja dem baserat på kolumnvärden med hjälp av JavaScript.

Anteckning

Rutnätsikoner visas endast i webbgränssnittet. De visas inte i Outlook eller i mobilappen.

Lägg till egen grafik och JavaScript som webbresurser i Dynamics 365

  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 på Dynamics 365 som administratör och gå till Inställningar > Anpassningar > Anpassa systemet.

  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. Klicka på 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 vill använda 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. Klicka på knappen Välj fil för att öppna ett webbläsarfönster för filen. 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. Klicka på 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. Klicka på 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. Klicka på Textredigerare (bredvid inställningen Typ) för att öppna ett textredigeringsfönster. Klistra in din Javascript-kod här och klicka på OK att spara den.

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

    5. Klicka på 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. Klicka på en vy i listan för att välja den. Öppna sedan rullgardinsmenyn 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. Klicka för att markera målkolumnen och klicka sedan på knappen Ä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 (klicka på bläddringsknappen för att välja från en lista).

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

  12. Klicka på OK för att stänga dialogfönstret för Ändra kolumnegenskaper.

  13. Klicka på 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 klickar du på Publicera alla anpassningar för att publicera dina ändringar. Sedan kan du stänga popup-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 Dynamics 365, se Aktivera språk och Installera eller uppgradera språkpaket för Dynamics 365. 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.

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 16 x 16-bilder i din Dynamics 365 -instans med följande namn: new_Hot, new_Warm och 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;  
}  

Detta resulterar i att ikoner visas med beskrivningar i den Omdöme-kolumn som vilar på värdet i respektive rad. Resultatet kan se ut så här:

Exempel på anpassad kolumngrafik

Se även

Skapa eller redigera vyer