SPFX - Redesign webpartów

Mateusz Chodkowski

SPFX – Redesign webpartów
24 sierpnia, 2017 Katarzyna Sobczak

SPFX - Redesign webpartów

Najstarsza wersja SharePoint, z jaką miałem okazję pracować, to SP 2010. Porównując developerskie doświadczenie z WebPartami dla SharePoint można dojść do wniosku, że nie zmieniły się one za bardzo na przestrzeni lat. Czy rozwiązania sprzed lat wciąż są w stanie sprostać wymaganiom klientów oraz developerów? Czy dług technologiczny ciągnący się za tym rozwiązaniem nie staje się zbyt ciężki?

Wytarte ścieżki

Standardowe WebParty dla SharePoint to aplikacje napisane w ASP.NET, hostowane obok SharePoint – przy pomocy tej techniki trudno jest uzyskać dynamiczne strony internetowe bez przeładowań. W dodatku, programiści tworzący takie rozwiązania potrzebują skomplikowanego środowiska, którego czas konfiguracji jest dość długi. Co gorsza, najczęstszym modelem jest umieszczenie WebParta na stronach SharePoint poprzez iframe, a obecnie znacznik ten jest uznawany za przestarzały, niezbyt wygodny, a nawet niebezpieczny.

Przykład

Jako przykład nieprzystosowania pozwolę sobie pokazać fragment WebParta, w którym ostatnio dokonywałem zmian wizualnych. Dodatkowym wymogiem było wyświetlanie obrazków w formie lightboxa (wyśrodkowane, powiększone zdjęcie z wyciemnieniem tła). Próba kliknięcia obrazka skutkowała smutnym widokiem:

Jak widać, zacieniowany obszar pokrywa się tylko z obszarem iframe. Zapewne możliwe jest rozwiązanie tego problemu przemyślanym kawałkiem JavaScriptu lub kodu CSS – pytanie tylko, czy chcemy rozmyślać nad takimi kwestiami za każdym razem, gdy próbujemy osiągnąć efekt wykraczający poza szablonowe rozwiązania.

Nie chcemy!

Narzędzia, z których korzystamy, powinny dopasować się do potrzeb – z tego względu przestarzała już nieco koncepcja klasycznych WebPartów doczekała się konkurencji.

SPFX (lub – jak kto woli – SharePoint Framework) to nowy sposób na tworzenie WebPartów (obecnie dostępny tylko dla SharePoint Online).

Nowoczesne rozwiązania

Tworzenie WebPartów z pomocą SPFX opiera się w dużej mierze o node.js. Tworzenie projektu odbywa się poprzez konsolę i przyjazny instalator yeoman.io, który w dodatku w trakcie instalacji zapyta, czy na przykład nie chcemy korzystać z Reacta:

Samo rozwiązanie powstaje w oparciu o popularny język TypeScript. Dzięki temu programista zachowuje swobodę programowania webowego, a jednocześnie ma możliwość używania twardego typowania i strukturyzacji logiki. Dzięki takiemu podejściu nawet programiści przyzwyczajeni do C# powinni szybko odnaleźć się SPFX. W końcu, czy poniższa struktura nie wygląda znajomo?

Kolejnym dużym plusem jest możliwość skorzystania z Node Package Manager. Programista nie musi pisać wszystkich elementów od zera – NPM za darmo oferuje 475 000 różnego rodzaju paczek: od rozwiązujących skomplikowane obliczenia począwszy, a na gotowych wykresach, kalendarzach i innych elementach skończywszy.

Wygodne środowisko pracy

Pracując z SPFX wykorzystujemy do testowania narzędzie gulp.
Wystarczy, że w konsoli developer wpisze polecenie:


gulp serve

Efektem będzie zasymulowane środowisko o budowie podobnej do SharePoint, na którym możemy testować rozwiązania. Od teraz programista pracuje bez każdorazowego wgrywania paczki na serwer. Wgramy paczkę i zmienimy wersję, gdy wszystko już będzie gotowe.

Wygoda tworzenia

Aplikacje tworzone w SPFX są zagnieżdżone w inny sposób niż klasyczne WebParty. Nie znajdują się one w znaczniku iframe – są po prostu elementami DOM. Dzięki temu rozwiązaniu znajdują się w tym samym dokumencie, co reszta witryny. Stwarza to wiele możliwości.

Po pierwsze, za pomocą właściwości obiektów document oraz window możemy współdzielić dane pomiędzy wieloma webpartami – takie rozwiązanie pozwala na rozszerzenie standardowych elementów o wielokierunkową komunikację.

Na przykład możemy stworzyć dwa webparty: webpart listy pracowników oraz drugi, który będzie widoczny tylko wtedy, gdy wybierzemy osobę na liście, a jego zadaniem będzie wyświetlanie np. statystyk sprzedaży wskazanego pracownika. Należy też zaznaczyć, że taka komunikacja jest bardzo prosta – można ją skonfigurować za pomocą atrybutu okna lub dokumentu, a także za pomocą zdarzeń:


document["selectedUser"] = this.selectedUserId;

lub:


//Na liście użytkowników
var event = new CustomEvent('selectedUserChanged', { selectedUser: id });
event.initEvent('selectedUserChanged', true, true);
document.dispatchEvent(event);
 
//Na webparcie z wykresem
elem.addEventListener('selectedUserChanged',
    function (e) { handleUserChange(e);
}, false);

Wyjść poza ramkę

Ponadto, możliwe jest również ingerowanie w wygląd samego SharePointa z poziomu WebParta. Na dokumencie (i jego dzieciach) możemy zwyczajnie wymuszać różnego rodzaju zmiany (np. koloru, rozmiaru, etc.). To wszystko możemy wykonać na przykład za pomocą powszechnie znanej biblioteki jQuery, zupełnie jakbyśmy zrobili to na zwykłej stronie HTML, a nie w SharePoint:


$('body').css('background-color', '#0A92FB');

Referencja do głównego trzonu dokumentu daje nam też możliwość dodawania własnych elementów, które – na przykład – będziemy chcieli przyczepić do konkretnego miejsca w oknie. Wystarczy, że do dokumentu dodamy odpowiedni element DOM.

Na początek CSS:


.mrClipper{
  position:absolute;
  bottom:50px;
  right:50px;
  z-index:999;
  display:block;
  width:100px;
  height:100px;
  background-image:'clipper.png';
}

A teraz wewnątrz webparta:


var el = document.createElement("div");
el.className = styles.mrClipper;
document.body.appendChild(el);

W ten sposób możemy wskrzesić Pana Spinacza w SharePoint Online 🙂

Podsumowanie

SPFX wciąż się rozwija, ale już teraz oferuje zmianę jakości pracy nad WebPartami. Warto być na bieżąco, ponieważ ten framework może zrewolucjonizować tworzenie aplikacji dla SharePoint.

Baza wiedzy

Tutorial SPFX

Node Package Manager

Yeoman

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.

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?

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

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!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]