Zaczynamy od utworzenia folderu z projektem oraz otwarcia konsoli w danym folderze. Pod has\u0142em konsola w moim wypadku ukryty jest PowerShell. PowerShell mo\u017ce zosta\u0107 w \u0142atwy spos\u00f3b otwarty w VS Code z menu View -> Integrated Terminal.<\/p>\n\n\n\n
Wywo\u0142ujemy polecenie yo @microsoft\/sharepoint i odpowiadamy na pytania dialogowe:<\/p>\n\n\n\n Na potrzeby artyku\u0142u, web part nazwa\u0142em Navigation i do tej nazwy b\u0119d\u0119 si\u0119 odnosi\u0142.<\/p>\n\n\n\n Prac\u0119 mo\u017cemy rozpocz\u0105\u0107 po kr\u00f3tkim pobieraniu niezb\u0119dnych paczek oraz tworzeniu struktury projektu. W strukturze projekt\u00f3w najbardziej b\u0119d\u0105 interesowa\u0142y nas foldery:<\/p>\n\n\n\n Zacznijmy od szybkiej konfiguracji web partu. W pliku NavigationWebPart.manifest.json ustawiamy nazw\u0119 web partu, grup\u0119 do kt\u00f3rej ma on nale\u017ce\u0107 (widoczne w klasycznej wersji SharePointa) oraz opis. Ikona web partu mo\u017ce zosta\u0107 wybrana na trzy sposoby:<\/p>\n\n\n\n Wy\u015bwietlana ikona b\u0119dzie mie\u0107 rozmiar 40x28px. Nie zalecam stosowania ikony w postaci URL – spowoduje to utrudnienie utrzymania web parta oraz jego ponownego zastosowania na innym \u015brodowisku.<\/p>\n\n\n\n Je\u017celi wybra\u0142e\u015b\/a\u015b ikon\u0119 w postaci base64, ikona ta nie b\u0119dzie widoczna w workbenchu. \u017beby sprawdzi\u0107 czy ikona poprawnie si\u0119 wy\u015bwietla, nale\u017cy wi\u0119c zainstalowa\u0107 paczk\u0119 na SharePoincie.<\/p>\n\n\n\n Pr\u00f3cz widocznej konfiguracji mo\u017cemy doda\u0107 niewidoczn\u0105 opcj\u0119 „supportsFullBleed”: true. Pozwoli to na wy\u015bwietlenie web partu na pe\u0142nej szeroko\u015bci strony, je\u015bli taki layout zosta\u0142 u\u017cyty.<\/p>\n\n\n\n Ostatnim etapem konfiguracji jest sekcja „properties”. Tutaj mo\u017cemy utworzy\u0107 zmienne, w kt\u00f3rych przechowywana b\u0119dzie konfiguracja danej instancji web partu:<\/p>\n\n\n W tej cz\u0119\u015bci swojej serii przedstawi\u0142em podstawowe informacje dotycz\u0105ce konfiguracji oraz struktury projektu. Ta wiedza stanowi niezb\u0119dnik do dalszej pracy. Z tego miejsca zapraszam Ci\u0119 do cz\u0119\u015bci drugiej „SharePoint Framework \u2013 przyk\u0142adowy web part<\/a>„, w kt\u00f3rej porusz\u0119 tematyk\u0119 kodu oraz przedstawi\u0119 gar\u015b\u0107 porad dotycz\u0105cych SPFx.<\/p>\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2018\/07\/1.png\")
<\/a><\/figure>\n\n\n\nKonfiguracja oraz struktura projektu<\/h2>\n\n\n\n
\n
\n
Konfiguracja web partu<\/h2>\n\n\n\n
\n
\n{\n\n\"$schema\": \"https:\/\/dev.office.com\/json-schemas\/spfx\/client-side-web-part-manifest.schema.json\",\n\n\"id\": \"4cba7112-aedf-4e1b-bfc8-ff293f3c7d52\",\n\n\"alias\": \"NavigationWebPart\",\n\n\"componentType\": \"WebPart\",\n\n\"version\": \"*\",\n\n\"manifestVersion\": 2,\n\n\"supportsFullBleed\": true,\n\n\"requiresCustomScript\": false,\n\n\"preconfiguredEntries\": [{\n\n\"groupId\": \"5c03119e-3074-46fd-976b-c60198311f70\",\n\n\"group\": { \"default\": \"Other\" },\n\n\"title\": { \"default\": \"Navigation\" },\n\n\"description\": { \"default\": \"Universal navigation webpart\" },\n\n\"officeFabricIconFontName\": \"Page\",\n\n\"properties\": {\n\n\"items\": \"\"\n\n}\n\n}]\n\n}\n<\/pre><\/div>\n\n\nPodsumowanie<\/h2>\n\n\n\n