Kolorowanie komórek w raportach aplikacji

Dotyczy wersji: 2020.1.x i wyższych; autor: Katarzyna Cypser
Aktualizacja: 08.01.2026; autor: Katarzyna Cypser, Lily Adamowicz 

 

Funkcjonalność kolorowania raportów na formularzach oraz dashboardach została wprowadzona w wersji WEBCON BPS 2020. 

Poza możliwością kolorowania komórek można także dodawać ikony, cieniować komórki oraz tworzyć wiele zaawansowanych konfiguracji wykorzystujących m.in. instrukcje warunkowe. 

Opcja dostępna jest w konfiguracji raportu w Portalu: 

 

Podczas edycji raportu, w zakładce „Widoki” pojawia się nowa kolumna „Wygląd” – po kliknięciu w ikonę kredki/ołówka przy danej kolumnie raportu otwiera się okno z możliwością wyboru jednego z czterech trybów kolorowania: 

• Pasek danych

W trybie Pasek danych komórki zostaną pokolorowane według procentowego udziału zawartych w nich danych w stosunku do przedziału pomiędzy wartością minimalną a maksymalną. 

W konfiguracji należy wybrać odpowiedni kolor z dostępnej palety kolorów oraz określić minimalne i maksymalne wartości. 

Poniżej znajduje się przykładowa konfiguracja dla kolumny zawierającej liczby w przedziale 1 -11, z wprowadzonymi wartościami min = 1 oraz max = 10. 

 

Widok raportu po konfiguracji:

 

Wszystkie wartości znajdujące się pomiędzy minimalnym a maksymalnym zakresem posiadają proporcjonalnie rozłożony pasek wybranego koloru: wartości >=10 osiągają 100% koloru, wartości =<1 posiadają 0%. Po dodaniu kolejnych elementów do raportu, wartości min/max mogą ulec zmianie, a wraz z nimi szerokość paska dla każdej z komórek. 

 

• Skala kolorów

Konfiguracja trybu Skala kolorów przebiega w podobny sposób – tutaj także kolorowanie następuje po przeliczeniu procentowego udziału wartości w komórce w stosunku do min/max. W każdym trybie jednak zmianie ulega nasycenie koloru. Do wyboru są cztery typy kolorów, a w każdym zawartych jest 10 odcieni. 

W poniższym przykładzie dla kolumny, w której znajdują się dane liczbowe w przedziale 100-1000, w konfiguracji został wybrany typ kolorów: Czerwony-Przeźroczysty-Zielony. Oznacza to, że kolor komórek będzie zmieniać odcień, przechodząc stopniowo od czerwonego do zielonego. Tym razem wybrano domyślne wartości min/max: 

 

Przy takich ustawieniach wartości minimum i maximum zostały pobrane z raportu: min = 100, max = 1000 , a więc liczby z przedziału 0 -100 są w kolorze czerwonym o maksymalnym nasyceniu, a z przedziału 900 – 1000 w kolorze zielonym. Pozostałe wartości mają kolory o proporcjonalnie rozłożonych odcieniach. 

W taki sposób wybrana kolumna prezentuje się na raporcie: 

 

• Warunki

Tryb Warunki działa na zasadzie instrukcji warunkowych, wykorzystując operatory dostępne w zależności od typu danych wybranej kolumny. W tym trybie można zmieniać kolor tła oraz czcionki, a także odnosić się do zawartości innych kolumn. 

Przykład konfiguracji kolumny, w której zostało dodanych kilka warunków, odnoszących się do wartości kolumny własnej oraz z innych kolumn: 

 

Widok na raporcie:

 

• Zaawansowany

Konfiguracja w trybie zaawansowanym jest możliwa przy użyciu formatu JSON. Schemat tworzenia takiej konfiguracji można znaleźć pod linkiem: files.webcon.com/bps/reports/column-formatting.schema.v3.json 

Tryb zaawansowany umożliwia wykonywanie dużo bardziej złożonych ustawień w których można manipulować wnętrzem komórek, dodawać obrazy, wykorzystując np. instrukcje warunkowe. 

Przykład konfiguracji zaawansowanej, która pozwala na dodanie tekstu do komórki wraz z jej obramowaniem, znajduje się na poniższym zrzucie ekranu: 

 

Widok raportu:

 

W kolejnym przykładzie trybu zaawansowanego użyto wyrażeń z funkcją if. W zależności od wartości w komórce zmienia się jej kolor, kolor tła oraz dodawane są odpowiednie ikony ze zdefiniowanymi stylami.

 

 

Widok raportu:

 

Nazwy kolumn CurrentField oraz CurrentRawValue służą do odwoływania się do danych znajdujących się w bieżącej komórce raportu. W przypadku konieczności odwołania się do wartości z innych kolumn, należy stosować techniczne nazwy kolumn bazy danych, zapisane w odpowiednim formacie. 

Zasady stosowania nazw kolumn:   

• Kolumny procesowe (atrybuty formularza) – należy usunąć prefiks WFD_, np. WFD_AttChoose7 → AttChoose7. 
  Typowe nazwy atrybutów: 

• • atrybut typu picker: AttChoose1, AttChoose2 

• • atrybut tekstowy: AttText1 

• • atrybut typu decimal: AttDecimal1 

• • atrybut typu int: AttInt1 

• Kolumny procesowe List pozycji – dla tych kolumn należy pozostawić oryginalną nazwę kolumny bazy danych bez modyfikacji, np.: DET_Att1, DET_Att2, DET_Att3. 

• Kolumny systemowe – w warunkach i wyrażeniach stosuje się wyłącznie stałe identyfikatory systemowe: DEF (proces), STP (krok) oraz WF (obieg). W nazwach kolumn należy zastąpić znak podkreślenia kropką, np. DEF_Name → DEF.Name.

 

Przykładowo: 

{ 

 "$schema": "https://files.webcon.com/bps/reports/column-formatting.schema.v3.json", 

 "style": { 

  "background-color": "=if(pickerCompareById(STP, '1'), '#bf3592', '')", 

  "color": "=if(pickerCompareById(STP, '1'), '#FFFFFF', '')" 

 }, 

 "attributes": { 

  "class": "webcon-conditions" 

 }, 

 "children": [ 

  { 

   "element": "children" 

  } 

 ] 

} 

 

Dodatkowym ułatwieniem jest to, że po zapisaniu konfiguracji w trybie podstawowym i przełączeniu jej na tryb zaawansowany, w polu tekstowym wyświetlany jest automatycznie wygenerowany plik JSON. Konfigurację tę można następnie dowolnie edytować i dostosować do własnych potrzeb.