SPFx series: Je eerste webonderdeel maken

In de vorige posts van deze serie hebben we de basis gelegd voor het bouwen van oplossingen met het SharePoint Framework (SPFx). Van het opzetten van de ontwikkelomgeving tot het begrijpen van de essentiële tools en technologieën zoals npm, TypeScript, React, SCSS en Fluent UI: je bent nu klaar om te beginnen met het leukste deel — je eerste webonderdeel bouwen!

Webonderdelen zijn de bouwstenen van moderne SharePoint-ervaringen, waarmee ontwikkelaars aangepaste, herbruikbare componenten kunnen maken die de productiviteit en betrokkenheid van gebruikers verbeteren. In deze post begeleiden we je stap voor stap bij het maken van je allereerste SPFx-webonderdeel.

Aan de slag

Klaar om hands-on te gaan? Open je opdrachtprompt (of PowerShell, beide werken prima voor dit proces), navigeer naar de map waar je je SPFx-oplossing wilt bewaren, en laten we beginnen!

Zodra je in de juiste map bent, is het tijd om je SPFx-oplossing te scaffolden. Voer de volgende opdracht uit:

yo @microsoft/sharepoint

Je terminal zou er dan ongeveer zo uit moeten zien:

Wanneer je de Yeoman-generator uitvoert met de opdracht yo @microsoft/sharepoint, leidt deze je door een reeks vragen om je SPFx-project te configureren. Hieronder zie je een voorbeeld van de vragen die je zult tegenkomen en de antwoorden die voor deze tutorial worden gebruikt.

? What is your solution name? SPFxWebpart
? Which type of client-side component to create? WebPart
  Add new Web part to solution 'sp-fx-webpart'. (This is an informational message confirming your choice.)
? What is your Web part name? HelloWorld
? Which template would you like to use?
  Minimal
  No framework
❯ React

Zodra je alle vragen hebt beantwoord, begint de Yeoman-generator je SPFx-project op te zetten. Dit omvat het downloaden en installeren van alle benodigde Node.js-modules die nodig zijn voor je oplossing.

Let op: Dit proces kan een paar minuten duren, afhankelijk van je internetverbinding en systeemprestaties. Maak je geen zorgen als het even lijkt te hangen — laat het gewoon voltooien. Je ziet voortgangsberichten in je opdrachtprompt of PowerShell terwijl de afhankelijkheden worden geïnstalleerd.

Wanneer het installatieproces is voltooid, heb je een volledig geïnitialiseerde SPFx-oplossing en je terminal zou er ongeveer zo uit moeten zien:

Je oplossing openen

Nu je SPFx-oplossing is opgezet, is het tijd om deze te openen en de bestanden en mappen te verkennen. Je kunt elke IDE of code-editor naar keuze gebruiken, maar Visual Studio Code wordt sterk aanbevolen voor SPFx-ontwikkeling vanwege het uitgebreide extensie-ecosysteem en de naadloze integratie met TypeScript en React.

Als je Visual Studio Code gebruikt, kun je de oplossing direct vanuit de opdrachtregel openen door het volgende te typen:

code .

Deze opdracht start Visual Studio Code en laadt je project in de huidige map. Als je een andere editor gebruikt, open deze dan en navigeer naar de map waar je oplossing zich bevindt.

Zodra je project is geopend, zie je een goed georganiseerde structuur met mappen voor je bronbestanden, configuratie en afhankelijkheden. In de volgende blogpost zullen we de projectstructuur nader bekijken en uitleggen waar elk onderdeel voor dient.

Je SPFx-webonderdeel implementeren

Nu je SPFx-oplossing klaar is, laten we eens kijken hoe je deze kunt implementeren. Implementatie in SPFx kan worden gedaan in twee hoofdscenario’s:

• Testimplementatie: Voor lokaal testen of validatie in een ontwikkelomgeving.
• Productie-implementatie: Voor live gebruik in de SharePoint-omgeving van je organisatie.

Testimplementatie

Om je SPFx-webonderdeel te testen, kun je de SharePoint Workbench gebruiken, waarmee je een preview van je webonderdeel kunt bekijken en er mee kunt werken in een gesimuleerde omgeving. Dit doe je als volgt:

Het project lokaal serveren

Open je terminal in de projectmap en voer uit (Je terminal openen in Visual Studio Code kan met CTRL + %):

gulp serve

Je kunt de terminal onderaan de onderstaande schermafbeelding zien waar ik gulp serve heb getypt voordat ik op enter drukte.

Dit bouwt je project, start een lokale server en opent de SharePoint Workbench in je browser (als je werkt op een SharePoint Online-site).

Opmerking: De Workbench-URL ziet er doorgaans als volgt uit:

https://{tenantdomain}/_layouts/workbench.aspx

Vervang {tenantdomain} door je werkelijke SharePoint-tenantdomein.

Je webonderdeel testen

Voeg je webonderdeel toe vanuit de toolbox aan het Workbench-canvas. Je kunt de functionaliteit testen, aanpassingen maken en onmiddellijk wijzigingen zien terwijl je je code bijwerkt.

Je kunt je webonderdeel vinden onder de categorie Local wanneer je op het + teken klikt in je lokale workbench:

Als alles goed is gegaan, zou je je webonderdeel moeten zien zoals op de onderstaande afbeelding. Nu kun je beginnen met het maken van wijzigingen en deze lokaal te testen voordat je implementeert naar productie.

Productie-implementatie

Wanneer je webonderdeel klaar is voor gebruik in de praktijk, moet je het verpakken en implementeren in je SharePoint-omgeving. Volg deze stappen:

• De oplossing bouwen voor productie Voer de volgende opdracht uit om een productieklare bundle te maken:

gulp bundle --ship
gulp package-solution --ship

Deze opdrachten optimaliseren je code en maken een implementeerbaar pakket aan in de map sharepoint/solution.

• Het pakket uploaden naar de App Catalog

Navigeer naar je SharePoint App Catalog-site.

• Upload het .sppkg-bestand dat zich bevindt in de map sharepoint/solution.

• Bevestig de prompt om het webonderdeel beschikbaar te maken voor je sites.

• Het webonderdeel aan een site toevoegen

Na implementatie is het webonderdeel beschikbaar in de siteverzameling waar het is geïnstalleerd. Je kunt het aan pagina’s toevoegen via de webonderdeeltoolbox.

Met deze stappen ben je helemaal klaar om je SPFx-webonderdeel te implementeren en te gebruiken in zowel ontwikkelings- als productieomgevingen.