SharePoint 2016 Farm Solutions + Angular

Kamil Warowny

SharePoint 2016 Farm Solutions + Angular
Grudzień 5, 2017 Katarzyna Sobczak

SharePoint 2016 Farm Solutions + Angular

Artykuł przedstawia sposób wykonania dodatku SharePoint 2016 Farm Solution w połączeniu z 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.

SharePoint 2016 – Empty Project

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.

deploy as a farm solutions

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”.

Application Page

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”.

Solution Explorer PPM

Naciskamy F5 na klawiaturze aby uruchomić projekt. Jeśli pojawi się poniższe okno, klikamy Ok.

Debugging

Po chwili w przeglądarce pojawi się nasza strona w otoczce witryny SharePoint.

App page

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”.

Module

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:

SP 2016 serwis

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

SP 2016 serwis

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

System.Web.Extensions

Angular

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

moduł 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:

npm run build –prod

Przechodzimy do VS. W solution explorer włączamy pokazywanie wszystkich plików.

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”.

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”:

delikatna modyfikacja pliku Element.xml

Następnie otwieramy plik „AngularApp.aspx” i dopisujemy w nim w sekcji PlaceHolderMain poniższe linijki:

PlaceHolderMain

Dla wyjaśnienia SRC to nasza ścieżka w module:

ścieżka

Naciskamy F5 na klawiaturze i po chwili naszym oczom powinna ukazać się stworzona aplikacja angularowa.

Application page

Komunikacja pomiędzy aplikacja i web serwisem

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

App.module.ts

app.component.html

app.component.html

app.component.ts:

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:

Aplikacja w Angular

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

Podziel się

Autor: Kamil Warowny

Kamil Warowny

Kamil Warowny

Zespół: Apps

Ostatnie artykuły autora

SharePoint Online + Azure Free, Część 2: Zdarzenia dodania i edycji elementu listy bądź dokumentu

SharePoint Online + Azure Free, Część 2: Zdarzenia dodania i edycji elementu listy bądź dokumentu

W artykule przedstawiono możliwość wykorzystania bezpłatnych funkcjonalności Azure Functions w połączeniu z SharePoint Online celem automatycznych reakcji na dodanie lub edycję elementu listy lub dokumentu w witrynie SharePoint.

SharePoint Online + Azure Free, Cześć 1: Cykliczne przetwarzanie danych

SharePoint Online + Azure Free, Cześć 1: Cykliczne przetwarzanie danych

Niniejszy artykuł przedstawia możliwość wykorzystania bezpłatnych funkcjonalności Azure w połączeniu z SharePoint Online celem automatyzacji przetwarzania cyklicznego danych zamieszczonych w witrynie SharePoint.

SharePoint 2016 Farm Solutions + Angular

SharePoint 2016 Farm Solutions + Angular

Artykuł przedstawia sposób wykonania dodatku SharePoint 2016 Farm Solution w połączeniu z Angular.

Skontaktuj się z Kamilem

 

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!