Previous

Next

Exercise - Interact with SPFx client-side web parts in modern sites

Completed

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 Site Page to create a new 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 instructions below assume you're using v1.17.1 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.

Test your knowledge

1.

What purpose does Yeoman serve in the build toolchain?

It's used to scaffold new projects after answering a few questions about the project.

It's used to run common build and development tasks, such as compiling the project and creating the deployment package.

It's the runtime used to run JavaScript-based applications in a cross-platform environment.

2.

What purpose does the Yeoman generator serve in the build toolchain?

It's executed by Yeoman and used to scaffold new projects after answering a few questions about the project.

It's used to run common build and development tasks, such as compiling the project and creating the deployment package.

It's the runtime used to run JavaScript-based applications in a cross-platform environment.

You must answer all questions before checking your work.

Continue