SharePoint framework web part

In my previous blog we saw how to setup the SharePoint framework development environment. Hope you have setup the DEV box. Now it’s time for us to create our first Helloworld web part. These web parts are client side components that run in the context of SharePoint page

  • Create a new project directory to store web part project files

md helloworld-webpart

  • Go to the project directory

cd helloworld-webpart

  • Create HelloWorld web part

yo @microsoft/sharepoint

This takes a minute so please wait you will get the below Welcome window to select what you prefer to create whether a Web part or an Extension. For now, I will go with selecting “Web part” use up and down arrow to select the option and click enter

In command window give the below answers in the prompt:

  • Solution Name
  • Target – Where it needs to be deployed SharePoint Online or On Premise
  • Folder – Select the which sub folder the solution code files needs to stored. The root folder we have already created at the above step (Create Folder)
  • Deployment Option – Whether to install this web part to all sites automatically or wanted to deploy explicitly to each sites. I have selected No for this question
  • Web part or Extension, followed by web part name and description
  • Framework – select “No JavaScript framework”
  • I was ok with my initial details for my new web part and hit enter. Yeoman generator starts the scaffolding process to create the solution and will install the required dependencies. Finally, the web part solution is ready with a “Congratulation!” message
  • We have created the web part but not able to see it on the screen how it looks like and not sure where to look for. Yes, SharePoint framework gives two options for us the view, debug web parts. Option 1 is through local workbench and Option 2 is SharePoint workbench. We will see Option 1 via local workbench.

Local workbench is nothing but a localhost site with port number 5432 running in our local development environment itself without a need of SharePoint installed in it. But this local host workbench needs a developer certificate installed for which we need to run the below code in command window.

gulp trust-dev-cert

  • Then run the below code, where gulp will setup the local workbench for us and opens it in the browser

gulp serve

Great and happy to see my first SharePoint framework is ready on screen.

How to open the web part code in editor?

As I have Visual Studio code installed in my machine it will open VS code as below

Little bit about class file and methods

HelloWorldWebPart.ts in the src\webparts\helloworld is the main file of our web part. Just opened the “HelloWorldWebPart.ts” file and could see its derived/extended from “BaseClientSideWebPart” class which gives the basic functionality of a Web part. This class provides the many parameters like displayMode, web part properties, context, instanceid, web part domElement etc…,

Now ready to customize, I am curious to see how I can add another text box named “comments” into this web part. Let’s hit the code now.

Where I need to start my customization? “.ts” file is the basic file we need to add controls that needs to be rendered in web part. So open “HelloworldWebPart.ts” file and add a simple string field named “comments” in the export interface section

Then go to “getPropertyPaneConfiguration” method and add the below line, this is to add the new “comments” field in the web part property panel

Here I am going to add this code inside the render section below the description field code, this is to see change in comments field immediately displayed in web part screen

<p class=”${ styles.description }”>${escape(this.properties.comments)}</p>

Save the file and in command window run “gulp serve” to launch the Workbench window

Fantastic, the updated web part now has the new “comments” field I added using the code and I can add content in it which is updated immediately in the web part