Wyświetlaj w widokach list ikony niestandardowe wraz z wartościami

Administratorzy środowiska Power Apps oraz konfiguratorzy mogą dodawać grafiki do widoku i ustanawiać regułę służącą do wybierania grafiki na podstawie wartości kolumny, za pomocą kodu JavaScript. Ta funkcja pozwala dostosowywać widoki listy, w których są wyświetlane ikony obok wartości liczbowych lub tekstu.

W tym przykładzie są wyświetlane niestandardowe ikony w widoku tabeli szansy sprzedaży, który jest dostępny w określonych aplikacjach, takich jak Dynamics 365 Sales. Niestandardowe ikony można wyświetlać w widokach z innymi standardowymi tabelami, takimi jak tabele klientów lub kontaktów, a także w tabelach niestandardowych.

Ikony niestandardowe w widokach listy mogą być wyświetlane w aplikacjach opartych na modelach, aplikacjach mobilnych i aplikacji dla programu Outlook.

Dodaj niestandardowe grafiki i JavaScript jako zasoby sieci Web

1. Utwórz nowe pliki graficzne potrzebne do własnej personalizacji. Zaleca się, aby rozmiar ikon wynosił 16 x 16 pikseli (większe obrazy będą zmniejszane).

2. Napisz jedną lub więcej funkcji JavaScript, które określają, które ikony mają być wyświetlane dla których wartości (zwykle 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. Aby zobaczyć funkcję przykładową, zobacz Przykładowa funkcja JavaScript w dalszej części tego artykułu.

3. Zaloguj się do środowiska i otwórz eksplorator rozwiązań.

4. Otworzy się zakładka Rozwiązanie. Przejdź do Komponenty>Zasoby sieci Web.

5. Teraz możesz przesłać niestandardowe grafiki, pojedynczo, jako zasoby sieci Web. Wybierz Nowy na pasku narzędzi, aby utworzyć nowy zasób sieci Web. Otwiera się wyskakujące okno pomocne podczas tworzenia zasobu. Wykonaj te kroki:

   1. Nadaj nowemu zasobowi sensowną nazwę. Jest to nazwa, której używasz do odwoływania się do każdej grafiki z kodu JavaScript.

   2. Ustaw opcję Typ na format graficzny użyty do zapisania pliku graficznego (PNG, JPEG lub GIF).

   3. Wybierz Wybierz plik, aby otworzyć okno przeglądarki plików. Użyj go, aby znaleźć i wybrać plik graficzny.

   4. Możesz dodać Wyświetlana nazwa i/lub Opis.

   5. Wybierz Zapisz , a następnie zamknij okno Zasób sieci Web.

6. Powtórz poprzedni krok dla każdego posiadanego pliku graficznego.

7. 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 podręczne, które pomaga utworzyć zasób. Należy wykonać następujące czynności:

   1. Nadaj nowemu zasobowi opisową nazwę.

   2. Ustaw Typ na Skrypt (JScript).

   3. Wybierz Edytor tekstu (obok ustawienia Typ), aby otworzyć okno edytora tekstu. Tutaj wklej kod JavaScript, a następnie wybierz OK, aby go zapisać.

   4. Możesz dodać Wyświetlana nazwa i/lub Opis.

   5. Wybierz Zapisz , a następnie zamknij okno Zasób sieci Web.

8. Przy nadal otwartej karcie rozwiązania rozwiń drzewo Składniki>Tabele i zlokalizuj tabelę, którą chcesz dostosować.

9. Rozwiń swoją tabelę i wybierz jej ikonę Widoki.

10. Widzisz teraz listę widoków dla wybranej tabeli. Wybierz widok z listy. Następnie otwórz listę rozwijaną Więcej akcji na pasku narzędzi i wybierz Edytuj.

11. Otworzy się okno z kontrolkami do edycji wybranego widoku. Ukaże ono każdą kolumnę, która jest częścią widoku. Wybierz kolumnę docelową, a następnie kliknij opcję Zmień właściwości w polu Typowe zadania. Otworzy się dialog Zmień 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ą napisano, aby zmodyfikować zaznaczoną kolumnę i widok.

12. Wybierz OK, aby zamknąć okno dialogowe Zmień właściwości kolumny.

13. Wybierz Zapisz i zamknij, aby zapisać widok.

14. Powtórz te kroki dla każdej tabeli, widoku i kolumny, stosownie do potrzeb.

15. Gdy skończysz, wybierz Publikuj wszystkie dostosowania, aby opublikować zmiany. Następnie zamknij okienko Default Solution.

Przykład funkcji JavaScript

Funkcja JavaScript do wyświetlania ikon niestandardowych i etykietek narzędzi oczekuje następujących dwóch argumentów: całego obiektu wiersza określonego w layoutxml i identyfikatora ustawień regionalnych użytkownika wywołującego (LCID). Parametr identyfikatora LCID umożliwia określanie tekstu podpowiedzi w wielu językach. Aby uzyskać więcej informacji na temat obsługiwanych języków, zobacz Opcje regionalne i językowe dla danego środowiska. 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ć niestandardowe ikony 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ą.

Poniższy przykładowy kod wyświetla ikony i podpowiedzi w oparciu o jedną z trzech wartości (1: Gorący 2: Ciepły, 3: Zimny) w atrybucie opportunityratingcode (Ocena). Kod przykładowy ukazuje również sposób wyświetlania zlokalizowanego tekstu podpowiedzi. Aby ten przykład działał, musisz utworzyć trzy zasoby sieci Web z obrazami 16 × 16 o następujących nazwach: new_Hot, new_Warm i 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;  
}  

Zachowanie wyświetlania niestandardowego widoku ikon

Kolumny podstawowe

Niestandardowe ikony w widoku listy siatki zastosowane do kolumny podstawowej tabeli zastępują domyślne ikony wygenerowane przez system.

Inne kolumny

Niestandardowe ikony w widoku listy siatki zastosowane do kolumny, która nie jest kolumną podstawową tabeli, są wyświetlane jako pomocnicze ikony oprócz domyślnej ikony wygenerowanej przez system.

Formularze kart

Ikony niestandardowe zastępują domyślną ikonę wygenerowaną przez system, gdy widok jest skonfigurowany tak, aby korzystał z formularza karty.

Zobacz też

Zrozumienie widoków aplikacji opartej na modelu