SharePoint Tips. JSLink

      1 komentarz do SharePoint Tips. JSLink

Żyjemy w czasach, gdzie coraz więcej zadań zarezerwowanych wcześniej dla programistów, wykonują administratorzy i vice versa. Można się na to zżymać, ale prawda jest taka, że bez znajomości podstaw programowania coraz trudniej będzie znaleźć miejsce na tym rynku pracy. Nie inaczej jest z SharePoint. Sama znajomość tematów związanych z administracją i konfiguracją tego narzędzia da Ci ledwie kawałeczek jego możliwości. Co z resztą? Czas na programowanie!

Nie bój się programowania

Od razu muszę Cię uspokoić. Nie zamierzam zanudzać Cię szczegółami składni poszczególnych języków programowania. Nie musisz nawet znać ich podstaw. Przygotowując ten odcinek kursu myślałem głównie o osobach, które na co dzień nie zajmują się web developmentem.

JavaScript, wszędzie JavaScript

Cały przykład, który zaraz opiszę i zaprezentuję na nagraniu, został napisany w JavaScript (plus JQuery). Z samym językiem na pewno miałeś styczność przynajmniej jako użytkownik. To podstawowe narzędzie wykorzystywane praktycznie na każdej stronie webowej. Nie będę w tym kursie uczył cię podstaw tego języka. Te musisz zdobyć samodzielnie. W sieci znajdziesz niezmierzone ilości darmowych tutoriali, książek, kursów i przykładów. Wystarczy tylko, a może aż, poświęcić na to trochę czasu.

SharePoint i JavaScript

JavaScript, REST i inne API pozwalają wykonywać dowolne akcje na platformie SharePoint. Mogą też służyć do zmiany sposobu wyświetlania przez niego informacji. To właśnie tym przypadkiem zajmiemy się za chwilę. Założenia są dość proste. Każdy formularz i widok listy wyświetla się w webparcie. Webparty posiadają specjalną właściwość, która kryje się pod tajemniczą nazwą JSLink. W tym skromnym polu zapisać można łącze do pliku JavaScript, który będzie zaczytany podczas generowania danego widoku, czy formularza. Pozostaje jedynie wykorzystać go tak, aby w pożądany sposób zmodyfikować sposób prezentacji danych. Ukrywanie pól, zmiana układu widoku, formatowanie warunkowe, zmiana kontrolek,… przykłady można mnożyć w nieskończoność. Ciągle nie wiesz o co mi chodzi? Czas na przykład.

Kafle

W poprzednim odcinku prezentowałem Ci jedną z moich ulubionych list – wyróżnione łącza. Teraz spróbujemy pójść krok dalej i zbudować własne rozwiązanie. Chciałbym aby kafle miały kilka dodatkowych funkcji:

  • Własne tło w formie zdjęcia. Możemy je wzbogacić o subtelny gradient
  • Możliwość generowania w różnych rozmiarach  (mały, średni, duży)
  • Możliwość ukrywania danego kafla na życzenie
  • Proste kontrolowanie kolejności wyświetlania

Przepis

Do realizacji tego zadania będą potrzebne:

  1. Lista. To na niej przechowywane będą dane kafli. Musi się składać z odpowiednich pól.
  2. Skrypt. Serce rozwiązania. Będzie kontrolować w jaki sposób i jakie dane prezentować.
  3. Arkusz styli CSS. To plik, który będzie kontrolować wygląd kafli.

Mając te elementy, wystarczy je umieścić je w odpowiednim miejscu i skonfigurować widok. Poszczególne kroki i końcowy efekt zobaczysz na tym nagraniu. Wszystkie użyte w przykładzie pliki znajdziesz 💾 tutaj.

Podsumowanie

Mam nadzieję, że rozpaliłem Twoją ciekawość w temacie wykorzystania JavaScript i SharePoint. To temat rzeka, a każdą podróż zaczyna się od pierwszego kroku. W tym przypadku warto wykonać go wykorzystując jeden z wielu gotowców. Jeśli mój wydaje Ci się zbyt skomplikowany, to zerknij choćby tutaj. Spróbuj wdrożyć jeden z tych przykładów u siebie. Potem spróbuj go lekko zmienić. Z każdą kolejną próbą będzie łatwiej.

Jeśli masz pytania do tego tematu, zostaw je w komentarzach. Jeśli chcesz powalczyć z SharePoint na naszych darmowych warsztatach, to zapraszam na 🤝 meetup’y. Mam nadzieję, że się tam spotkamy.

W kolejnej lekcji zostawimy na chwilę tematy programistyczne i wrócimy do jednej z ciekawszych usług na platformie SharePoint- Managed Metadata. Do następnego razu!

 

1
Dodaj komentarz

avatar
1000
1 Comment threads
0 Thread replies
5 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Piotrek Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

najnowszy najstarszy oceniany
Piotrek
Gość
Piotrek

Cześć Łukasz, dzięki za kurs 🙂 wróciłem do niego po dłuższym czasie i nie załuję. Podstawy super opisane. Większość treści jak najbardziej jeszcze aktualna. Natomiast w tym filmie treść chyba się trochę przedawniła i w modern już inaczej się robi. Stawiam właśnie pierwsze kroki z edycją webpartów. Ten link z plikami z artykułu wygasł jakby co.