Niestandardowe wykresy w WEBCON BPS

Mateusz Chodkowski

Niestandardowe wykresy w WEBCON BPS
Kwiecień 17, 2018 APN Promise SA

Niestandardowe wykresy w WEBCON BPS

W tym artykule omówiony zostanie problem bardziej skomplikowanych raportów na podstawie danych z procesów WEBCON BPS. Rozwiązanie Business Process Suite pozwala na szybkie „wyklikanie” ładnych wykresów jako elementów strony SharePoint. Co jednak zrobić, gdy klient wymaga nieco bardziej szczegółowego rozwiązania niż to podstawowe?

Zaplecze techniczne

Klient na swoim środowisku miał zainstalowany SharePoint 2016 oraz WEBCON BPS. Utworzony został też pewien proces BPS’a z dwoma powiązanymi między sobą formularzami. Odrzucono rozwiązanie oparte o wbudowaną w BPS listę pozycji na rzecz stanu obecnego ze względu na poziom skomplikowana drugiego z formularzy.

Dla uproszczenia dalszej analizy nazwijmy formularze, niech będą to Oferta oraz Pakiet.

Formularz pt. Oferta może zostać powiązany z wieloma pakietami. Wśród niezbyt licznych pól posiada pole wyboru Status oraz pole wyboru Kraj, które mają zostać wykorzystane do skompletowania odpowiedniego raportu.

Pakiet składa się oczywiście z pola wyboru Powiązana Oferta i pola Status, ale również licznych pól dat, które posłużą filtrowaniu danych do wykresów. Posiada również wiele pól liczbowych, które mają być wartościami sumowanymi w raportach i na wykresach.

Problem

Klient chciałby otrzymać wykresy różnego rodzaju na podstawie danych zapisanych w aplikacji WEBCON BPS. Klient życzy sobie, aby wykresy znajdowały się na dedykowanych stronach SharePoint 2016, a także były generowane za każdym razem na bieżąco.

Wymagane wykresy przekraczają podstawowe możliwości BPS w zakresie filtrowania danych. Przykładowe ich opisy brzmią skomplikowanie: wykres słupkowy np. powinien pokazywać rozkład ofert w kolejnych kwartałach, gdzie każdy kolor oznacza kraj w którym odbywa się przetarg, słupek po lewej stronie ma odzwierciedlać sumę z pola <Szacowana wartość inwestycji>, a słupek po prawej stronie sumę z pola <Wartość nominalna> Pod uwagę brane są tylko pozycje przetargu ze statusem <Bieżący> oraz <Zakończono>, oraz pole <Otrzymanie zaproszenia> nie jest puste. Dodatkowym utrudnieniem jest ustalenie wartości wynikowych pól na podstawie waluty i kursu, w których opisany jest pakiet (konieczne jest przeliczenie na złotówki).

Wykres kołowy z kolei np. powinien obliczać sumy pola <Cena zapłacona> w pakietach w skali ostatniego roku i przeliczać to na udział procentowy. Brane pod uwagę powinny być jedynie pakiety w kroku <Kupiony>.

SQL – pobieranie danych z WEBCON BPS

Aby wykonać tak skomplikowane zapytania do BPS zmuszeni jesteśmy zajrzeć do bazy danych SQL, w której BPS przechowuje wszystkie dane. Oczywiście moglibyśmy próbować przeanalizować pełną strukturę bazy danych i zrozumieć jej działanie, jednak istnieje znacznie prostsza i szybsza ścieżka, z której warto skorzystać.

Baza danych WEBCON BPS zawiera w sobie widoki baz danych, które pozwolą nam na proste odpytywanie i filtrowanie zapisanych danych.

Aby dostać się do wspomnianych widoków należy połączyć się z bazą danych WEBCON BPS za pomocą MS SQL Server Management Studio, a następnie wejść w bazę BPS_Content i zakłądkę Views.

W tym miejscu powinniśmy znaleźć widoki dotyczące procesów o nazwach zbudowanych wg. schematu dbo.V_PROCESS_NazwaProcesu_IdProcesu.  W tym miejscu mamy możliwość wykonania zapytania na wskazanym widoku.

Po wykonaniu zapytania ukazane zostanie nam gotowe zapytanie SQL, zwracające wszystkie dane z interesującego nas procesu. Znajdziemy w nim zarówno kolumny techniczne, jak i zwykłe kolumny zawierające wartości z formularzy. Warto zwrócić tutaj uwagę na poszczególne pola techniczne:

  • WFD_ID – ID elementu procesu
  • DEF_Name – Nazwa procesu
  • WF_ID – ID obiegu
  • WF_Name – Nazwa obiegu
  • STP_ID – ID kroku
  • STP_Name – Nazwa kroku

Dzięki tym polom wprawny w SQL programista łatwo wyfiltruje dane potrzebne do stworzenia raportu. Mamy tutaj możliwość złożenia skomplikowanego joina, sumowania wartości i tym podobnych operacji.

Przykładowy kod SQL dla wykresu słupkowego (pierwsze 3 miesiące):

Przykładowy kod SQL dla wykresu kołowego:

SharePoint – Custom Webpart

Mając przygotowane zapytanie SQL należy utworzyć WebPart, który pozwoli na umieszczenie wyników danego zapytania. W tym celu uruchamiamy Visual Studio i tworzymy nowy projekt. W naszym przypadku był to projekt Web Part SharePoint 2013.

Teraz dodamy klasę pozwalającą nam na łączenie się z bazą danych MSSQL. Nasza klasa powinna zawierać connection string, pozwalający na połączenie się do bazy, oraz metodę zwracającą wynik zapytania. Tutaj przykładowa klasa DbConnector:

Do tak przygotowanej metody Query możemy teraz zapiąć odpowiedni connection string oraz przygotowane wcześniej zapytanie SQL.

Warto również zauważyć, że takie rozwiązanie nie jest w stu procentach elastyczne. W przypadku, gdy WebPart ma stać się reużywalny warto zastanowić się nad wykorzystaniem właściwości WebParta do złożenia wykorzystanego tutaj connection stringa. Polecam dobry artykuł temat wykorzystania właściwości WebParta.

Na tym etapie przygotujmy nasz plik .ascx oraz .ascx.cs – są to pliki odpowiedzialne za działanie WebParta. Zawartość samego WebParta będzie bardzo prosta. Przygotujemy odpowiedni HiddenField do przechowywania wartości ściągniętych z bazy oraz odpowiedni kontener na nasz wykres. Dodatkowo możemy tutaj przypiąć konieczne do utworzenia wykresu biblioteki języka JavaScript oraz nasz własny skrypt, który omówimy w następnej części tego artykułu.

Teraz pora zajrzeć do pliku .ascx.cs. Wykonamy tutaj nasze zapytanie SQL i przepiszemy dane do utworzonego chwilę wcześniej HiddenField.

W metodzie PageLoad wykonamy nasze zapytanie i przepiszemy je do ukrytego pola. Dodatkowo, aby móc łatwiej sięgnąć z JavaScriptu do tych danych, nasz zestaw danych przekonwertujemy na obiekt JSON za pomocą prostej metody.

Tak przygotowany WebPart możemy skompilować do postaci paczki WSP i opublikować . Następnie paczkę należy zainstalować w SharePoint. W dalszej części wyjaśniona zostanie część odpowiedzialna za wyświetlanie  wykresów po stronie klienta.

Oczywiście omówiony tutaj przypadek jest bardzo uproszczony, całkiem możliwe, że na danym WebParcie wyświetlanych będzie znacznie więcej wykresów lub dane pobierane będą za pomocą kilku zapytań.

JavaScript – renderowanie wykresów

Aby wyświetlić wykres na podstawie pobranych wcześniej danych możemy wykorzystać jedną z gotowych bibliotek do generowania wykresów. Jednym z preferowanych jest canvas.js (www.canvasjs.com), warte uwagi są też rozwiązania D3.js (www.d3js.org).

Dla przykładu mamy tutaj rozwiązanie oparte o canvas.js, mające na celu wyświetlenie wykresu kołowego z pobranych wartości. Treść wcześniej podpiętego pliku PieChartPricePaidByType.js zdradza nam mechanikę tworzenia tej wizualizacji.

Na początku pobierzemy wartość z ukrytego pola zadeklarowanego w poprzedniej części artykułu, następnie przetworzymy nieco dane, tak aby przygotować je do procentowego podziału koła. W kolejnym kroku uruchomiona zostaje biblioteka canvas.js.

Jak widać, konfiguracja samego wykresu nie należy do bardzo skomplikowanych. Właściwości, na które warto zwrócić uwagę:

  • theme – schemat kolorów (dostępne opcje to: light1, light2, dark1,dark2 )
  • exportEnabled – odblokowuje możliwość pobierania wykresów
  • animationEnabled – uruchamianie animacji wykresu
  • text – tytuł wykresu (w naszym przypadku mamy też tytuł WebParta, który jest edytowalny, dlatego pozostaje pusty)
  • type – typ wykresu
  • toolTipContent – pozwala na zdefiniowanie zawartości tooltipa po najechaniu na słupek/wycinek/punkt etc.
  • legendText – tekst wykorzystany w legendzie
  • indexLabelFontSize – rozmiar tekstu wykorzystanego na wykresie
  • indexLabel – pozwala na zdefiniowanie tekstu wykorzystanego na wykresie (np. przy danym wycinku koła)
  • dataPointsźródło danych dla wykresu

Na tym etapie warto też rozważyć dodanie schematu kolorów, można to osiągnąć w prosty sposób, wystarczy zadeklarować paletę barw przed utworzeniem obiektu chart.

Następnie wystarczy wykorzystać ją we właściwości colorSet.

Więcej przykładów wykorzystania biblioteki można znaleźć na stronie canvasjs.com. Wyjaśniono tam liczne przypadki zastosowania biblioteki, również bardzo skomplikowane. W przypadku poszukiwania bardziej szczegółowych właściwości polecam dokumentację i wyszukiwarkę.

Podsumowanie

Artykuł ten pokazuje, że istnieje sposób na wyfiltrowanie danych z systemu WEBCON BPS i utworzenie z nich raportów i wykresów bardziej skomplikowanych niż te, które proponuje producent oprogramowania. Jest to jednak ścieżka wymagająca odpowiedniej wiedzy z zakresu SQL, SharePoint oraz JavaScript.

Dzięki takiemu rozwiązaniu mogliśmy w pełni przenieść dotychczasowe systemy raportowania naszego klienta na rozwiązanie WEBCON BPS bez utraty dotychczasowej funkcjonalności. Przygotowane rozwiązanie jest proste w utrzymaniu i daje duże możliwości w warstwie wizualnej. Mamy tu też pole do popisu dla zdolnego frontend-developera, który zadba o odpowiednią kolorystkę oraz ułożenie elementów w WebParcie. Dzięki temu raporty mogą być nie tylko treściwe i czytelne, ale również atrakcyjne dla oka.

Uzyskane realizacje dla opisanych na początku problemów:

Podziel się

Autor: Mateusz Chodkowski

Mateusz Chodkowski

Mateusz-Chodkowski

Programista .NET i SharePoint, twórca aplikacji front-end i projektant procesów WEBCON BPS. Fascynatem programowania w .NET oraz JavaScript, projektant i entuzjasta cyfryzacji “papierowych” procesów biznesowych, a prywatnie miłośnik historii oraz rysunku.

Zespół: Apps

Ostatnie artykuły autora

Migracja archiwalnych skanów umów do nowego procesu WEBCON BPS

Migracja archiwalnych skanów umów do nowego procesu WEBCON BPS

Cyfryzacja papierowych procesów, poza licznymi zaletami, wiąże się również z wyzwaniami, takimi jak migracja archiwalnych danych. Co zrobić z archiwalnymi danymi? Jak w prosty sposób migrować archiwalne dane do procesu WEBCON BPS?

Proces modyfikacji wzorca do generowania dokumentów w WEBCON BPS

Proces modyfikacji wzorca do generowania dokumentów w WEBCON BPS

W artykule omówiono kwestię podmiany wzorców, na podstawie których procesy WEBCON BPS generują pliki. Rozwiązanie to pozwala na wykonanie takiej czynności ręcznie, jednak można zautomatyzować ten proces i dodać do niego element kontroli.

Niestandardowe wykresy w WEBCON BPS

Niestandardowe wykresy w WEBCON BPS

Artykuł porusza problem skomplikowanych raportów na podstawie danych z procesów WEBCON BPS. Rozwiązanie Business Process Suite pozwala na szybkie „wyklikanie” wykresów jako elementów strony SharePoint. Co jednak zrobić, gdy klient wymaga bardziej szczegółowego rozwiązania?

Skontaktuj się z Mateuszem

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!