SharePoint 2016 Farm Solutions + Angular

Wprowadzenie

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.

Angular

Niniejszy artykuł nie ma na celu zapoznania czytelnika z technologią Angular. Zainteresowanych podstawową wiedzą odsyłam do artykułów Bartosza Szewczyka oraz wyszukiwarki Google.

Farm Solution

Typowy projekt Farm Solution pozwala na rozbudowę SharePoint o wiele ciekawych mechanizmów. Możemy dodać między innymi:

• Strony (ASP.NET)
• WebPart  (ASP.NET)
• Event Handler
• Job
• Elementy menu / wstążki
• Wiele innych…

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.

Projekt

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.

Web Service

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.
Ważna uwaga – w przypadku SP 2016 serwis jest widoczny pod adresem: [URL]/_layouts/15/SharePoint_Angular4/MyCustomWebService.asmx

Do projektu dodajmy referencję „System.Web.Extensions”, a następnie zmieniamy plik MyCustomWebService.cs zgodnie z przykładem:

Angular

Pora uruchomić PowerShell. Przechodzimy do folderu naszego modułu AngularApp

Generujemy aplikację wydając kolejno polecenia:

• npm install -g @angular/cli
• ng new SharePoint-Angular4

Wykonujemy jeszcze dwa, aby zobaczyć czy instalacja wykonała się poprawnie:

• cd SharePoint-Angular4
• npm run build –prod

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.

Komunikacja pomiędzy aplikacja i web serwisem

Przechodzimy w projekcie do modułu i w nim zmodyfikujmy kolejno pliki TS:
App.module.ts

app.component.html

app.component.ts:

Po wykonaniu zmian kompilujemy aplikacje w PowerShell poniższym poleceniem:
npm run build –prod

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:

Podsumowanie

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