Zaawansowane kolorowanie raportów

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. Przeczytaj ten artykuł, żeby dowiedzieć się jak ta automatyzacja procesów biznesowych może pomóc w Twojej firmie.

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