Dotyczy wersji: 2025 R1 i powyżej; autor: Łukasz Maciaszkiewicz
Wprowadzenie
Dobrze zaprojektowany dashboard może pełnić rolę okna wystawowego dla aplikacji WEBCON BPS, przyciągając uwagę, kierując wzrok na kluczowe dane i usprawniając poruszanie się po aplikacji. Aby ułatwić jego tworzenie, w wersji 2025 R2 całkowicie przebudowano mechanizm projektowania dashboardów, wprowadzając siatkę projektową, a także szereg zmian w konfiguracji widżetów.
W niniejszym artykule opisano, jak projektować dashboardy z wykorzystaniem nowej siatki, sprawnie dodawać i konfigurować widżety oraz organizować przestrzeń w sposób funkcjonalny i estetyczny.
Czym jest siatka projektowa?
Siatka projektowa to układ graficzny, który umożliwia rozmieszczanie elementów (widżetów) na dashboardzie w sposób uporządkowany i przewidywalny. W WEBCON BPS 2025 R2 siatka ta składa się z 12 kolumn, które określają szerokość poszczególnych widżetów, oraz zmiennej liczby wierszy, które są dynamicznie dodawane w zależności od liczby i wielkości osadzanych elementów. Dzięki temu długość dashboardu automatycznie dopasowuje się do jego zawartości.
Dzięki siatce projektowej możliwe jest precyzyjne planowanie układu strony: widżety można dowolnie przesuwać, skalować i układać bez utraty spójności wizualnej. Metoda przeciągnij i upuść (drag & drop) sprawia, że projektowanie jest intuicyjne, a użytkownik ma pełną kontrolę nad wyglądem i logiką rozmieszczenia komponentów. To rozwiązanie znacznie ułatwia projektowanie atrakcyjnych, funkcjonalnych i ergonomicznych interfejsów.
Projektowanie w 5 krokach
Choć dashboard można utworzyć zarówno w Portalu, jak i w Designer Studio, jego właściwa konfiguracja odbywa się wyłącznie w pierwszym ze wspomnianych miejsc. Z tego względu w artykule skupiono się na konfiguracji w Portalu.
- Krok 1: utwórz dashboard
Aby stworzyć nowy dashboard wewnątrz wybranej aplikacji, włącz tryb edycji w Portalu (Ustawienia profilu → Tryb edycji), a następnie dodaj dashboard, klikając przycisk Dodaj nowy w menu nawigacji, i z menu wybierz opcję Dashboard.
- Krok 2: wstaw nazwę i opis
Po utworzeniu dashboardu wyświetlane jest okno umożliwiające jego konfigurację. Tę warto warto zacząć od określenia jego nazwy i ewentualnie opisu. W tym celu kliknij w domyślną nazwę dashboardu w lewym górnym rogu i wprowadź własną, a następnie powtórz tę czynność w polu poniżej, dodając jego opis. Warto tutaj nadmienić, że użytkownik ma możliwość ukrycia zarówno nazwy, jak i opisu dashboardu, klikając przycisk Ukryj tytuł i opis () widoczny po prawej stronie nazwy.
- Krok 3: dodaj Widżet
Aby dashboard spełniał swoją funkcję, konieczne jest dodanie do niego Widżetów zapewniających dostęp do odpowiednich informacji lub funkcjonalności. Osadzanie ich umożliwia przycisk Dodaj widżet widoczny w prawym górnym rogu okna (lub pośrodku siatki projektowej, jeżeli do dashboardu nie dodano dotychczas żadnego widżetu). Po jego naciśnięciu z prawej strony wysuwany jest panel Przeciągnij widżet umożliwiający wybranie żądanego widżetu.
Wspomniany panel zawiera kafelki wszystkich dostępnych widżetów uszeregowanych według pięciu grup (Raporty, Elementy dodatkowe dashboardu, Analiza danych i raporty specjalne, Tekst, multimedia i zawartość oraz Inne). Aby dodać wybrany widżet (w opisywanym przypadku będzie to Liczba zadań), przeciągnij jego kafelek w docelowe miejsce na dashboardzie.
W momencie przeciągania wybranego Widżetu na siatkę projektową rzucany jest jego wyszarzony zarys odzwierciedlający jego docelowy – domyślny – rozmiar. Warto też zwrócić uwagę, że każdy dodawany Widżet jest automatycznie „przyciągany” do górnej krawędzi dashboardu. Zachowanie to ma na celu zoptymalizowanie wykorzystania przestrzeni i wyeliminowanie luk między Widżetami.
- Krok 4: zmieniaj położenie i rozmiar Widżetów
Użytkownik ma możliwość zmiany położenia dodanego Widżetu. Aby to zrobić, przeciągnij go w docelowe miejsce, wciskając cały czas przycisk Przesuń () widoczny w menu Widżetu(wyświetlanym po najechaniu na niego kursorem).
Dodatkowo użytkownik ma możliwość ręcznej zmiany szerokości większości Widżetów oraz wysokości niektórych z nich. W pierwszym z wymienionych przypadków szerokość można ustawić, przeciągając lewą lub prawą krawędź Widżetu do docelowego miejsca.
Jak wspomniano powyżej, dla niektórych Widżetów możliwe jest też ręczne ustawienie wysokości. Odbywa się to w analogiczny sposób poprzez przeciąganie dolnej lub górnej krawędzi bądź rogu Widżetu. Należy jednak pamiętać, że ustawianie w ten sposób wysokości jest możliwe tylko wówczas, gdy w konfiguracji odnośnego widżetu wyłączona jest opcja Automatyczna wysokość, dzięki której rozmiar Widżetu jest automatycznie dopasowywany do jego zawartości.
- Krok 5: zapisz zmiany i testuj!
Po wprowadzeniu modyfikacji w konfiguracji zapisz zmiany, klikając przycisk Zapisz w prawym górnym rogu okna Dashboardu i wyłącz tryb edycji. Warto następnie poświęcić nieco czasu na sprawdzenie, jak w praktyce sprawdza się zaprojektowany dashboard, i ewentualnie wprowadzać w nim odpowiednie modyfikacje.
Zarządzanie pustką – widżet Separator
Jak wspomniano powyżej osadzane na dashboardzie Widżety są automatycznie „przyciągane” do jego górnej krawędzi (o ile oczywiście dostępna jest dostateczna ilość miejsca). Choć rozwiązanie to pomaga lepiej wykorzystywać dostępną przestrzeń, ogranicza ono swobodę projektową. Problem ten rozwiązuje jednak Separator.
Widżet ten ma postać poziomej linii rozciągającej się na całą szerokość dashboardu. Po jego osadzeniu wyznacza on granicę, do której dosuwane są elementy dodawane poniżej niego. W rezultacie użytkownik tworzy za jego pomocą niezależne sekcje zawierające widżety i ma możliwość zachowania pustej przestrzeni w obrębie dashboardu.
Warto w tym miejscu zaznaczyć też, że domyślnie widżet ten jest widoczny zarówno we włączonym, jak i wyłączonym, trybie edycji. Aby jednak nie był on widoczny w tym drugim przypadku, należy odznaczyć opcję Pokaż przy wyłączonym trybie edycji dostępną w panelu konfiguracji tego Widżetu.
Forma ma znaczenie, czyli jaki układ dashboardu wybrać?
Po zakończeniu etapu projektowania dashboardu warto zastanowić się jeszcze nad układem, który najlepiej będzie odpowiadał jego zawartości. Możliwość taką daje zakładka Ustawienia widoczna w górnym panelu dashboardu, a dokładnie – domyślnie zaznaczona – opcja Układ pełnoekranowy.
Widok pełnoekranowy, w którym siatka projektowa jest rozciągnięta na całą szerokość dashboardu, zapewnia szereg korzyści, takich jak maksymalna przestrzeń robocza ułatwiającą prezentację większej ilości danych, wygodniejsze rozmieszczanie dużych komponentów oraz większa czytelność szczegółowych wykresów i tabel.
Jeśli jednak od przestrzeni ważniejsza jest kompozycja, warto rozważyć wyłączenie tej opcji, a w rezultacie zawężenie układu. Dzięki temu elementy będą bardziej skupione i lepiej wyeksponowane, co zwiększy czytelność i ułatwi odbiór informacji – zwłaszcza na szerokich ekranach. Taki układ nadaje też dashboardowi bardziej uporządkowany i estetyczny wygląd.
Należy jednak pamiętać, że wybór odpowiedniego wariantu powinien zależeć od charakteru prezentowanej treści i oczekiwań użytkownika końcowego.
Ten sam dashboard – dwa układy: z lewej włączony układ pełnoekranowy, z prawej wyłączony
Podsumowanie
Dzięki mechanizmowi opartemu na siatce projektowej stworzenie atrakcyjnego wizualnie i przede wszystkim funkcjonalnego dashboardu stało się prostsze niż kiedykolwiek. Jednocześnie usprawniona obsługa widżetów oraz łatwiejsze zarządzanie układem sprawiają, że dostosowanie dashboardu do prezentowanych treści i oczekiwań użytkowników jest teraz wyjątkowo wygodne i intuicyjne.