01-webpart

Creating a SharePoint Framework Client-Side Web Part

In this exercise you will create a SharePoint Framework client-side web part.

1. Open a command prompt and change to the folder where you want to create the project.

2. Run the SharePoint 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 baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)
   • Where do you want to place the files?: Use the current folder
   • Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: No
   • Which type of client-side component to create?: WebPart
   • What is your Web part name?: HelloWorld
   • What is your Web part description?: HelloWorld description
   • Which framework would you like to use?: No JavaScript framework

   After provisioning the folders required for the project, the generator will install all the dependency packages using NPM.

3. When NPM completes downloading all dependencies, run the project by executing the following command:

   gulp serve

4. The SharePoint Framework's gulp serve task will build the project, start a local web server and launch a browser open to the SharePoint Workbench:

   

5. Select the web part icon button to open the list of available web parts:

   

6. Select the HelloWorld web part:

   

7. Edit the web part's properties by selecting the pencil (edit) icon in the toolbar to the left of the web part:

   

8. 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:

   1

Update the web part code

1. Next, update the code in the render() method to add a button that responds to an event.

   1. If the local dev webserver is not running, start it by running gulp serve on the command line from the root folder of the project.

   2. Open the project folder in Visual Studio Code.

   3. Locate and open the file src/webparts/helloWorld/HelloWorldWebPart.ts.

   4. Within this file, locate the render() method. Locate the following line:

      <a href="https://aka.ms/spfx" class="${ styles.button }">

      ...and replace replace the URL with a simple hash symbol:

      <a href="#" class="${ styles.button }">

   5. Next, add the following code to the end of the render() method.

      This will wire up some code to the click event on the anchor tag and display an alert on the page.

      this.domElement.getElementsByClassName(`${ styles.button }`)[0]
        .addEventListener('click', (event: any) => {
          event.preventDefault();
          alert('Welcome to the SharePoint Framework!');
        });

2. Go back to the browser to test your changes. The browser should have refreshed the changes you made.

3. Click the Learn More button.

   Notice the button triggers a JavaScript alert displaying the message you added in the above code.

4. Close the browser and stop the local web server by pressing CTRL+C in the command prompt.

Update the web part's properties

Now make some changes to the web part's properties to give it a new name, description and icon.

1. The web part's metadata is found in it's manifest file.

   Locate and open the file src/webparts/helloWorld/HelloWorldWebPart.manifest.json.

2. In the section preconfiguredEntries, locate the following lines:

   "preconfiguredEntries": [{
     ...
     "title": { "default": "HelloWorld" },
     "description": { "default": "HelloWorld description" },
     "officeFabricIconFontName": "Page",
     ...
   }]

3. Change the web part's title and description to something different.

4. The web part's icon is the name of one of the icons listed in the Office UI Fabric, located here: https://developer.microsoft.com/fabric#/styles/icons. Pick one and update the officeFabricIconFontName property:

   "preconfiguredEntries": [{
     ...
     "title": { "default": "Hello SPFx" },
     "description": { "default": "My first SPFx web part" },
     "officeFabricIconFontName": "BirthdayCake",
     ...
   }]

5. Start the local web server using the provided gulp serve task:

   gulp serve

6. The SharePoint Framework's gulp serve task will build the project, start a local web server and launch a browser open to the SharePoint Workbench. This time when you hover the mouse over the web part in the toolbox, you will see the changes you applied to your web part:

   

7. Close the browser and stop the local web server by pressing CTRL+C in the command prompt.