Zaawansowane kolorowanie raportów

Facebooktwitterpinterestlinkedinmail
Dotyczy wersji 2020.1.3.x; autor: Józef Cyran

 

Wstęp

W najnowszej wersji WEBCON BPS kolorowanie raportów zostało wzbogacone o dodatkowe możliwości – opis podstawowych trybów kolorowania raportów można znaleźć tutaj. Dzięki dodanej funkcjonalności w trakcie wyświetlania raportu możliwe jest przechodzenie ścieżkami bez konieczności wchodzenia na konkretny element – wystarczy kliknąć w odpowiednio skonfigurowaną komórkę. Konfiguracja pozwala też na ustawienie stylowania komórek, a także specjalnych funkcji wyświetlania.

Przypadek biznesowy

Przykładem ilustrującym funkcjonalność zaawansowaną raportów jest proces służący ewidencji przechowywanych produktów (np. modeli rowerów). Każdy element obiegu reprezentuje magazyn wraz z numerami seryjnymi egzemplarzy znajdujących się w nim. Magazyn można zamknąć (na przykład gdy jest pełny) uniemożliwiając wkładanie i wyciąganie z niego produktów.

Schemat obiegu

Rys. 1. Magazyn dostępny jest do edycji jedynie w kroku rejestracji i otwartym

 

Atrybuty

Rys. 2. Całkowita liczba produktów ustawiana jest regułami na zmianę wartości

 

Rys. 3. Ilość poszczególnych produktów w magazynie skonfigurowana jest przy użyciu sumowania listy pozycji

 

Rys. 4. Element reprezentujący magazyn

 

Konfiguracja raportu – Magazyny

Raport Magazyny zawiera wszystkie magazyny wraz z ilością przechowywanych produktów.

Rys. 5. Widok podstawowy zawiera jedynie całkowitą liczbę produktów

 

 

Rys. 6. Widok rozszerzony pokazuje też ilość poszczególnych modeli

 

Raport magazyny pozwala zobaczyć liczbę produktów, a także przejść ścieżką z poziomu raportu i zamknąć albo otworzyć magazyn w zależności od kroku w którym się znajduje. Służą ku temu dodane do komórki przyciski (element HTML button).

Rys. 7. W zakładce widoki należy wejść w konfigurację i wybrać Tryb kolorowania – Zaawansowany następnie wkleić JSONa ze stylowaniem komórki

 

Rys. 8. JSON ze stylowaniem komórki

 

”content”: ”=CurrentField” wyświetla podstawową wartość komórki

Funkcja ”=if(CurrentField == ‚Open’, ‚lightgreen’, ‚tomato’)” działa na zasadzie podobnej do excela – na początku podajemy warunek, czyli żeby wartość podstawowa komórki była równa łancuchowi znakow ‘Otwarty’, następnie podajemy wartości odpowiednio dla spełnionego warunku i dla niespełnionego.

W tablicy children znajdują się dodatkowe elementy html które chcemy wyświetlić. W naszym przypadku są to dwa przyciski, ale widoczny naraz będzie tylko jeden – w zależności w którym kroku znajduje się element. Tutaj znowu używamy funkcji if definiując wartość w atrybucie „display” – dzięki temu pokazuje się tylko właściwy przycisk przechodzący ścieżką dostępną w danym kroku.

”action”: {

                   ”type”: „quickPath”,

                   ”params”: {

                       ”pathId”: 1220

                   }

               }

Powyższy fragment JSON wskazuje akcję przejścia ścieżką i id ścieżki. Aby funkcja zadziałała niezbędne jest zaznaczenie checkboxa ‘szybka ścieżka’.

Rys. 9. Szybkie ścieżki to takie, którymi można przejść już z poziomu raportu bez konieczności wchodzenia na dany element

 

Rys. 10. Paski wyświetlające liczbę produktów konfiguruje się wybierając kolor, wartość minimalną oraz maksymalną

 

W trybie zaawansowanym można skorzystać z funkcji bar:

Rys. 11. Funkcja bar przyjmuje jako argumenty kolejno: wartość wyznaczającą długość paska, kolor, wartość minimalną oraz maksymalną

 

Konfiguracja raportu – Model 1

Następne raporty dla Modeli 1, 2 i 3 wyglądają tak jak na poniższym rysunku.

Rys. 12. Ikona kłódki wskazuje czy Magazyn jest zamknięty czy otwarty

 

Raport zawiera wszystkie egzemplarze modelu 1 znajdujące się w magazynach. Kolor tła komórki wskazuje na ilość egzemplarzy w magazynie.

Rys. 13. Dostępne zestawy kolorów

 

 

W trybie zaawansowanym aby skorzystać z powyższej funkcjonalności należy użyć funkcji scale.

Funkcja scale

Składnia: scale(wartość, przedrostek_klasy, min, max)

Funkcja znajduje w którym z 10 podprzedziałów, na które podzielony został przedział od podanego minimum do maksimum, znajduje się podana wartość.

Ikona

Dostępne są ikony UI Fabric (https://uifabricicons.azurewebsites.net/ – zbiór ikon)

Rys. 14. Konfiguracja kolumny zawierającej kod magazynu wraz z ikoną pokazującą krok, w któym się znajduje

 

Opis funkcji formatujących komórki raportu

Wyrażenia

W wyrażeniach można używać zdefiniowanych operatorów i funkcji:

  • Operatorów *, /, +, – i innych operatorów matematycznych,
  • Operatora + do łączenia łańcuchów tekstowych;
  • Innych funkcji matematycznych opisanych w dokumentacji ;
  • Funkcji if(warunek, wartość_jeżeli_prawda, wartość_jeżeli_fałsz). Funkcje można zagnieżdżać w sobie;
  • Funkcji dedykowanych do tworzenia graficznej reprezentacji danych bar i scale;
  • Funkcji związanych z operacjami na datach: date, now, today i innych,
  • Funkcji związanych z operacjami na tekście: includes i startsWith,
  • Funkcji związanych z operacjami na atrybutach typu picker: pickerCompare, pickerCompareById i pickerCompareByName;
  • Zmiennych kontekstowyuch jak CurrentUser.BPSID oraz CurrentUser.DisplayName zwracających informację o aktualnym użytkowniku.

Funkcje związane z obsługą daty i czasu

  • date(wartość) — przyjmuje datę w formacie ISO jako tekst (tak jak konstruktor obiektu Date() w JavaScript) i zwraca uniksowy znacznik czasu (jako liczbę milisekund od 1970 roku).
  • datePart(wartość, [‚year’|’month’|’day’|’hour’|’minutes’|’seconds’]) — przyjmuje datę w formacie ISO jako tekst (tak jak konstruktor obiektu Date() w JavaScript) i zwraca wybrany fragment daty.
  • days(wartość) — zamienia podaną liczbę dni na liczbę milisekund.
  • hours(wartość) — zamienia podaną liczbę godzin na liczbę milisekund.
  • minutes(wartość) — zamienia podaną liczbę minut na liczbę milisekund.
  • seconds(wartość) — zamienia podaną liczbę sekund na liczbę milisekund.
  • now — zwraca uniksowy znacznik czasu dla bieżącej daty i godziny.
  • today — zwraca uniksowy znacznik czasu dla początku bieżącego dnia.

Funkcje związane z porównywaniem wartości typu picker

  • pickerCompare — porównywanie zarówno identyfikatorów i nazw.
  • pickerCompareById — porównywanie identyfikatorów.
  • pickerCompareByName — porównywanie nazw.

Każda z funkcji przyjmuje w pierwszym argumencie zmienną odnoszącą się do kolumny typu picker lub jednej ze specjalnych kolumn systemowych.

Drugim argumentem jest ciąg znaków postaci id#nazwa. W przypadku pickera w trybie wielowyboru wartości te należy podawać po średniku np. id1#nazwa1;id2#nazwa2;id3#nazwa3.

Zmienne typu picker

Zmienne typu picker to specjalny rodzaj zmiennych, które są obiektem z właściwościami Id oraz Name. Zmienne tej postaci to wszystkie kolumny wyboru (AttChoose_N, gdzie N jest numerem skojarzonym z danym atrybutem) oraz następujące zmienne systemowe:

  • DET – proces
  • STP – krok
  • DOCTYPE – typ formularza
  • SUBDOCTYPE – podtyp formularza
  • WF – obieg

Przykład użycia:
W zależności od ID kroku wzięta zostanie ikona ContactCard lub ContactCardSettings.
Należy zwrócić uwagę, że przy odwołaniach do Id oraz Name wartość w operatorze porównania przekazana jest jako tekst (w apostrofach), czyli STP.Id == ‚212’

„attributes”: { „iconName”: „=if(STP.Id == ‚212’, ‚ContactCard’, ‚ContactCardSettings’)” }

Wspierane elementy i atrybuty HTML

Elementy HTML

  • div
  • span
  • a
  • img
  • svg
  • path
  • button

Atrybuty HTML

  • href
  • src
  • class
  • target
  • title
  • role
  • style
  • iconName

Wspierane style i klasy CSS

Style CSS

  • align-items
  • background
  • background-color
  • background-image
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-bottom
  • border-collapse
  • border-color
  • border-left-color
  • border-left-style
  • border-left-width
  • border-left
  • border-radius
  • border-right-color
  • border-right-style
  • border-right-width
  • border-right
  • border-spacing
  • border-style
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-top
  • border-width
  • border
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • color
  • cursor
  • direction
  • display
  • empty-cells
  • fill
  • float
  • font-family
  • font-size-adjust
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • font
  • hanging-punctuation
  • height
  • justify-content
  • left
  • letter-spacing
  • line-height
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-style
  • outline-width
  • outline
  • overflow-style
  • overflow-x
  • overflow-y
  • overflow
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • padding
  • position
  • punctuation-trim
  • right
  • table-layout
  • text-align-last
  • text-align
  • text-decoration
  • text-indent
  • text-justify
  • text-outline
  • text-shadow
  • text-transform
  • text-wrap
  • top
  • transform
  • unicode-bidi
  • vertical-align
  • visibility
  • white-space
  • width
  • word-break
  • word-spacing
  • word-wrap i -ms-word-wrap
  • z-index

Klasy CSS

  • webcon-conditions — określa odstępy dla tła komórki,
  • webcon-databar — przykład zastosowania w sekcji dotyczącej funkcji bar,
  • webcon-databar__bar — określa pozycjonowanie paska danych,
  • webcon-databar__bar–0 do webcon-databar_bar–100 — określa szerokość paska danych w procentach,
  • webcon-databar__content — określa pozycjonowanie dla tekstu „nad” paskiem danych,
  • webcon-scale-green–1 do webcon-scale-green–10 — kolor tła od przeźroczystego do zielonego, kolejne klasy różnią się nasyceniem koloru,
  • webcon-scale-green-to-red–1 do webcon-scale-green-to-red–10 — kolor tła od zielonego, przez przeźroczysty do czerwonego, kolejne klasy różnią się nasyceniem koloru, przy czym dwie środkowe klasy mają je najmniejsze,
  • webcon-scale-red–1 do webcon-scale-red–10,
  • webcon-scale-red-to-green–1 do webcon-red-to-green-red–10

2 thoughts to “Zaawansowane kolorowanie raportów”

  1. A czy można użyć zamiast ścieżki np akcji globalnej typu przycisk lub czy mamy gdzieś listę co możemy wykonać pod przyciskiem który dodamy sobie na widoku?

  2. Tworząć przycisk z ścieżką przejścia podajemy ID ścieżki, które zazwyczaj jest inne pomiędzy środowiskami DEV/TEST/PROD przez co tej funkcjonalności nie da się użyć albo trzeba pamiętać o zaktualizowaniu ID po przeniesieniu apki na inne środowisko. Lepiej byłoby przekazywać guida ścieżki, no chyba, że jest taka możliwość ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *