SPFX - Komunikacja między WebPartami

Mateusz Chodkowski

SPFX – Komunikacja między WebPartami
Październik 24, 2017 Katarzyna Sobczak

SPFX - Komunikacja między WebPartami

W poprzednim artykule pokazałem, jak za pomocą SPFX wykorzystać dostęp do kontekstu całego dokumentu HTML. Tym razem mam zamiar pokazać, jak w prosty sposób wymieniać informacje między dwoma WebPartami utworzonymi w SPFX.

Ta część cyklu o SPFX nie będzie pokazywać, jak krok po kroku zainstalować paczki ani prezentować kodu niezbędnego do wykonania projektu. Skupimy się raczej na samej komunikacji. Jeżeli szukasz wprowadzenia do SPFX, to odsyłam do wstępu na temat SPFX, oraz do pierwszego projektu.

Założenia

Celem ćwiczenia jest utworzenie przy pomocy SPFX dwóch WebPartów. Pierwszy z nich będzie wyświetlał listę z danymi, drugi natomiast będzie odpowiedzialny za wyświetlanie danych z listy w formie wykresu. Docelowe zachowanie polegać będzie na tym, że gdy użytkownik najedzie kursorem na pozycję z listy, to w WebParcie odpowiedzialnym za wykres dojdzie do dynamicznej zmiany. Komunikacja odbywać się będzie za pomocą zdarzeń w języku JavaScript.

WebPart Listy

Pracę zaczynamy od WebParta zawierającego listę danych. Dane, które się w niej znajdą, zostaną umieszczone w kodzie WebParta (pobieranie danych z list SharePoint Online to temat na osobny wpis). Na początku tworzymy WebPart za pomocą polecenia yo (tak samo, jak we wpisie z Panem Spinaczem). Następnie trzeba zadeklarować klasę obiektu odpowiadającego jednej pozycji na liście. W tym celu dodamy plik DataRow.ts w lokalizacji /src/webparts/spfxList/.

Jak widać, zadeklarowaliśmy prostą strukturę przechowującą dane. Dodatkowo powstał również prosty generator danych, który teraz postaramy się wykorzystać. W pliku SpfxListWebPart.ts zaimportujemy obie klasy:


import {DataRow, DataRowMock} from './DataRow';

Teraz czas na instalację bibliteki jQuery. W konsoli wpisujemy:


npm install jquery --save

Następnie w SpfxListWebPart.ts dodajemy następujący import:


import * as $ from "jquery";

Teraz możemy przejść do tworzenia kodu HTML. Pominę tutaj opis prac nad warstwą wizualną, gdyż jest to kwestia w tym ujęciu drugorzędna. Po kilku modyfikacjach HTML oraz wykorzystaniu wcześniej zdefiniowanego Mocka mamy już gotową listę.

Dla lepszej czytelności w CSS warto ustawić regułę podświetlającą wiersz, na którym aktualnie znajduje się kursor.


tr:hover{background-color:white;color:#0078d7!important;}

WebPart Listy – Emisja zdarzeń

W tym momencie należy zdefiniować obsługę wydarzeń po stronie WebParta listy. W przypadku najechania na wiersz, wyemitujemy informację o zdarzeniu. W tym celu wykonamy najpierw nieco zmian w HTML oraz samej klasie WebParta.

Po pierwsze, lista departamentów, którą generujemy, stanie się polem klasy WebParta:

Po drugie, musimy w generowanym kodzie HTML zaznaczać numer aktualnego wiersza:

Teraz wystarczy tylko obsługa zdarzenia mouseenter i emitowanie odpowiedniej informacji w całym dokumencie:

WebPart wykresów

Kolejny krok to utworzenie WebParta z wykresem – w naszym przypadku będzie to pie chart. Na początku standardowo tworzymy nowy WebPart i czyścimy jego HTML.

Aby nie pisać wszystkiego od zera, posłużymy się paczką c3js (c3js.org). Wykorzystamy w tym celu polecenie:

Paczka c3js

npm install c3 --save

Po zakończonej instalacji koniecznie musimy do naszej klasy src/webparts/spfxCharts/SpfxChartsWebPart.ts zaimportować zależność c3:


import * as c3 from "c3";

Teraz pozostaje tylko dodać przykładowy wykres za pomocą biblioteki c3:

Wykres za pomocą biblioteki c3

Po wpisaniu polecenia:


 gulp serve

naszym oczom ukaże się prosty wykres.

Teraz wystarczy jeszcze zadbać o jego wygląd za pomocą CSS.
Efekt końcowy:

Wykres przy pomocy CSS

WebPart statystyk – reagowanie na zdarzenia

Czas na obsługę wydarzenia, które wysyłamy w WebParcie listy. W tym celu na początek skopiujemy z pierwszego projektu klasę DataRow i zaimportujemy ją w WebParcie statystyk:


import { DataRow } from './DataRow';

Kolejny krok to obsługa wydarzenia, którą dopiszemy do funkcji render. Przy okazji wyrzucamy stare renderowanie wykresu – nie będzie nam ono już potrzebne.

funkcja render

Efekt Końcowy

Po wgraniu obu WebPartów i umieszczeniu ich na tym samym widoku, zachodzi oczekiwane zachowanie. Gdy użytkownik najeżdża myszką na pozycję z listy, WebPart z wykresem automatycznie przeładowuje zawartość.

wykres WebPart

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!