Exercise - Interact with SPFx client-side web parts in modern sites
- 10 minutes
In this exercise, you'll add and interact with SharePoint Framework-based client-side web parts in a SharePoint Online modern site collection.
Open a browser and navigate to the developer site you created in the first exercise. If prompted, sign in using your Work or School credentials.
Select the Pages link in the left-hand Quick Launch navigation menu.
In the Pages library, select the New button from the toolbar and select Page to create a new page.
If prompted with a Welcome! panel, select I've done this before and then select Let's go.
If prompted with a Let's get started! panel, select Let's go.
On the Page templates panel, select From Microsoft and then select the Blank template from the Standard group. Finally, select Create page.
Set the name of the page to Getting Started.
Select the web part icon button to open the list of available web parts.
Select the web part Text.
When the web part is added to the page, add some text and use the rich-text formatting tools provided in the toolbar.
Select Save as draft to see the page as your users will see it.
Verify your developer environment is properly configured
Note
The following instructions assume you're using v1.20.0 of the SharePoint Framework Yeoman generator. For more information on the use of the SharePoint Framework Yeoman generator, see Yeoman generator for the SharePoint Framework
Use the tools installed in the second exercise to create a new SharePoint Framework component and test it using the SharePoint Online hosted workbench.
Open a command prompt and change to an empty folder where you want to store the files for the project.
Run the SharePoint Framework Yeoman generator by executing the following command:
yo @microsoft/sharepoint
Use the following to complete the prompt that is displayed:
- What is your solution name?: HelloWorld
- Which type of client-side component to create?: WebPart
- What is your Web part name?: HelloWorld
- Which template would you like to use?: No framework
After provisioning the folders required for the project, the generator will install all the dependency packages using npm.
When npm completes downloading all dependencies, install the developer certificate by executing the following command:
gulp trust-dev-cert
Run the project by executing the following command:
gulp serve --nobrowser
The SharePoint Framework's gulp serve task with the nobrowser switch will build the project and start a local web server.
Wait for the reload subtask to finish executing. At this point, the web part will be ready for testing.
Open a browser and navigate to the developer site you created in the first exercise. If prompted, sign in using your Work or School credentials. Append the following to the end of the site's URL: /_layouts/workbench.aspx. This is the SharePoint Online hosted workbench.
Select the web part icon button to open the list of available web parts and select the HelloWorld web part from the Local section.
Edit the web part's properties by selecting the pencil (edit) icon in the toolbar to the left of the web part.
In the property pane that opens, change the value of the Description Field. Notice how the web part updates as you make changes to the text.
Close the browser and stop the local web server by pressing CTRL+C in the command prompt.
Summary
In this exercise, you added and interacted with SharePoint Framework-based client-side web parts in a SharePoint Online modern site collection.