Sharepoint branding – część druga

W poprzednim artykule „Sharepoint branding krok po kroku” pokazałem Wam jak można stworzyć własny master page, który możemy wykorzystać między innymi w SharePoint Online (Office 365). To jednak nie wszystko. Microsoft daje nam jeszcze sporo możliwości, które pomogą nam w dodaniu dodatkowych funkcjonalności do naszych stron.

Sharepoint branding – część druga

Przejdźmy do design managera, a następnie kliknijmy na link „Conversion successful” dla naszego master page. Zostaniemy przeniesieni na stronę z poglądem. Dzięki niej możemy zobaczyć jak będzie wyglądać nasza strona główna, przy użyciu naszego wzorca.

Pora na następny krok. Klikając w górnym menu na „Snippets” otworzymy nową stronę, która daje nam dostęp do różnych modyfikacji, która mogą bardziej rozszerzyć funkcjonalność naszego master page. Po kolei od lewej strony mamy dostęp do:
– Navigation – możliwość dodania do master page nawigacji
– Administration – tu mamy możliwość dodania elementów administracyjnych
– Containers – tu znajdziemy kontenery dla naszych elementów
– Web Parts – jak sama nazwa mówi kod dla webartów
– Custom ASP.NET markup – jeżeli wcześniejsze opcje nam nie wystarczyły możemy sobie wygenerować własny kod

No dobrze pora na zaprezentowanie możliwości, które dają nam snippety. Zobaczmy to na przykładzie snippetu wyświetlającego zawartość lub też nie, w zależności od naszych uprawnień. Z górnego menu wybieramy Security Trim -> Show to Authenticated Users.

SharePoint wyświetli nam szczegółowe ustawienia dla tej opcji. Okno Preview pokazuje nam działanie naszego snippetu, a HTML snippet zawiera kod, którego powinniśmy użyć w kodzie master page.Nas w tym momencie interesuje Customization – Security Trim. Zmieniając ustawienia będziemy mamy wpływ na to jak nasz snippet będzie działał. Wybierzmy z menu rozwijanego AuthenticationRestrictions wybieramy AuthenticatedUsersOnly. Oznacza to, że tylko użytkownicy, którzy zostali uwierzytelnieni będą brani pod uwagę. Następnie z Permissions  wybieramy ApproveItem. Ta druga opcja pozwoli tylko użytkownikom, którzy mają uprawnienie Approve Item na wyświetlnie zawartości.

Dodatkowo możemy sobie dostosować jak graficznie będzie funkcjonował ten snippet. Po zakończeniu konfiguracji naciskamy przycisk update, co zaktualizuje kod w oknie HTML Snippet. Na koniec kopiujemy do schowka wygenerowany kod korzystając z przycisku Copy to Clipboard.

Pora przejść do SharePoint designera. Otwieramy nasz master page. Jak pisałem we wcześniejszym poście pracujemy na pliku html, a nie master.
Znajdźmy w kodzie następujący fragment kodu:

[code lang="xml"]

<div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) -->

<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>

<!--PE: End of READ-ONLY PREVIEW -->
        </div>

[/code]

Odpowiada on za generowanie górnego menu na stronie. Wklejamy kod snippeta powyżej kodu wstążki, a następnie przenosimy jej kod do środka tagów DIV naszego snippetu. Na koniec kod powinien wygląd w ten sposób:

[code lang="xml"]

<div data-name="SecurityTrimmedAuthenticated">
    <!--CS: Start Security Trim Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" Permissions="ApproveItems">-->
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span><!--PE: End of READ-ONLY PREVIEW-->

<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">

<div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) -->

<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>

<!--PE: End of READ-ONLY PREVIEW -->
        </div>

        </div>

        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--></span><!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
    <!--CE: End Security Trim Snippet-->
</div>

[/code]

Zapisujemy i to wszystko. Teraz, gdy użytkownik wyświetli naszą stronę, zobaczy wstążkę tylko w przypadku, gdy ma uprawnienia, które wcześniej skonfigurowaliśmy. To tylko krótki przykład na to, co możemy zrobić, aby dostosować master page do naszych przykład. Sharepoint branding to nie jest coś bardzo skomplikowanego, a możliwości jest znaczenie więcej – zachęcam do eksperymentowania.