Trochę czasu minęło od mojego ostatniego wpisu, a wynika to z faktu, że moja nowa praca całkowicie mnie pochłania. Dzięki temu mam jednak bardzo dużo przemyśleń na temat dzisiejszego artykułu, czyli jak stworzyć Sharepoint Display Template. Dodatkowo tak się składa, że ostatnio mam bardzo dużo pracy związanej z brandingiem sharepoint. W efekcie czego napisałem ostatnio już dwa posty (tu i tu) dotyczące modyfikacji wyglądu sharepointa. Dziś pora na SharePoint display template. Pewnie wielu z Was widziało na stronach zbudowanych w oparciu o SharePoint taki fajny widget, które prezentuje nadchodzące wydarzenia. Ten wpis właśnie będzie opisywał, jak możemy sobie coś takiego zbudować, bo w standardowej konfiguracji nie da się tego zrobić.

Jak stworzyć SharePoint Display Template

Na początek trochę teorii. Display template jest odpowiedzialny za format oraz styl webpartów związanych z usługą search. Display template odpowiada za to, które z zarządzanych właściwości będą wyświetlane, jak również w jaki sposób to się będzie odbywać. Na Display template tak naprawdę składają dwa elementy:

Control Template  to układ w którym będą osadzane zwracane przez usługę search wyniki. Control template jest renderowane tylko raz, w przeciwności do item template.

Item Template zaś odpowiada za to jak będą wyświetlane poszczególne elementy, czyli obrazki, tytuł, opisy, etc. Właśnie tym ostatnim elementem będę się dzisiaj zajmował.

Tu warto podkreślić, że Content Query Web Part, który czasami bardzo się przydaje, nie bazuje na usłudze wyszukiwania, a tym samym nie da się go modyfikować z display template – czego sam nie wiedziałem i zmarnowałem trochę czasu szukając miejsca gdzie Microsoft mógł schować jego template. Display template to część większej całości, na którą może się składać nasz projekt, którą potem możemy zbudować i stworzyć Design Package. Jest to całościowa paczka zawierająca wszystkie nasze modyfikacje i rozwiązania, które zapewnią nam właściwy wygląd naszych stron SharePoint.

Wracając do tego jak stworzyć SharePoint Display Template. Pierwszym krokiem będzie przejście w naszym site collection do Design Managera.

Przypominam, ażeby mieć do niego dostęp musimy mieć włączony SharePoint Server Publishing feature w naszym site collection/site. Gdy wyświetlimy zawartość folderu z Display template zobaczymy bardzo dużo plików, które są odpowiedzialne za wyświetlanie różnych danych. Omówienie wszystkiego to temat na kilka wpisów, ale generalnie zasada działania jest podobna w każdym przypadku. Ja jestem zainteresowany zmianą sposobu, w jaki prezentuje swoje pojedyncze elementy Content Search.

W zawartości folderu szukamy pliku, który będzie miał w tytule: „Picture on left, 3 lines on the right”. To plik, który nam się wyświetla gdy w Content Search webpart wyświetlimy sobie możliwe opcje dla Item. Więcej informacji o nazwach plików wraz z opisem można znaleźć na stronach Technet. Zaznaczamy go i robimy typowe CTRL-C, CTRL-V zmieniając jego nazwę w trakcie kopiowania. Teraz pora na SharePoint designer. Wyświetlamy całą zawartość witryny i przechodzimy do: /_catalogs/masterpage/Display Templates/Content Web Parts/nazwa_naszego_pliku. Tu warto podkreślić, że SharePoint w trakcie naszej operacji kopiowania stworzy dodatkowy plik o tej samej nazwie, ale o rozszerzeniu js. Jego nie edytujemy – pracujemy na HTML.

Pierwszym krokiem, powinno być zmienienie zawartości tagu Title na nasz własny. Nazwa, którą podamy będzie się wyświetlała na karcie konfiguracji web partu. Teraz kilka uwag co do samego pliku, bo jego czytelność i modyfikacja może być nie lada wyzwaniem.

  • z wartości naszych zmiennych korzystamy przez zapis _#=
  • Aby wywołać skrypt JavaScript po renderowaniu strony korzystamy z następującego zapisu:

<!–#

AddPostRenderCallback(ctx, function() {

//nasz kod

});

_#–>

Natomiast zapis:

var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
var line3 = $getItemValue(ctx, "Line 3");

odpowiada wartościom, które podamy w trakcie konfiguracji web partu w polach wartości zarządzanych

Pora na kod, który spowoduje wyświetlanie numeru dnia i trzech pierwszych liter miesiąca. Kod dodajemy na samym końcu pliku, tuż po ostatnim zamykającym nawiasie klamrowym:

<!–#_
}
var myDate = null;
myDate = new Date(line3);
var monthNames = [„Jan”, „Feb”, „Mar”, „Apr”, „May”, „Jun”, „Jul”, „Aug”, „Sep”, „Oct”, „Nov”, „Dec”];
var myMonth = monthNames[myDate.getMonth()];
var myDay = myDate.getDate();

AddPostRenderCallback(ctx, function() {
document.getElementById(„monthBox”+line3Id).innerHTML = myMonth
document.getElementById(„dayBox”+line3Id).innerHTML = myDay;
});
_#–>

Zwracam uwagę, w jakich tagach został umieszczony nasz kod. Odkrycie poprawnego zapisu może być lekko denerwujące… Zmienna „line3” odpowiada trzeciej linii z konfiguracji web partu, to tam jest data naszego wydarzenia. Następnie wyliczone wartości zwracamy i aktualizujemy elementy w kodzie:

<div id=”CompanyDate” style=”float: left; width: 50px; height: 50px; text-align: center; margin: auto;font-weight: bold; font-size:14px”>
<span id=”monthBox_#= line3Id =#_” >month </span>
<br>
<span id=”dayBox_#= line3Id =#_” >day </span>
</div>

Ten fragment kodu HTML, który widzicie powyżej dodałem to już istniejącego, przed fragmentem, który odpowiada za renderowanie obrazka. Dla tych, których dziwi ten zapis ID. Dzięki niemu mam możliwość wygenerowania automatycznie ID naszego tagu SPAN. W innym przypadku wszystkie nasze elementy miałby by ten sam dzień i miesiąc wydarzenia. W kolejnym poście pokażę jak skonfigurować web part oraz usługę search aby uzyskać zmierzony efekt. I to tak naprawdę wszystko. Publikujemy nasz plik. Po tym nazwa naszego pliku pojawi się na liście dostępnych wzorców dla Item w webparcie Content Search. Gotowe nasz SharePoint Display Template jest gotowy do wykorzystania.