Branding to słowo, dla którego raczej nie ma dobrego odpowiednika w języku polskim, a szczególnie w tym kontekście, o którym chcę pisać. Tematem tego wpisu, będzie modyfikacja graficznego interfejsu SharePointa online, tak aby SharePoint nie wyglądał jak SharePoint – to dość często spotykane sformułowanie. Chcę pokazać jak wykonać Sharepoint branding krok po kroku, tworząc master page. Na samym początku od razu wyjaśnijmy jedną kwestię. Microsoft jest generalnie przeciwny brandingowi, a szczególnie jeżeli chodzi o projekty mocno ingerujące w strukturę sharepoint.

Osobiście rozumiem to podejście, szczególnie w kontekście Office 365, gdy jakaś aktualizacja może nasz cały misterny projekt rozsypać w drobny mak. Z drugiej strony centralna strona portalu, gdzie są prezentowane na przykład firmowe albo marketingowe informacje, dobrze aby przyciągała wzrok swoim wyglądem. To, co tu zaprezentuję to podejście osoby, która nie ma za grosz zmysłu graficznego, czyli coś, co dotyka sporej części osób programujących sharepointa.

Sharepoint branding

Na początek potrzebujemy projektu naszej strony. Musimy pamiętać, żeby nasza strona nie korzystała z fajerwerków takich jak np. flash czy silverlight. Z drugiej strony rewelacyjne efekty można osiągnąć korzystając z HTML 5, javascript, Bootstrap, itp. W Internecie znajdziecie sporo stron, które oferują darmowe wzorce. Choćby pierwsza z brzegu strona. Pobieramy wybrany wzorzec i otwieramy w Visual Studio lub innym wybranym edytorze. Z projektu pozbywamy się wszystkiego, co nie będzie nam potrzebne: skryptów, które nie są używane, zbędnych obrazków, zbędnych stron – chodzi o jak najmniejszy rozmiar naszego projektu. Z reguły zostaniemy z jedną stroną html, skryptami i arkuszami stylu. Dodatkowo sprawdzamy czy któryś ze składników nie odwołuje się do zasobów w Internecie. Nie jest to problem o ile link zewnętrzny nie jest typu http. W takim przypadku użytkownikowi, co chwila będzie wyskakiwał komunikat o niebezpiecznej zawartości naszej strony, a tego wolelibyśmy uniknąć. Jeszcze jedna kwestia – zdjęcia. Nie ma problemu, żeby nasz master page korzystał na przykład ze slidera, albo innych rozwiązań, które używają zdjęć. Jest natomiast istotne, aby zdjęcia były w katalogach Master Page Gallery. Owszem możemy umieścić nasze zdjęcia w bibliotekach Sharepoint i w pliku html zawrzeć odwołania do tych bibliotek. Niestety problemem będzie wtedy mocno zauważalne opóźnienie w ich wyświetlaniu, które stawia pod znakiem zapytania takie podejście. Ostatni projekt, który widzicie poniżej miał rozmiar 1.8 Mb, przy czym zdjęcia stanowiły połowę tej wartości. Dodatkowo sporo zajmowały Font Awesome, które do najmniejszych nie należą.

No dobrze przejdźmy teraz do SharePointa. Aby móc dokonać zmian w wyglądzie naszej witryny, konieczne będzie włączenie opcji publikowania (Publishing Infrastructure) : Site settings – > Site Collection Administration – > Site collection features i tu włączamy opcję SharePoint Server Publishing Infrastructure. To chwilę potrwa… Następnie przechodzimy do Site Settings -> Site Features i włączamy opcję SharePoint Server Publishing. Widocznym znakiem, że wszystko jest tak jak należy, jest pojawienie się w menu opcji Design Manager.

Właśnie funkcjonalność design manager to nowość w stosunku do wcześniejszych wersji. Więcej znajdziecie na stronach MSDN. To niesamowite narzędzie daje nam możliwość przerobienia naszego projektu www na w pełni funkcjonalny master page. Przechodzimy na stronę Design Manager. Zobaczymy menu jak poniżej:

Opcje są następujące:

2. Manage Device Channels – tu mamy możliwość tworzenia różnych sposobów wyświetlania stron w zależności od urządzenia

3. Upload Design Files – tu znajdują się narzędzia do przesłania plików na serwer

4. Edit Master Pages – tu konwertujemy nasz projekt www na master page, jak również mamy możliwość generowania snipetów sharepoint, które mogą dostosowywać nasz projekt

5. Edit Display Templates – tu możemy sobie sprawdzić wzorce wyświetlania (Display Templates)

6. Edit Page Layouts – tu tworzymy nowe układy stron (page layouts)

7. Publish and Apply Design – tu możemy opublikować nasz master page

8. Create Design Package – na koniec możemy sobie stworzyć paczkę z gotowym projektem master page, który możemy wykorzystać w innym miejscu, bez konieczności tych wszystkich etapów.

Pora na kolejny krok. Prześlijmy nasze dane na serwer.  Z menu design managera wybieramy opcję Upload Design Files. SharePoint wyświetli nam link do Master Page Gallery. Możemy go kliknąć i powinna się ona nam podmapować. To tu załadujemy nasze pliki. Tu jedna uwaga, opcja mapowania SharePointa, jako dysku lokalnego działa dobrze tylko z Internet Explorerem. Co więcej nawet nowa przeglądarka z Windows 10 – Edge nie obsługuje poprawnie tej opcji. Jeżeli wcześniejsza opcja nie zadziałała to możemy skopiować link, otworzyć go w nowej zakładce IE, a po wyświetleniu zawartości master page gallery wybieramy opcję open with explorer.

Po dłużej chwili zawartość katalogu master page powinna zostać zmapowana, jako dysk lokalny naszego komputera. Jeżeli nadal nam się dysk nie chce podłączyć to pod tym linkiem znajdziecie sposoby na rozwiązanie tego problemu.

Tworzymy sobie katalog na nasz projekt i wrzucamy zawartość naszego projektu – nie wrzucajmy pojedynczych plików to katalogu głównego, bo zrobi się bałagan. Kolejnym krokiem jest opublikowanie wszystkich elementów, które przesłaliśmy na serwer. Żeby nie klikać każdego elementu pojedynczo warto skorzystać z opcji: Site Content and Structure, dzięki której możemy publikować wiele elementów na raz.

Po opublikowaniu wszysatkich plików pora na finał. Przechodzimy do design managera i wybieramy opcję: Edit master pages, a następnie: Convert an HTML file to a SharePoint master page. Wybieramy naszą stronę html, która ma się przekształcić w master page. Po chwili na stronie dostępnych master page powinna się pojawić nasza własna. Co ważne to jej status powinien być Conversion successful.

Jeżeli jest inaczej to musimy się pozbyć kodu, który powoduje błąd. Pora opublikować nasz master page więc jeszcze raz klikamy na naszą stronę html w master page gallery i jeszcze raz wybieramy opcję publikuj. Nie klikamy na sam master page, który się tam pojawił! Tu ważna uwaga. Pracujemy zawsze na pliku HTML, a nie wynikowym master page. To po stronie sharepointa jest synchronizowanie zmian, które robimy w kodzie html z kodem master page.  Jeżeli wszystko dobrze poszło to nasz master page powinien się pojawić na liście dostępnych master page, które możemy wykorzystać na swoich stronach. Na dziś to tyle. Zrobiliśmy nasz pierwszy Sharepoint branding krok po kroku. W następnym poście postaram się pokazać co więcej można jeszcze zrobić z naszym projektem.