Dodawanie ikon niestandardowych do widoku listy
Ten temat dotyczy platformy Dynamics 365 Customer Engagement (on-premises). Aby zapoznać się z wersją tego tematu dotyczącą usługi Power Apps, zobacz: Wyświetlanie w widokach list ikon niestandardowych razem z wartościami
Administratorzy i konfiguratorzy mogą dodawać grafiki do widoku i ustanawiać regułę służącą do wybierania grafiki na podstawie wartości kolumny, za pomocą kodu JavaScript. Funkcja ta umożliwia dostosowywanie widoków listy, w których są wyświetlane ikony wraz z wartościami liczbowymi lub tekstem, takie jak w tej kolumnie Klasyfikacja w widoku Wszystkie szanse sprzedaży.
Niestandardowe ikony w widokach list mogą być wyświetlane w ujednoliconym interfejsie, klasycznym kliencie sieci Web, aplikacji mobilnej i aplikacji dla programu Outlook.
Dodaj niestandardowe grafiki i JavaScript jako zasoby sieci Web
Utwórz nowe pliki graficzne potrzebne do dostosowania. Zaleca się, aby rozmiar ikon wynosił 16 x 16 pikseli (większe obrazy będą zmniejszane).
Napisz jedną lub kilka funkcji JavaScript określających, które ikony mają być wyświetlane dla których wartości (zazwyczaj potrzebna jest jedna funkcja dla każdej kolumny, którą chcesz dostosować). Każda funkcja musi akceptować obiekt wiersz danych i kod języka (LCID) jako dane wejściowe i zwracać tablicę zawierającą nazwę obrazu i tekst etykietki narzędzia. Przykład funkcji można znaleźć w Przykład funkcji JavaScript w dalszej części tego tematu.
Zaloguj się do środowiska jako administrator i otwórz eksplorator rozwiązań.
Otwiera się okno Rozwiązanie domyślne. Przejdź do Składniki>Zasoby sieci Web.
Teraz możesz przesłać niestandardowe grafiki, pojedynczo, jako zasoby sieci Web. Wybierz przycisk Nowy na pasku narzędzi, aby utworzyć nowy zasób sieci Web. Otwiera się kolejne okno pomocne podczas tworzenia zasobu. Należy wykonać następujące czynności:
Nadaj nowemu zasobowi znaczącą Nazwę. Jest to nazwa, która będzie używana do odwoływania się do każdej grafiki z kodu JavaScript.
Ustaw Typ formatu graficznego, którego użyłeś do zapisania pliku graficznego (PNG, JPEG lub GIF).
Wybierz Wybierz plik, aby otworzyć okno przeglądarki plików. Użyj go, aby znaleźć i wybrać plik graficzny.
Możesz dodać Wyświetlana nazwa i/lub Opis.
Wybierz Zapisz , a następnie zamknij okno Zasób sieci Web.
Powtórz poprzedni krok dla każdego pliku graficznego.
Teraz dodasz JavaScript jako ostateczny zasób sieci Web. Wybierz Nowy na pasku narzędzi, aby utworzyć nowy zasób sieci Web. Otwiera się kolejne okno pomocne podczas tworzenia zasobu. Należy wykonać następujące czynności:
Nadaj nowemu zasobowi znaczącą Nazwę.
Ustaw Typ na Skrypt (JScript).
Wybierz Edytor tekstu (obok ustawienia Typ), aby otworzyć okno Edytor tekstu. Tutaj wklej kod Javascript, a następnie wybierz OK, aby go zapisać.
Możesz dodać Wyświetlana nazwa i/lub Opis.
Wybierz Zapisz , a następnie zamknij okno Zasób sieci Web.
Z nadal otwartym oknem Rozwiązanie domyślne rozwiń drzewo Składniki>Encje i zlokalizuj encję, która chcesz dostosować.
Rozwiń swoją encję i wybierz jej ikonę Widoki.
Widzisz teraz listę widoków dla wybranej encji. Wybierz widok z listy. Następnie otwórz listę rozwijaną Więcej akcji na pasku narzędzi i wybierz Edytuj.
Otworzy się okno z formantami do edycji wybranego widoku. Ukaże ono każdą kolumnę, która jest częścią widoku. Wybierz kolumnę docelową, a następnie wybierz Zmień właściwości w polu Typowe zadania. Otworzy się dialog Zmienianie właściwości kolumny; Wprowadź następujące ustawienia:
Zasób sieci Web: Określ nazwę zasobu sieci Web, który utworzyłeś, aby przechowywać funkcje Javascript (wybierz Przeglądaj, aby wybrać z listy).
Nazwa funkcji: Wpisz nazwę funkcji, którą napisałeś, aby zmodyfikować zaznaczoną kolumnę i widok.
Wybierz OK, aby zamknąć okno dialogowe Zmienianie właściwości kolumny.
Wybierz Zapisz i zamknij, aby zapisać widok.
Powtórz te kroki dla każdej encji, widoku i kolumny, stosownie do potrzeb.
Gdy skończysz, wybierz Publikuj wszystkie dostosowania, aby opublikować zmiany. Następnie zamknij okienko Rozwiązanie domyślne.
Przykład funkcji JavaScript
Funkcja JavaScript do wyświetlania niestandardowych ikon i etykietek narzędzi oczekuje następujących dwóch argumentów: obiektu cały wiersz określonego w layoutxml oraz Identyfikatora ustawień regionalnych użytkownika wywołującego (LCID). Parametr identyfikatora LCID umożliwia określanie tekstu etykietki narzędzia w wielu językach. Aby uzyskać więcej informacji dotyczących języków obsługiwanych przez środowisko, zobacz Włącz języki i Zainstaluj lub uaktualnij pakiety językowe dla Dynamics 365 for Customer Engagement. Aby uzyskać listę wartości identyfikatora regionalnego (LCID), które można użyć w kodzie, zobacz Identyfikatory ustawień regionalnych przypisane przez firmę Microsoft .
Zakładając, że będziesz dodawać niestandardowych ikon dla typu atrybutu z zestawem opcji, który ma ograniczony zestaw wstępnie zdefiniowanych opcji, upewnij się, że używasz wartości całkowitej opcji zamiast etykiety, aby uniknąć problemów z lokalizacją.
Uwaga: Jeśli konieczne jest pobranie danych w celu określenia ikony, Ujednolicony interfejs obsługuje zwracanie obiektu języka JavaScript, który jest rozpoznawany jako wartość logiczna (podobnie jak w przypadku reguł wstążek). Nie należy używać synchronicznego elementu XMLHttpRequest (XHR) w niestandardowej funkcji.
Poniższy przykładowy kod wyświetla ikony i etykietki narzędzi w oparciu o jedną z trzech wartości (1: Gorący 2: Ciepły, 3: Zimny) w atrybucie opportunityratingcode (Klasyfikacja). Kod przykładowy ukazuje również sposób wyświetlania zlokalizowanego tekstu etykietki narzędzia. Aby ten przykład działał musisz utworzyć trzy zasoby sieci Web z obrazami 16 x 16 w wystąpieniu o następujących nazwach: new_Hot, new_Warm, i 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;
}