Dotyczy wersji: 2024 R1 i powyżej; autor: Łukasz Maciaszkiewicz
Wprowadzenie
Łatwy i szybki dostęp do informacji to jeden z kluczowych aspektów dobrze zaprojektowanego formularza. Dysponując niezbędnymi danymi użytkownicy mogą nie tylko szybciej wykonywać zadania, ale także podejmować przy tym trafniejsze decyzje. Jak jednak sprawić, aby informacje takie wyróżniały się na tle innych, a dodatkowo prezentować je w przejrzysty i łatwy do zinterpretowania sposób?
Być może odpowiedzią na to pytanie jest atrybut typu Widżet, o którym mowa w niniejszym artykule…
Czym są Widżety?
W kontekście formularza Widżet to atrybut prezentujący w atrakcyjny sposób zdefiniowane przez użytkownika dane liczbowe. Należy on do grupy atrybutów Prezentacja danych i podobnie jak pozostałe atrybuty z tej grupy działa w trybie tylko do odczytu, co oznacza, że edycja prezentowanych w nim wartości z poziomu formularza nie jest możliwa. Na tle pozostałych atrybutów wyróżnia się on zasadniczo wyglądem, ponieważ prezentowanym w nim wartościom towarzyszy specjalna oprawa graficzna, która ma w zamierzeniu przykuwać do niego uwagę użytkowników. Połączenie wspomnianej atrakcyjnej oprawy graficznej oraz możliwości prezentacji danych na tle innych wartości sprawia, że atrybut ten okaże się nieoceniony wszędzie tam, gdzie podjęcie trafnej decyzji w krótkim czasie zależy od możliwości szybkiego przeanalizowania sytuacji.
Przypadek biznesowy
W Designer Studio utworzono aplikację „Zamówienia” przeznaczoną dla Działu Sprzedaży i Kosztorysowania przedsiębiorstwa remontowo-budowlanego. Z aplikacji tej korzystają osoby przygotowujące oferty, a także ich przełożony, który jest zarazem kierownikiem Działu (w przypadku zaakceptowania oferty przez inwestora ma on też możliwość nadzorowania realizacji zmówienia z poziomu wspomnianej aplikacji).
Formularz aplikacji zawiera szereg różnorodnych atrybutów, w tym znaczną liczbę atrybutów liczbowych, których natłok sprawia, że użytkownicy końcowi narzekają na jego nieczytelność. Aby ułatwić pracę w Dziale, projektant aplikacji umieści na wspomnianym formularzu kilka widżetów prezentujących kluczowe dane.
Gdy liczą się twarde dane: widżet typu Wartość liczbowa
Z oczywistych przyczyn duża część atrybutów liczbowych widocznych na formularzu dotyczy kwestii finansowych. Umieszczane w nich wartości zasadniczo dotyczą kosztów i budżetu inwestycji, a przez to stanowią podstawowe informacje dla każdego zainteresowanego.
Na początek warto zatem zadbać o wyróżnienie najważniejszej wartości: kosztu wykonania zamówienia. W tym celu przejdź do Designer Studio i po zaznaczeniu węzła Atrybuty na drzewie wyboru dodaj nowy atrybut o nazwie „Koszt wykonania zamówienia”. W polu Typ atrybutu wybierz węzeł Prezentacja danych, a następnie pozycję Widżet i kliknij przycisk Konfiguracja zaawansowana.
Po otwarciu osobnego okna konfigurację atrybutu warto zacząć od zdefiniowania jego typu. Zważywszy, że konfigurowany Widżet ma zwracać uwagę użytkownika wyłącznie na jedną konkretną wartość liczbową w polu Typ widżetu pozostaw wybraną opcję Wartość liczbowa (jest ona domyślnie wybrana po otworzeniu okna konfiguracji). Dzięki temu wspomniana wartość będzie prezentowana w kafelku o zdefiniowanym przez projektanta aplikacji wyglądzie.
Następnie przejdź do pola Wartość prezentowana, w którym można określić wartość wyświetlaną w widżecie. Podobnie jak inne dostępne w oknie konfiguracji widżetu pola umożliwiające definiowanie wartości, tak i to pole pozwala użytkownikowi na bezpośrednie wstawienie wartości liczbowej bądź też posłużenie się zmienną lub regułą formularza, za pomocą których wartość taka będzie pobierana. Ponieważ na formularzu aplikacji Działu znajduje się atrybut prezentujący całkowitą kwotę zamówienia („Łączny koszt”), kliknij w pusty obszar pola tekstowego (lub otwórz edytor zmiennych za pomocą przycisku wielokropka) i wstaw w nim wspomniany atrybut.
Zwróć też uwagę, aby zaznaczony pozostał przycisk wyboru Pokaż na widżecie (jest on domyślnie zaznaczony). W przeciwnym wypadku zdefiniowania wartość nie będzie widoczna na widżecie.
UWAGA: wartości prezentowane w widżetach są typu liczbowego. Z tego względu atrybuty, które można wskazywać w polach definiujących wartości widżetu (takich jak pole Wartość prezentowana), muszą należeć do jednego z następujących typów: Liczba całkowita, Liczba zmiennoprzecinkowa, Data i godzina, Ocena w skali, Wiersz danych i Pole wyboru.
Oprócz zdefiniowanej przed chwilą wartości, w polu poniżej warto określić także Wartość oczekiwaną. Zwykle służy ona jako punkt odniesienia dla Wartości prezentowanej, ale w przypadku widżetu typu Wartość liczbowa nie jest ona uwzględniana w kafelku (pole Pokaż na widżecie nie jest aktywne). Po co zatem ją określać?
Może ona posłużyć do zmiany wyglądu tego typu widżetu. Po przekroczeniu zdefiniowanej tutaj wartości i ustawieniu odpowiedniego dla niej koloru widżet będzie zmieniał barwę, sygnalizując konieczność przyjrzenia się bliżej kosztowi zamówienia. W związku z tym w polu Wartość oczekiwana wstaw atrybut „Budżet inwestora”, którego wartość stanowi o możliwościach finansowych zamawiającego. Po jego przekroczeniu kafelek widżetu zmieni kolor.
Dodatkowo w polu Jednostka wybierz opcję Sufiks (domyślnie jest ona już wybrana), a następnie w polu po prawej stronie wpisz kod polskiej waluty „PLN”. Dzięki temu do prezentowanej wartości dodawany będzie zdefiniowany przyrostek.
Po zdefiniowaniu wartości warto zająć się samym wyglądem widżetu. Możliwości konfiguracji sprowadzają się tutaj przede wszystkim do zdefiniowania jego kolorystyki. Jednym z celów konfigurowanego widżetu jest zwrócenie uwagi użytkownika w sytuacji, gdy całkowita kwota zamówienia przekracza dostępny dla inwestora budżet. W tym celu przejdź do pola Główny kolor widżetu, które umożliwia zdefiniowanie dominującej kolorystyki kafelka, i z listy rozwijanej wybierz opcję Według wybranego koloru. Następnie kliknij przycisk palety barw po prawej stronie i wybierz dowolną neutralną barwę (np. kolor zielony), która nie będzie przykuwać uwagi użytkownika, jeżeli koszt zamówienia mieści się w granicach budżetu inwestora.
Następnie postępuj identycznie w przypadku pola Kolor powyżej wartości oczekiwanej, przy czym tym razem z palety barw wybierz bardziej intensywny kolor, np. czerwony. Dzięki temu po przekroczeniu budżetu inwestora kafelek zmieni kolor, sygnalizując użytkownikowi potencjalne komplikacje.
Warto dodać, że dla konfigurowanego typu widżetu (i wyłącznie dla niego) aktywne jest także pole Schemat wyglądu, które pozwala użytkownikowi zdecydować, w jaki sposób lub czy w ogóle wybrany kolor będzie pojawiał się na widżecie. Spośród czterech dostępnych tutaj opcji wybierz Wypełnienie.
Po skonfigurowaniu dostępności atrybutu na Matrycy atrybutów i zapisaniu skonfigurowany Widżet prezentuje się następująco:
Ten sam widżet, dwa różne oblicza: z lewej strony koszt zamówienia mieści się w granicach budżetu (40 000 PLN), z prawej poza nie wykracza.
Diabeł tkwi w szczegółach: analiza danych
Dodany do formularza widżet typu Wartość liczbowa z całą pewnością pozwoli jednym rzutem oka zorientować się, czy przesyłanie danej oferty inwestorowi ma w ogóle sens. W takim przypadku pracownicy Działu często analizują daną ofertę i składowe kosztów, próbując pogodzić oczekiwania inwestora z jego możliwościami. Aby im to ułatwić, warto wyposażyć ich w odpowiednie narzędzia, a dokładnie w odpowiednie widżety…
- Dane finansowe osadzone w kontekście
Ponieważ dla pracowników Działu dwoma kluczowymi informacjami są kwota wykonania zamówienia oraz budżet, warto zestawić te dane przy pomocy widżetu typu Łuk (przy czym warto pamiętać, że pomimo innego wyglądu taką samą funkcjonalność oferują też Widżet typu Pasek postępu i Okrągły pasek postępu). W tym celu w Designer Studio dodaj nowy Widżet o nazwie „Koszt zamówienia na tle budżetu” i przejdź do jego konfiguracji zaawansowanej. W polu Typ widżetu ustaw wartość Łuk. Widżet tego typu umożliwia porównywanie dwóch wartości oraz definiowanie zakresów, zapewniając zatem to, czego brakowało Widżetowi typu Wartość liczbowa: kontekst.
Konfigurację zacznij od ustawienia zmiennej atrybutu „Łączny koszt” w polu Wartość prezentowana i atrybutu „Budżet inwestora” w polu Wartość oczekiwana (w tym drugim przypadku zwróć uwagę, aby zaznaczony był przycisk wyboru Pokaż na widżecie) oraz ustaw Sufiks (PLN). Następnie w polach Główny kolor widżetu i Kolor powyżej wartości oczekiwanej określ żądaną kolorystykę widżetu.
Konfiguracja widżetu typu Łuk. Zwróć uwagę na zaznaczony przycisk Pokaż skalę kolorów (niedostępny dla Widżetu typu Wartość liczbowa). Dzięki tej opcji poniżej łuku Widżetu widoczny będzie mniejszy łuk sygnalizujący za pomocą odmiennych kolorów zakres wartości.
Przejdź do zakładki Dodatkowe. W tym miejscu możliwe jest zdefiniowanie dodatkowych wartości prezentowanych na widżecie, w tym wartości minimalnych i maksymalnych (definiujących odpowiednio początek i koniec zakresu prezentowanego na Widżecie). Aby wyświetlić wartość minimalną wynoszącą „0”, po prostu zaznacz przycisk wyboru poniżej pola Wartość minimalna (gdy jest ono puste, system domyślnie ustawia w tym wypadku wartość „0”). W polu Wartość maksymalna wstaw natomiast atrybut „Łączny koszt” i podobnie zaznacz przycisk Pokaż na widżecie.
Konfiguracja wartości minimalnych i maksymalnych.
Pora uchylić rąbka tajemnicy: choć firma stosuje domyślnie 10-procentową marżę do każdego zamówienia, w indywidualnych przypadkach możliwe jest odstąpienie od tej zasady. Skoro sekret się wydał, warto uwzględnić marżę na konfigurowanym widżecie. W tym celu zaznacz przycisk wyboru Dodatkowe warunki kolorowania. Funkcjonalność ta umożliwia nanoszenie dodatkowych kolorów na Widżet w sytuacji, gdy przekroczona zostanie określona wartość (próg).
Po zaznaczeniu wspomnianego przycisku w aktywowanej poniżej tabeli w kolumnie Typ progu ustaw wartość Procentowy [próg wyliczany będzie jako procent wskazanej wartości (bazy)]. W kolumnie Baza ustaw Wartość maksymalna (czyli w tym przypadku łączny koszt zamówienia), a w kolumnie po prawej stronie ustaw wartość 10%. Na koniec wybierz kolor, jaki będzie ustawiany po spełnieniu określonego warunku.
Ustawienia dodatkowych warunków kolorowania
Po wprowadzeniu konfiguracji i zapisaniu zmian dodany widżet prezentuje się następująco:
Widżet typu Łuk pozwala zaprezentować szeroki zakres informacji. Zielony odcinek wykresu skali reprezentuje 10-procentową marżę, czarny znacznik to Wartość oczekiwana (budżet inwestora), a szeroki zewnętrzny pasek to Wartość prezentowana, której kolor zależy od tego, czy przekroczony został zdefiniowany zakres lub próg. Po lewej i prawej stronie łuku widoczne są odpowiednio wartość minimalna i maksymalna.
WSKAZÓWKA: w przypadku większej liczby widżetów warto umieścić je w grupie atrybutów i skorzystać z opcji Układ poziomy atrybutów w grupie oraz ewentualnie Zawijaj atrybuty przy układzie poziomym (jeżeli szerokość ekranu nie jest wystarczająca atrybuty ustawiane są jeden pod drugim). Dla przykładu w omawianym przypadku utworzono jeszcze dwa Widżety, przy czym tym razem typu Okrągły pasek postępu (różnica w stosunku do Widżetu typu Łuk sprowadza się wyłącznie do wyglądu), prezentujące koszty robocizny i koszty materiałów na tle łącznego kosztu zamówienia bez marży. [W obu przypadkach wartości prezentowane są jako procent Wartości oczekiwanej (zaznaczony przycisk Pokaż jako % wartości oczekiwanej)]. Oba umieszczono w grupie i włączono wspomnianą opcję, dzięki czemu na formularzu wyglądają one następująco:
Cztery widżety umieszczone w grupie w układzie poziomym (z prawej strony włączona opcja Zawijaj atrybuty przy układzie poziomym).
Śledzenie postępów
Pełen sukces: inwestor zaakceptował ofertę! W kuluarach mówi się, że przekonała go ładna prezentacja… Od dwóch miesięcy zamówienie jest realizowane.
Dzięki aplikacji „Zamówienia” pracownicy terenowi zgłaszają postępy poprzez aplikację mobilną WEBCON BPS, zaznaczając jako wykonane odpowiednie zadania na dedykowanej Liście pozycji. Zadań jest niestety bardzo dużo, a szczerze powiedziawszy kierownik Działu, który ma do niej dostęp, nie za bardzo wie, czym różni się śruba od wkrętu… pewnie dlatego narzeka, że nie dość, że lista jest długa to jeszcze zbyt szczegółowa. Warto zatem ułatwić mu nieco to zadanie, korzystając z dobrze znanych nam już widżetów: tym razem typu Pasek postępu.
Utwórz dodatkowy Widżet o nazwie „Postępy w realizacji” typu Pasek postępu i przejdź do jego konfiguracji. W polu Wartość prezentowana (zakładka Ogólne) wstaw atrybut „Liczba wykonanych roboczogodzin”. Atrybut zawiera liczbę roboczogodzin przypisaną do konkretnego wykonanego zadania (oznaczonego na Liście pozycji jako „Wykonane”). W polu Wartość oczekiwana wstaw atrybut „Liczba roboczogodzin” (wartość atrybutu wyliczana jest za pomocą funkcji SUM sumującej liczbę roboczogodzin w odpowiedniej kolumnie Listy pozycji). Ustaw odpowiednią kolorystykę Widżetu i zaznacz opcję Pokaż skalę kolorów.
Przykładowa konfiguracja Widżetu „Postępy w realizacji”
Zgodnie ze standardowymi zapisami umów zawieranych z inwestorami indywidualnymi czas realizacji przekraczający o miesiąc (20 dni roboczych × 8 roboczogodzin) uzgodniony harmonogram skutkuje naliczeniem kar umownych. W związku z tym w polu Wartość maksymalna wstaw prostą regułę dodającą do zmiennej atrybutu „Liczba roboczogodzin” wartość 160.
Następnie zaznacz przycisk Dodatkowe warunki kolorowania i zdefiniuj cztery warunki (w każdym przypadku Typ progu to Procentowy, a Baza to Wartość oczekiwana), dla których wstaw kolejno wartości 25, 50, 75 i 100%. Zdefiniuj następnie kolorystykę dla dodanych progów.
Konfiguracja Wartości maksymalnej i Dodatkowych warunków kolorowania
Po zapisaniu konfiguracji przejdź do Portalu. Jak widać na załączonym poniżej obrazku, zdefiniowany w ten sposób Pasek postępu pozwala wygodnie śledzić postępy i ewentualnie reagować w razie przeciągającej się realizacji zamówienia.
Gotowy formularz aplikacji z naniesionym Widżetami, w tym Widżetem typu Pasek postępu pozwalającym śledzić postępy w realizacji zamówienia. Zwróć uwagę na skalę z wyznaczonymi w różnych kolorach zakresami wartości.
Podsumowanie
Dzięki atrybutom typu Widżet użytkownicy zyskują szybki dostęp do kluczowych danych i informacji. Dobrze skonfigurowane i przemyślane Widżety są zatem w stanie ułatwić analizę danych, prezentując wyłącznie te informacje, które są w danym przypadku istotne, co może przełożyć się na szybsze podejmowanie ważnych decyzji.
Na koniec warto podkreślić też aspekt estetyczny, nie od dziś bowiem wiadomo, że nawet najbardziej wykwintne danie traci w oczach degustatora, gdy jest brzydko podane…
