Visa anpassade ikoner bredvid värden i listvyer
Power Apps miljö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. Funktionen låter dig anpassa listvyer som visar ikonerna bredvid text eller numeriska värden.
I det här exemplet visas anpassade ikoner i en vy för tabellen affärsmöjlighet, som är tillgänglig för vissa appar, till exempel Dynamics 365 Sales. Du kan visa anpassade ikoner i vyer med andra standardtabeller, t.ex. konto- eller kontakttabellen samt anpassade tabeller.
Anpassade ikoner i listvyer kan visas i enhetligt gränssnitt, äldre webbklient, mobilapp och app för Outlook.
Anteckning
Anpassade ikoner är inte tillgängliga när appen är i mobilt offlineläge.
Lägg till egen grafik och JavaScript som webbresurser
Skapa nya grafiska filer som behövs för anpassningen. Vi rekommenderar en ikonstorlek på 16 x 16 bildpunkter (större bilder skalas ned).
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.
Logga in i din miljö som administratör och öppna lösningsutforskaren.
Popufönstret för Standardlösningen visas. Navigera till Komponenter > Webbresurser här.
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. Följ stegen nedan:
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.
Ange Typen som det grafiska format som du har använt för att spara bildfilen (PNG, GIF eller JPEG).
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.
Lägg till ett Visningsnamn och/eller en Beskrivning om du vill.
Välj Spara och stäng sedan fönstret Webbresurs.
Upprepa föregående steg för varje bildfil som du har.
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:
Ange ett meningsfullt Namn för den nya resursen.
Ange Typen som Skript (JScript).
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.
Lägg till ett Visningsnamn och/eller en Beskrivning om du vill.
Välj Spara och stäng sedan fönstret Webbresurs.
Med popup-fönstret för Standardlösning fortfarande öppet, expandera trädet Komponenter > Tabeller och leta upp den tabell som du vill anpassa.
Expandera din tabell och markera dess Vyer-ikon.
Du ser nu en lista över vyer för den valda tabellen. Välj en vy i listan. Öppna sedan listrutan Fler åtgärder i verktygsfältet och välj Redigera.
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.
Välj OK för att stänga dialogfönstret för Ändra kolumnegenskaper.
Välj Spara och stäng för att spara din vy.
Upprepa dessa steg för varje tabell, vy och kolumn efter behov.
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 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.
Viktigt
I det här exemplet krävs tabellen affärsmöjlighet som är tillgänglig för 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;
}
Anpassad ikon för visa beteende
Primära kolumner
I vyn rutnätsvy ersätter de anpassade ikoner som används för tabellens primära kolumn den systemgenererade ikonen.
Andra kolumner
I vyn rutnätsvy visas anpassade ikoner som används för en kolumn som inte visas som en sekundär symbol som en sekundär ikon, förutom standardikonen som genereras av systemet.
Kortformulär
Anpassade ikoner ersätter ikonen som skapas av systemet när vyn är konfigurerad att använda ett kortformulär.
Se även
Anteckning
Kan du berätta om dina inställningar för dokumentationsspråk? Svara i en kort undersökning. (observera att undersökningen är på engelska)
Undersökningen tar ungefär sju minuter. Inga personuppgifter samlas in (sekretesspolicy).