Wyślij zapytanie Dołącz do Sii

Obecny trend wskazuje na to, że coraz więcej przedsiębiorstw rezygnuje z własnych serwerów SharePoint na rzecz usługi Office 365. Zmniejszenie odpowiedzialności ze strony wewnętrznego działu IT oraz zamiana kosztów utrzymania na koszty subskrypcji są tylko uzupełnieniem korzyści, które płyną ze stosowania ciągle rozwijanej i na bieżąco aktualizowanej chmurowej wersji SharePoint.

Aby umożliwić rozbudowę SharePointa, udostępniony został pakiet deweloperski SharePoint Framework – w skrócie zwany SPFx. Jest to zestaw bibliotek, który pozwala tworzyć web party oraz rozszerzenia działające po stronie klienta. W swojej serii artykułów „SharePoint Framework” przedstawię jak łatwo przygotować web part nawigacyjny. Z części pierwszej dowiesz się niezbędnych informacji na temat konfiguracji oraz struktury projektu.

Co będzie potrzebne:

  • NodeJS,
  • Edytor np. darmowy Visual Studio Code,

Zaczynamy od utworzenia folderu z projektem oraz otwarcia konsoli w danym folderze. Pod hasłem konsola w moim wypadku ukryty jest PowerShell. PowerShell może zostać w łatwy sposób otwarty w VS Code z menu View -> Integrated Terminal.

Wywołujemy polecenie yo @microsoft/sharepoint i odpowiadamy na pytania dialogowe:

1 1024x129 - SharePoint Framework - konfiguracja

Na potrzeby artykułu, web part nazwałem Navigation i do tej nazwy będę się odnosił.

Konfiguracja oraz struktura projektu

Pracę możemy rozpocząć po krótkim pobieraniu niezbędnych paczek oraz tworzeniu struktury projektu. W strukturze projektów najbardziej będą interesowały nas foldery:

  • config – zawierający konfigurację projektu:
    • package-solution.json – tu ustalimy nazwę generowanej paczki oraz jej wersję. Przed każdym wgraniem paczki na tenant należy podnieść wersję, aby zapobiec problemom z ładowaniem plików źródłowych,
    • tslint.json – w tym pliku możemy przygotować własną konfigurację walidacji kodu,
  • src – kod źródłowy. W podfolderze webparts/navigation znajdują się podstawowe pliki naszego web partu.

Konfiguracja web partu

Zacznijmy od szybkiej konfiguracji web partu. W pliku NavigationWebPart.manifest.json ustawiamy nazwę web partu, grupę do której ma on należeć (widoczne w klasycznej wersji SharePointa) oraz opis. Ikona web partu może zostać wybrana na trzy sposoby:

Wyświetlana ikona będzie mieć rozmiar 40x28px. Nie zalecam stosowania ikony w postaci URL – spowoduje to utrudnienie utrzymania web parta oraz jego ponownego zastosowania na innym środowisku.

Jeżeli wybrałeś/aś ikonę w postaci base64, ikona ta nie będzie widoczna w workbenchu. Żeby sprawdzić czy ikona poprawnie się wyświetla, należy więc zainstalować paczkę na SharePoincie.

Prócz widocznej konfiguracji możemy dodać niewidoczną opcję „supportsFullBleed”: true. Pozwoli to na wyświetlenie web partu na pełnej szerokości strony, jeśli taki layout został użyty.

Ostatnim etapem konfiguracji jest sekcja „properties”. Tutaj możemy utworzyć zmienne, w których przechowywana będzie konfiguracja danej instancji web partu:


{

"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",

"id": "4cba7112-aedf-4e1b-bfc8-ff293f3c7d52",

"alias": "NavigationWebPart",

"componentType": "WebPart",


"version": "*",

"manifestVersion": 2,

"supportsFullBleed": true,

"requiresCustomScript": false,


"preconfiguredEntries": [{

"groupId": "5c03119e-3074-46fd-976b-c60198311f70",

"group": { "default": "Other" },

"title": { "default": "Navigation" },

"description": { "default": "Universal navigation webpart" },

"officeFabricIconFontName": "Page",

"properties": {

"items": ""

}

}]

}

Podsumowanie

W tej części swojej serii przedstawiłem podstawowe informacje dotyczące konfiguracji oraz struktury projektu. Ta wiedza stanowi niezbędnik do dalszej pracy. Z tego miejsca zapraszam Cię do części drugiej „SharePoint Framework – przykładowy web part„, w której poruszę tematykę kodu oraz przedstawię garść porad dotyczących SPFx.

Ocena:
Autor
Avatar
Konrad Rugała

Cześć! Mam na imię Konrad. Pracuję na stanowisku SharePoint Developer w Sii Polska. Od kilku lat mam kontakt z różnymi technologiami, z których każda ma coś ciekawego do zaoferowania. Wiedzą, którą zdobędę lubię się dzielić, szczególnie jeśli może się ona okazać pomocna dla innych. SharePoint daje mi pewną okazję, gdyż w polskojęzycznej części Internetu nie jest on popularny. Dlatego zapraszam Cię drogi czytelniku do śledzenia tego bloga.

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany.

Może Cię również zainteresować

Pokaż więcej postów

Bądź na bieżąco

Zapisz się do naszego newslettera i otrzymuj najświeższe informacje ze świata Sii.

Otrzymaj ofertę

Jeśli chcesz dowiedzieć się więcej na temat oferty Sii, skontaktuj się z nami.

Wyślij zapytanie Wyślij zapytanie

Get an offer

Natalia Competency Center Director

Dołącz do Sii

Znajdź idealną pracę – zapoznaj się z naszą ofertą rekrutacyjną i aplikuj.

APLIKUJ APLIKUJ

Join Sii

Paweł Process Owner

ZATWIERDŹ

This content is available only in one language version.
You will be redirected to home page.

Are you sure you want to leave this page?