PnP Modern Starterkit, what’s in it for you?

Ook tijdens de SharePoint Conference 2018 zijn er verschillende nieuwe onderdelen gelanceerd. Zo is er nu een best practice opgesteld voor het migreren van klassieke sites naar een modern site. In deze best practice wordt stap voor stap beschreven hoe je klassieke pagina’s kan omzetten naar modern en wordt hierbij ook tooling geleverd om een gedeelte te automatiseren. Op https://aka.ms/sppnp-modernize kun je het stappenplan, de tools en meer informatie hierover vinden.

De grootste onthulling binnen het PnP program tijdens de SharePoint conference 2018 kwam met de lancering van de Modern SharePoint starterkit. Deze starterkit is bedoeld om makkelijk en snel een demonstratie omgeving op te zetten in Office 365. In deze omgeving worden verschillende onderdelen van modern sites binnen Office 365 als showcase getoond. De starterkit is niet bedoeld om op een productie-omgeving als oplossing te draaien, maar puur om het gebruik van verschillende technieken te laten zien. Mocht je toch onderdelen uit de starterkit willen gebruiken in een productie omgeving, dan ben je vrij om dit onderdeel uit de starterkit te kopiëren en onder eigen beheer in een productie waardige solution onder te brengen. Als de starterkit uitgerold wordt binnen Office 365, is niet direct duidelijk welke onderdelen er nu allemaal in zitten, hoe deze zouden moeten werken of hoe je ze kunt activeren. Als je vervolgens in de code en deployment scripts duikt kun je achterhalen wat er allemaal in de starterkit zit. Hieronder zullen we hier samen verder induiken om zo een beter inzicht te krijgen in de starterkit.

Modern Starterkit

Als je de modern starterkit hebt gedownload vanaf https://aka.ms/sp-starter-kit, kun je de stappen volgen zoals beschreven op de pagina waar je landt. Als dit gedaan is, staat de solution met alle SharePoint Framework onderdelen op de tenant en ben je klaar om de provision scripts te draaien. Met het volgende commando worden dan 3 sitecollecties aangemaakt waarvan er één als hub-site wordt ingesteld en de andere twee worden aan deze hub toegevoegd.

.\\deploy.ps1 -TenantUrl \[Jouw tenant url \] -SitePrefix demo

Binnen de hub sites worden verschillende pagina’s aangemaakt en hier worden een aantal WebParts opgezet. Ook worden er binnen deze sites verschillende SharePoint Framework extensions geactiveerd.

SharePoint Framework extensions

SharePoint Framework extensions beïnvloeden de moderne SharePoint pagina’s buiten de WebPartzones. Hiermee kunnen dus bijvoorbeeld aanpassingen worden gedaan aan de header, de footer en de linker navigatie zone. De modern starterkit bevat zeven SharePoint Framework extensions. Deze zijn echter niet direct zichtbaar. Een aantal worden geactiveerd bij het draaien van het deploy script, maar een aantal blijven ook gedeactiveerd. Anders dan een WebPart kun je extensions niet zomaar op een pagina’s slepen of op een site activeren. Hiervoor is binnen de starterkit gekozen voor activatie via PowerShell. Met het volgende script kan een extension worden geactiveerd op een modern site.

Connect-PnPOnline-Url “\[SiteUrl\]” Get-PnPCustomAction Add-PnPCustomAction -Name “\[ExtensionNaam\]” -Title “\[ExtensionTitel\]” -Location “ClientSideExtension.ApplicationCustomizer”-ClientSideComponentId “\[ExtensionID\]”

Hierbij zorgt het Connect-PnPOnline commando voor de connectie met de beoogde modern site. Het Get-PnPCustomAction command laat alle geactiveerde extensions op de betreffende modern site zien. Het Add-PnPCustomAction commando activeert de betreffende extension op de site. Bij het activeren kan een naam en titel worden meegegeven en een extensionID. Deze extensionID moet overeenkomen met het ID dat in code is gegeven aan de desbetreffende extension. Hieronder zal ik elke extension uit de modern starterkit kort bespreken met achter de naam het ID van de extension zodat je hiermee de extensions makkelijk kunt activeren op je eigen demo site.

AlertNotification (aa8dd198-e2ee-45c5-b746-821d001bb0e1)

De Alertnotification laat op alle pagina’s binnen de modern site een alert balk bovenin de pagina zien. De alert balk wordt geactiveerd en met content gevoed vanuit een lijst die gecreëerd is in de hub site. Door deze extension kan dus snel gecommuniceerd worden met alle gebruikers van modern sites onder een bepaalde hub. De lijst die hiervoor beschikbaar is op de hub site heet Alerts. Binnen deze lijst kunnen items aangemaakt worden waarbij aangegeven kan worden wat voor alert er moet komen en binnen welke datums de alert getoond moet worden.

CollabFooter (c0ab3b94-8609-40cf-861e-2a1759170b43)

De CollabFooter is een footer voor modern teamsites welke bedrijf breed gedefinieerde links toont vanuit de taxanomy service en ook persoonlijk links vanuit het gebruikers profiel laat zien. Met deze footer kan er eens stukje standaardisatie aan teamsites worden toegevoegd waardoor navigatie binnen de Office 365 portal duidelijker wordt.

DiscussNow(130b279d-a5d1-41b9-9fd1-4a274169b117)

DiscussNow activeert de mogelijkheid om vanuit een document bibliotheek een discussie in te plannen over een document waarmee er een afspraak wordt aangemaakt. In de document library komt er een actie bij, waarmee voor het geselecteerde lijstitem een agenda item wordt ingepland. LET OP! De location van deze extension moet in het script worden aangepast naar ‘ClientSideExtension.ListViewCommandSet.CommandBar’.

PortalFooter (b8eb4ec9-934a-4248-a15f-863d27f94f60)

De PortalFooter voegt net als de CollabFooter een footer toe maar dan aan een communication site. De PortalFooter is een footer die omhoog openschuift en dan bedrijf breed gedefinieerde links uit een ene lijst op de hub site laat en zien en persoonlijke links van de gebruiker laat zien. In Lijst PnP-PortalFooter-Links op de hub site kunnen de linkjes bedrijfsbrede links worden ingevuld.

Redirect (f5771a9e-283e-4525-a599-554e8b9e48c2)

Redirect is een ‘onzichtbare’ extension welke de gebruiker redirect naar een andere pagina als er een redirect is ingesteld. Het instellen van deze redirects gebeurd door het aanmaken van een item in de PnPRedirections lijst op de desbetreffende modern site. Bij het lijstitem wordt een sourceurl opgegeven als link van waar geredirect moet worden, een destination-url om aan te geven waarheen genavigeerd moet worden en of de redirect is geactiveerd of niet.

RSiteclassification (7f69d5cb-5aeb-4bc6-9f77-146aebfd9a8e)

De SiteClassification voegt een header toe waarin de site classification vanuit de site information wordt getoond. Hiermee kan bijvoorbeeld getoond worden dat een bepaalde site gevoelige informatie bevat.

tabPage (14a8a106-d508-44d0-8fa6-f2f9ed8f571d

TabPage voegt extra TabNavigatie toe aan de Header van elke pagina binnen de modern site. Dit kan gebruikt worden om extra navigatie toe te voegen en gebruiker specifieke navigatie mogelijk te maken.

SharePoint Framework WebParts

Naast de SharePoint Framework extensions bevat de modern starterkit ook zeventien WebParts die verschillende voorbeelden binnen de modern sites laten zien. Als de modern starterkit solution wordt toegevoegd aan de solution galerij van SharePoint zijn al deze WebParts beschikbaar via de bekende WebPart picker.

Het Banner WebPart voegt een banner toe met als achtergrond een plaatje waarover tekst wordt weergegeven. Als je op de banner klikt, opent de opgegeven link.

Followed sites toont alle gevolgde sites van de huidige gebruiker. De sites worden weergegeven als lijst en er kan bij het WebPart ingesteld worden hoeveel sites er getoond moeten worden en waarop gesorteerd wordt.

Het Links WebPart toont de linkjes die in de eigenschappen van het WebPart beheert kunnen worden. De linkjes kunnen worden toegevoegd en worden gegroepeerd.

LOB (Line of business) integration is een WebPart waarmee data vanuit een API in Azure kan worden getoond. Op deze manier kan data van buiten SharePoint toch relatief simpel in een WebPart op een modern pagina worden getoond. In het WebPart kan worden geconfigureerd naar welke Azure API het WebPart moet kijken voor de te tonen data.

Het peopledirectory WebPart gebruikt de people search binnen Office 365 om een op alfabet gesorteerde lijst van personen binnen de organisatie weer te geven.

De PersonalCalendar gebruikt de graph API om de aankomende kalender evenementen van de huidige gebruiker uit outlook op een modern pagina in SharePoint te laten zien. In het WebPart kan worden ingesteld hoeveel afspraken er worden getoond en hoe ver vooruit in de tijd het WebPart kijkt voor deze afspraken.

PersonalContacts haalt met gebruik van de graph API alle contacten uit Outlook op en toont deze in een modern pagina in SharePoint. Er kan worden ingesteld hoeveel contacten er getoond moeten worden.

Dit WebPart toont de meest recente e-mailberichten in Outlook van de huidige gebruiker. Er kan worden ingesteld hoeveel berichten er maximaal getoond moeten worden.

PersonalTasks toont de taken van de huidige gebruiker uit Outlook op een modern pagina in SharePoint. Er kan enkel worden ingesteld of afgeronde taken getoond moeten worden of niet.

Het RecentContacts webpart gebruikt de graph API om de contacten op te halen waar de huidige gebruiker contact mee heeft gehad. Dit kan zijn via mail, Teams of bijvoorbeeld omdat zij samen aan een document hebben gewerkt. Er kan in het WebPart alleen worden ingesteld hoeveel contacten er maximaal worden weergegeven.

RecentlyUsedDocuements gebruikt de graph API om de documenten op te halen waaraan de gebruiker recent heeft gewerkt. Dit kan zijn dat het document geopend of aangepast is. Er kan in de eigenschappen van het WebPart worden aangegeven hoeveel documenten er maximaal worden weergegeven.

Het RecentlyVisitedSites WebPart toont de recent bezochte sites van de huidige gebruiker. De informatie wordt opgehaald met de graph API en in een lijst getoond.

SIteInformation toont de site information van de huidige site. Dit WebPart is met name bedoeld voor teamsites waaraan extra metadata is gekoppeld. Deze metadata wordt dan ook in het WebPart getoond.

StockInformation toont de beurs data welke aangeleverd wordt door alpha advantage. Er is wel een account nodig voor alpha advantage om gebruik te kunnen maken van dit WebPart. In het WebPart kan worden ingesteld welke beurscode moet worden getoond in het WebPart.

In het Tiles WebPart kunnen in een collectie eigenschap van het WebPart tegels worden gedefinieerd waarbij een titel, een link, een beschrijving en een Office UI Fabric icoon worden opgegeven. Aan de hand van deze eigenschappen worden dan in het WebPart de tegels opgebouwd.

WeatherInformation gebruikt de API van Yahoo Weather om het weer op te halen van een bepaalde locatie. In de WebPart eigenschappen kan worden aangegeven voor welke locatie het weer moet worden getoond en of de temperatuur in Celsius of Fahrenheit moet worden getoond.

Het WorldTime WebPart toont de tijd voor ene bepaalde tijdzone. In de WebPart eigenschappen kan worden opgegeven welke titel er boven de klok wordt getoond en welke tijdzone moet worden gebruikt voor de tijd.

Zoals je hierboven hebt gelezen, zit er heel veel in de modern starterkit. Al deze zaken zijn dus vooral bedoeld als inspiratie en demonstratie van wat er allemaal kan met modern development binnen SharePoint. Dus neem deze zaken zeker als voorbeeld om jouw eigen oplossing verder op te bouwen. Ik denk dat de starterkit een mooi startpunt is voor verschillende soorten gebruikers en ontwikkelaars binnen Office 365 en dat de starterkit de komende jaren ook nog flink zal groeien met nieuwe en uitgebreidere onderdelen. Mocht je zelf met de starterkit aan de slag gaan en ergens niet uitkomen, neem dan vooral contact op met ShareValue, dan kunnen wij altijd kijken hoe wij jou verder kunnen helpen.

(Disclaimer: bovenstaande screenshots komen van https://aka.ms/sp-starter-kit)