Czy wiesz, że możesz dopasować wygląd aplikacji Dynamics 365 do identyfikacji wizualnej swojej firmy bez tworzenia własnego interfejsu od podstaw?
Wcześniej personalizację wyglądu można było realizować za pomocą klasycznych motywów dostępnych w ustawieniach systemu. Wraz z rozwojem nowego wyglądu aplikacji model-driven zmienił się jednak sposób obsługi motywów. W przypadku nowoczesnego interfejsu klasyczne motywy nie są stosowane, dlatego Microsoft udostępnia mechanizm pozwalający zdefiniować własną kolorystykę i logo za pomocą pliku XML.
W tym artykule pokazujemy, jak przeprowadzić taką konfigurację krok po kroku.
Po co zmieniać wygląd Dynamics 365?
Dynamics 365 pozwala dostosować aplikację do procesów biznesowych organizacji, ale znaczenie ma również jej wygląd. Spójna kolorystyka i logo pomagają zachować zgodność z identyfikacją wizualną firmy oraz sprawiają, że system staje się bardziej rozpoznawalny dla użytkowników.
W ramach nowoczesnych motywów możemy między innymi:
• ustawić kolor bazowy, na podstawie którego generowana jest paleta kolorów aplikacji;
• zmienić kolory nagłówka, w tym tła i tekstu;
• określić wygląd przycisków nagłówka podczas najechania kursorem, kliknięcia i zaznaczenia;
• dodać własne logo wraz z tekstem wyświetlanym po najechaniu na nie kursorem.
Warto pamiętać, że nie wszystkie elementy interfejsu obsługują obecnie nowoczesne motywy. Funkcja jest przeznaczona dla aplikacji model-driven korzystających z nowego wyglądu (New look).
Krok 1. Dodanie logo jako webresource
Pierwszym krokiem jest dodanie do rozwiązania logo. Przechodzimy do https://make.powerapps.com. Następnie otwieramy rozwiązanie, w którym chcemy przechowywać zmiany.
W pierwszej kolejności dodajemy logo jako Web Resource. Możemy wykorzystać plik PNG i nadać mu unikalną nazwę logiczną, np. new_companylogo. Zalecany przez Microsoft rozmiar logo to 156 × 48 pikseli.
Krok 2. Przygotowanie pliku XML
Drugim krokiem jest utworzenie pliku XML, w którym określimy wygląd aplikacji. Nie musimy pisać rozbudowanego kodu - wystarczy zdefiniować kilka parametrów wskazujących systemowi, jakiej kolorystyki i logo ma używać.
<CustomTheme
basePaletteColor="#12783F"
logoWebResource="new_companylogo"
logoTooltip="Nasza firma"
>
<AppHeaderColors
background="#12783F"
foreground="#FFFFFF"
backgroundHover="#165A31"
foregroundHover="#FFFFFF"
backgroundPressed="#0F1C12"
foregroundPressed="#FFFFFF"
backgroundSelected="#153D23"
foregroundSelected="#FFFFFF"
/>
</CustomTheme>
Najważniejsze parametry:
basePaletteColor - określa bazowy kolor motywu w formacie HEX. Na jego podstawie system generuje paletę kolorów wykorzystywaną w obsługiwanych elementach interfejsu.
AppHeaderColors - pozwala skonfigurować nagłówek aplikacji: kolor tła i tekstu oraz kolory poszczególnych stanów interakcji z przyciskami.
logoWebResource - wskazuje nazwę logiczną zasobu sieci Web, w którym znajduje się logo. W przykładzie jest to new_companylogo.
logoTooltip - określa tekst wyświetlany po najechaniu kursorem na logo.
Dzięki temu w jednym pliku możemy zdefiniować zarówno kolorystykę, jak i logo aplikacji.
Krok 3. Dodanie pliku XML jako Web Resources
Kiedy plik XML jest gotowy, przechodzimy ponownie do https://make.powerapps.com. Następnie otwieramy rozwiązanie, w którym chcemy przechowywać zmiany.
Dodajemy kolejny Web Resource, wskazując przygotowany plik XML. W jego właściwościach wybieramy typ Data (XML), uzupełniamy nazwę zasobu i zapisujemy zmiany.
Ważne: nazwa logiczna zasobu z logo musi odpowiadać wartości podanej w pliku XML. Zapamiętaj również nazwę logiczną zasobu XML - będzie potrzebna w kolejnym kroku.
Krok 4. Aktywowanie motywu w ustawieniach
Samo dodanie pliku XML do rozwiązania nie powoduje jeszcze zastosowania nowego wyglądu. Musimy wskazać systemowi, z którego zasobu ma korzystać.
Dodaj ustawienie. W rozwiązaniu wybierz Add existing → More → Setting.
Wyszukaj definicję motywu. Znajdź ustawienie Custom theme definition (po polsku: Definicja motywu niestandardowego) i dodaj je do rozwiązania.
Edytuj ustawienie. Otwórz ustawienie i wybierz Edit.
Dodaj wartość środowiskową. W sekcji Setting environment value dodaj nową wartość środowiskową.
Wskaż zasób XML. Wprowadź nazwę logiczną utworzonego wcześniej Web Resource z plikiem XML, wraz z prefiksem wydawcy.
Zapisz i opublikuj. Zapisz zmiany, a następnie w obszarze Settings → Setting definitions wybierz Publish all customizations.
Uwaga: wpisz nazwę logiczną zasobu, a nie jego nazwę wyświetlaną ani ścieżkę do pliku. Nie dodawaj cudzysłowów. Po publikacji otwórz aplikację model-driven i sprawdź rezultat; w razie potrzeby odśwież kartę przeglądarki.
Krok 5. Sprawdzenie efektu
Po opublikowaniu zmian warto zweryfikować kilka elementów:
• Czy nagłówek aplikacji ma odpowiedni kolor?
• Czy logo wyświetla się prawidłowo?
• Czy tekst pozostaje czytelny na tle nagłówka?
• Czy kolory przycisków są odpowiednie również podczas najechania kursorem, kliknięcia i zaznaczenia?
• Czy pozostałe elementy interfejsu zachowują spójny wygląd?
Szczególnie ważny jest kontrast pomiędzy tekstem a tłem. Dla lepszej czytelności należy sprawdzić, czy zestawienia kolorów spełniają odpowiednie wymagania dostępności.
Dostosowanie kolorystyki i logo w nowoczesnym Dynamics 365 nie wymaga tworzenia własnej aplikacji ani rozbudowanego programowania. Proces sprowadza się do przygotowania pliku XML, dodania go jako Web Resource, umieszczenia logo w osobnym zasobie i skonfigurowania ustawienia Custom theme definition.
To prosty sposób, aby lepiej dopasować aplikację do identyfikacji wizualnej organizacji i zachować spójność z pozostałymi narzędziami wykorzystywanymi przez pracowników.
Chcesz sprawdzić, jak lepiej wykorzystać Dynamics 365 w swojej firmie? Umów się na bezpłatną konsultację z naszym zespołem poprzez Microsoft Bookings 📅
➡️ zarezerwuj 30-minutową konsultację poprzez Bookings
Źródło: Microsoft Learn – Use modern themes in model-driven apps
