SPFX - Pan Spinacz w SharePoint Online

Mateusz Chodkowski

SPFX – Pan Spinacz w SharePoint Online
30 października, 2017 Katarzyna Sobczak

SPFX - Pan Spinacz w SharePoint Online

Ten artykuł ma na celu pokazanie jak dodać element przyklejony do strony SharePoint Online za pomocą SPFX. Przy okazji omówimy cały proces tworzenia WebParta SPFX.

(Jeśli nie wiesz czym jest SPFX, zapraszam do lektury artykułu zapoznawczego.) 

Projekt

Aby stworzyć projekt, potrzebny nam będzie nodejs oraz edytor Visual Studio Code. W tym celu uruchamiamy konsolę (jako administrator), przechodzimy do wybranej lokalizacji projektu i wpisujemy:


yo @microsoft/sharepoint

Instalator zapyta nas o szczegóły projektu:

Instalator

Po kilku minutach pobierania paczek projekt będzie gotowy. Możemy go teraz otworzyć za pomocą VS Code.

clipper visual studio code

Instalacja Paczek

W naszym projekcie przyda się zapewne jQuery – dodamy je za pomocą paczki pobranej z Node Package Manager. Aby to zrobić, w konsoli wpisujemy:


npm install jquery --save

Teraz w kodzie aplikacji musimy dodać import biblioteki, z której chcemy skorzystać. W tym celu w pliku src/webparts/clipper/ClipperWebPart.ts na samym początku dodajemy linię:


import * as $ from "jquery";

Teraz mamy już możliwość korzystania z jQuery.

Kod

Na początek uruchomimy nasz WebPart, aby móc na bieżąco testować zmiany. W tym celu w konsoli wpisujemy:


gulp serve

Po chwili w naszej przeglądarce powinien ukazać się workbench, na którym możemy dodać WebPart za pomocą ikonki “+”.

Webpart template

Po dodaniu WebParta widać, że mamy już przygotowany prosty template.

SharePoint Clipper

Wykorzystamy go, aby stworzyć prosty panel do uruchamiania i chowania Pana Spinacza. W tym celu przejdźmy do pliku src/webparts/clipper/ClipperWebPart.ts, a konkretnie do funkcji render(). Na potrzeby dzisiejszego ćwiczenia zmienimy nieco zawartość tego WebParta. Warto zauważyć, że za każdym razem, gdy programista zapisuje zmiany w plikach, zakładka w przeglądarce zostaje odświeżona automatycznie.

Funkcja render
mrClipper

Skupmy się teraz na Panu Spinaczu – na początek napiszemy CSS, który pozwoli na wyświetlanie go w odpowiednim miejscu na ekranie. W tym celu przechodzimy do pliku src/webparts/clipper/Clipper.module.scss. Na samym końcu pliku, poza ostatnią klamrą, dodamy klasę .mrClipper:

Funkcja render

Teraz w pliku src/webparts/clipper/ClipperWebPart.ts dodamy funkcję pozwalającą na dodanie Pana Spinacza do zawartości całej strony (linie 39-43), a także wywołanie tej funkcji wewnątrz funkcji render(linia 35; zob. rys. poniżej).

funkcja wewnątrz funkcji render

Czas zaprogramować logikę przycisków Show oraz Hide. W tym celu napiszemy funkcję setButtonsHandling (linie 43-50) i przypniemy ją do funkcji render() (linia 36).

funkcja setButtonsHandlin

Efekty

Po wykonanych operacjach Pan Spinacz powinien pojawiać się po kliknięciu odpowiedniego przycisku. W gestii programisty pozostaje, co zrobi z nim dalej – na przykład może dodać link do pomocy, lub napisać coś bardziej skomplikowanego.

Clipper control panel

Deploy

Teraz czas na wdrożenie. Oficjalny poradnik wspomina o wykorzystaniu Office 365 CDN. Jest to jedno z możliwych rozwiązań, jednak chciałbym podzielić się z Tobą prostszym i szybszym sposobem. Na początek zaloguj się na swojego SharePointa Online i utwórz Bibliotekę dokumentów o nazwie “Clipper”.

Biblioteka dokumentów

Po wejściu w podgląd naszej biblioteki należy skopiować adres Biblioteki i odciąć z niego fragment Forms/AllItems.aspx. Finalnie adres, którego potrzebujemy, to np.: https://apn365.sharepoint.com/sites/matcho_dev/Clipper/

Teraz znajdujemy plik /config/write-manifests.json i uzyskany wcześniej adres umieszczamy w polu cdnBasePath.

Kolejnym krokiem jest uzupełnienie numeru wersji. Numer wersji znajduje się w pliku config/package-solution.json (linia 5). Ten numer należy powiększyć za każdym razem, gdy wgrywamy nową wersję na SharePoint.

Teraz czas na stworzenie paczki. W tym celu uruchamiamy z konsoli kolejno trzy polecenia (aby przerwać działanie polecenia gulp serve możesz użyć kombinacji Ctrl + C):


gulp --shipgulp bundle --shipgulp package-solution --ship

Po wykonaniu tych trzech poleceń, w lokalizacji /sharepoint/solution/ znajdziemy plik clipper.sppkg. Ten plik jest gotowy do wgrania poprzez AppCatalog. Jeśli jesteś administratorem SharePointa Online, powinieneś teraz przejść do AppCatalogu pod adres: https://twojanazwa.sharepoint.com/sites/appscatalog/.

Z trzech możliwych kafli wybieramy opcję “Dystrybucja aplikacji dla programu”:

AppCatalog

Następnie wybieramy opcję “Przekaż” i wybieramy plik. Po chwili ładowania pojawi się okno, w którym potwierdzamy nasze zaufanie do aplikacji za pomocą przycisku “Wdróż”:

zaufanie do aplikacji

Następnie wracamy do biblioteki dokumentów, którą utworzyliśmy na początku i przekazujemy do niej wszystkie pliki będące zawartością folderu /temp/deploy.

W kolejnym kroku, z lewego menu przechodzimy do zawartości witryny, wybieramy opcję “Nowy” oraz “Aplikacja”.

zawartość witryny: aplikacja

W wyszukiwarce aplikacji znajdujemy aplikację clipper-client-side-solution i klikamy w nią (Nazwa jest konfigurowalna w projekcie).

Teraz wystarczy wejść na dowolną stronę w nowym wyglądzie SharePoint Online i spróbować dodać Pana Spinacza. W tym celu wejdę z lewego menu w pozycję “Strony” i dodam nową stronę witryny. Za pomocą przycisku “+” dodam nasz WebPart. Pamiętaj, że stronie trzeba koniecznie nadać tytuł. Teraz wystarczy zapisać i opublikować stronę.

clipper

Ostatecznie doczekaliśmy się Pana Spinacza w SharePoint:

Pan Spinacz w SharePoint

Podsumowanie

Czytelnik po przejściu przez ten post wie, jak stworzyć prosty WebPart za pomocą SPFX oraz jak zaimportować do niego biblioteki z NPM. Czytelnik zna też tajniki wdrażania rozwiązań SPFX w uproszczony sposób. Przy okazji pokazaliśmy, że WebParty mogą mieć wpływ na całą stronę SharePoint.

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"]