SharePoint Framework – »Dobrodošel svet!« Web Part

V mojem prvem Pika članku maja lanskega leta sem pisal o novi developer platformi za SharePoint – Sharepoint Framework. Takrat zgolj teoretično, sedaj pa lahko že skupaj poizkusimo narediti prvi Web Part na novi način, kot nam ga zapoveduje sam veliki Microsoft. In seveda, dali mu bomo ime nič kaj drugega kot »Dobrodošel svet!«.

Pa začnimo. Ne potrebujete zadnje high-tech mašine z nabildanim procesorjem, vsaj 16GB RAMa, tri virtualke z obveznim Windows okoljem ter nameščenim SharePoint-om zadnje verzije. Potreben ne bo niti Visual Studio 2015.
Namesto tega si namestite zgolj zadnjo verzijo Node.js in Visual Studio Code in veselje se lahko prične.

Najprej nekaj teorije: Node.js je JavaScript runtime okolje, nastalo iz Chrome Javascript engine-a. Uporabljali bomo njegov package ekosistem (NPM), ki je eden izmed največjih open-source zbirk knjižnic za razvoj client-side kode. Na drugi strani bomo imeli še Visual Studio Code, ki je zastonj, open source urejevalnik kode, specializiran za client-side kodo. Pomembno za oba je, da tečeta kjerkoli, to pomeni, da lahko spodnji Web Part za SharePoint razvijete na OsX ali Linux okolju.

Ko imate oboje nameščeno na svojem priljubljenem operacijskem sistemu, je potrebno s pomočjo NPM v Node.js runtime okolje namestiti še štiri stvari: Windows Build Tools compiler za MS native kodo; Yeoman project template generator, Gulp task runner za izvajanje standardnih taskov (npr. pretvorba TypeScript kode v JavaScript, uglify-anje kode, merganje različnih JS fajlov v enega skupnega, serviranje spletne strani itd.) ter Yeoman SharePoint Web Part project template, ki nam ga je pripravil Microsoft.
NPM ukazi za zgoraj našteto so:

sl18

Postavite se v poljubno mapo na računalniku, kjer bi radi ustvarili svoj nov projekt. Kreirajte mapo za projekt ter prikličite Yeoman generator na SharePoint Web Part project templatu z ukazom yo:

sl19

Prikaže se vam prijetno Yeoman okolje, v katerem boste določili par primarnih nastavitev projekta, kot so: ime, lokacija za shranjevanje datotek, ime ter opis Web Parta. Kot zadnja dilema je izbira JS rich-webpage frameworka (Knockout, React, Angular itd.), ki bi ga radi uporabili v svojem projektu. Naš project bo enostaven izpis teksta in par dodatnih dinamičnih parametrov, zato bomo tu izbrali: No javaScript web framework.

Ko vam Yeoman pripravi vse potrebne fajle, knjižnice in ostale bolj ali manj pomembne datoteke, lahko projekt oz. folder, v katerem se nahaja vaš projekt, odprete v Visual Studio Code.

sl20

V datoteki serve.json lahko najdemo, da bo naša aplikacija v času razvoja dosegljiva na nekem https://localhost naslovu z nekim specifičnim portom. Pozorni bodite na to, da gre za https protokol. Zato je priporočljivo pred samim serviranjem našega web-parta zagnati task, s katerim nastavimo zaupanje developer certifikatu, sicer bomo imeli nadležna security obvestila. To storimo z naslednjim ukazom:

sl21

V tem trenutku pa lahko zaženemo serviranje naše spletne strani z naslednjim ukazom:

sl22

V brskalniku se nam bo v nekaj trenutnih odprla stran, kot jo prikazuje spodnja slika:

sl23

Gre za t.i. SharePoint Workbench oz. okolje, v katerem lahko testiramo naše aplikacije, spisane v SharePoint Framework-u. Naš ravnokar kreirani web-part lahko dodamo s klikom na gumb + ter ga izberemo po imenu, ki smo ga določili, ko nas je po tem spraševal Yeoman.

Naš web-part v tem trenutku izgleda tako, kot prikazuje spodnja slika:

sl24

t.i. Property Pane oz. nastavitve web parta prikličemo s klikom na gumb Edit (oz. svinčnik na levi strani web-parta). Na desni strani se nam tako odpre nastavitvena konzola, ki ima trenutno zgolj eno nastavitev: Description Field. Če v to polje vnesemo tekst »Pozdravljen svet!«, to tudi takoj vidimo znotraj našega web-parta.

sl25

Pa dodelajmo sedaj naš web-part tako, da bomo nanj dodali še eno multi-line polje za vnos dodatnega teksta ter eno izbirno polje, s katerim bomo določili barvo ozadja našega web-parta.
Veselo na kodirno delo.

V datoteki PozdravljenSvetWebPart.ts najprej dodamo v vrstico 6 naslednjo kodo. Ta našemu web-partu dopove, da bomo v Property Panu uporabili drop-down polje:

sl26

Naslednje, kar moramo storiti, je popraviti interface za property pane IPozdravljenSvetWebPartProps.ts ter določiti, da bomo imeli še dve dodatni nastavitvi: multilineDescription in color.

sl27

Nazaj v datoteko PozdravljenSvetWebPart.ts, kjer lahko sedaj dodamo definicije naših dodatnih nastavitev v property panu:

sl28

Malo višje v datoteki, na vrstici 23, popravite kodo tako, da bomo nastavljali background-color iz naše dodatne nastavitve »color«, ki smo jo ravnokar dodali v property pane:

sl29

Če se postavite nazaj v SharePoint workbench in v vmesnem času niste prekinili task-a gulp serve, se vam je aplikacija v ozadju sproti posodabljala in že takoj lahko vidite vse spremembe, ki ste jih naredili v tem času:

sl30

Če popravite barvno nastavitev v property panu, se vam bo web-part sproti barval v izbrani barvi.

Po potrebi bi lahko dodatno prikazovali znotraj našega web-parta še več-vrstični tekst oz. opis, tako da bi brali vrednost iz nastavitve ${this.properties.multilineDescription}.

Lep pozdrav!
Gašper Rupnik

{End.}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: