Od wielu lat firmy posiadające w swojej infrastrukturze Microsoft SharePoint Server rozbudowują jego możliwości poprzez budowanie własnych dodatków. Mimo iż od wersji SharePoint 2013 promowane są aplikacje w technologii SharePoint Hosted App i Provider Hosted App, znaczna część napisanych i nowo pisanych rozwiązań nadal bazuje na niezalecanej technologii Farm Solution. W artykule postaram się pokazać jak stworzyć projekt Farm Solution w połączeniu z Angular, dzięki czemu aplikacja będzie bardziej „przyjazna” dla użytkowników i częściowo odciąży serwery front end. Rozwiązania Farm Solution nie są wspierane przez SharePoint Online. Niniejszy artykuł nie ma na celu zapoznania czytelnika z technologią Angular. Zainteresowanych podstawową wiedzą odsyłam do artykułów Bartosza Szewczyka oraz wyszukiwarki Google. Typowy projekt Farm Solution pozwala na rozbudowę SharePoint o wiele ciekawych mechanizmów. Możemy dodać między innymi: Każdy z tych elementów może zostać napisany z użyciem języka C# lub VB. Wszystkie stworzone elementy wraz z zewnętrznymi plikami typu dll, jpg itp. po zbudowaniu rozwiązania trafiają do jednej paczki o rozszerzeniu wsp. Paczka musi zostać wgrana przez administratora farmy SharePoint celem udostępnienia jej funkcjonalności. W celu utworzenia projektu musimy posiadać maszynę deweloperską z zainstalowanym SharePoint Server (np. 2013/2016) oraz Visual studio (np. 2015). Po uruchomieniu VS klikamy „New Project” i odnajdujemy typ projektu „SharePoint 2016 – Empty Project”. Wskazujemy nazwę projektu, np. „SharePoint_Angular4” i klikamy OK. Jeśli pojawi się komunikat o konieczności uruchomienia VS w trybie administratora, zezwalamy na to i dodajemy projekt raz jeszcze. Może okazać się, że folder o nazwie projektu już istnieje, więc albo należy go usunąć, albo użyć innej nazwy projektu. W kolejnym kroku wskazujemy adres URL naszej testowej witryny SharePoint oraz zaznaczamy opcję „deploy as a farm solutions”. Proszę pamiętać, żeby nie tworzyć solucji „sandbox solutions”. Nie są już wspierane. Dodajmy teraz nową stronę do naszego projektu. Na nazwie projektu klikamy PPM i wybieramy opcję „Add” > „New Item”. Wybieramy „Application Page”, podajemy nazwę strony i klikamy przycisk „Add”. W Projekcie pojawi się nowy plik, zobaczmy czy działa. Klikamy na pliku aspx w Solution Explorer PPM i w menu w opcję „Set as startup item”. Naciskamy F5 na klawiaturze aby uruchomić projekt. Jeśli pojawi się poniższe okno, klikamy Ok. Po chwili w przeglądarce pojawi się nasza strona w otoczce witryny SharePoint. Kolejnym wymaganym krokiem do utworzenia naszego rozwiązania jest dodanie modułu. Na nazwie projektu klikamy PPM i wybieramy opcję „Add” > „New Item”. Wybieramy „Module”, podajemy nazwę i klikamy przycisk „Add”. Tym samym utworzyliśmy trzon naszego rozwiązania. W kolejnych krokach dodamy Web Service oraz aplikacje Angular, a finalnie połączenie pomiędzy nimi. W przypadku budowania aplikacji opartych o Angular musimy posiadać serwis REST, który pozwoli na pobieranie oraz wysyłanie danych. SharePoint dostarcza zbiór serwisów REST pozwalających na komunikację z nim samym, ale co jeśli chcemy sięgnąć do bazy SQL albo zewnętrznego systemu? Nasze szanse na komunikację rosną, gdy do pracy możemy zaprzęgnąć C#. Nie chcąc powielać artykułów o tym, jak dodać web service, skorzystamy z istniejącego wpisu pt. Walkthrough: Creating a Custom ASP.NET (ASMX) Web Service in SharePoint 2010 (sekcja Creating the ASP.NET Web Service). Istotnym jest wygenerowanie #assembly strong name#. Efekt powinien wyglądać jak poniżej: Wartość oczywiście będzie inna niż w przykładzie. Do projektu dodajmy referencję „System.Web.Extensions”, a następnie zmieniamy plik MyCustomWebService.cs zgodnie z przykładem: Pora uruchomić PowerShell. Przechodzimy do folderu naszego modułu AngularApp Generujemy aplikację wydając kolejno polecenia: Wykonujemy jeszcze dwa, aby zobaczyć czy instalacja wykonała się poprawnie: Jeśli otrzymamy efekt jak poniżej, oznacza to, że wszystko poszło poprawnie: Przechodzimy do VS. W solution explorer włączamy pokazywanie wszystkich plików. W module „AngularApp” rozwijamy folder „SharePoint-Angular4” i zaznaczamy w nim wszystkie pliki/foldery poza node_modules. Klikamy PPM i następnie opcję „Include in project”. Kolejnym krokiem jest delikatna modyfikacja pliku Element.xml, gdyż nie wszystkie pliki w module powinny trafić na serwer podczas wgrywania paczki wsp. Zmieniamy plik zgodnie z przykładem. Zmiana polega na wycięciu linii <File>, które nie dotyczą plików z folderu „dist”: Następnie otwieramy plik „AngularApp.aspx” i dopisujemy w nim w sekcji PlaceHolderMain poniższe linijki: Dla wyjaśnienia SRC to nasza ścieżka w module: Naciskamy F5 na klawiaturze i po chwili naszym oczom powinna ukazać się stworzona aplikacja angularowa. Przechodzimy w projekcie do modułu i w nim zmodyfikujmy kolejno pliki TS: app.component.html app.component.ts: Po wykonaniu zmian kompilujemy aplikacje w PowerShell poniższym poleceniem: Jeśli komunikaty będą oznaczone na zielono, przechodzimy do VS i naciskamy F5 na klawiaturze. Po chwili ukaże się aplikacja z danymi pobranymi poprzez nasz web serwis: Budując aplikacje w przedstawionym modelu możemy uzyskać ciekawe połączenie nowych technologii służących do budowy aplikacji mobilnych wraz z dobrze znanym mechanizmem Farm Solution. Pozwala nam to tworzyć efektywne i „miłe dla oka” rozwiązania pracujące po stronie klienta, a zarazem komunikujące się z SharePoint oraz systemami zewnętrznymi. Cały projekt jest do pobrania tutaj: GITHUB
SharePoint 2016 Farm Solutions + Angular
Artykuł przedstawia sposób wykonania dodatku SharePoint 2016 Farm Solution w połączeniu z Angular.
Wprowadzenie
Angular
Farm Solution
Projekt
Web Service
Ważna uwaga – w przypadku SP 2016 serwis jest widoczny pod adresem: [URL]/_layouts/15/SharePoint_Angular4/MyCustomWebService.asmxAngular
Komunikacja pomiędzy aplikacja i web serwisem
App.module.ts
npm run build –prodPodsumowanie
Zespół: Apps
Autor:
Kamil Warowny
Kamil Warowny
Ostatnie artykuły autora
Skontaktuj się z Kamilem