Developing Your First WebParts For Sharepoint Online

Introduction

In this tutorial we will learn about deploying client side web parts of Sharepoint to Sharepoint Online. If you are new to Sharepoint this is for you. If you are just checking out something and are proficient then you can walk through to revise your concepts. Let us get to know what this is.

Overview

Sharepoint is a platform that can help you solve the biggest problems in your organization, from collaboration to communication. We can share documents. We can build sites. We can build Knowledge Management. It is a one-stop solution. We can use modern web technologies to extend it. It comes bundled with powerful tools. We can use Sharepoints' REST API to perform many tasks such as automation and interaction with Sharepoint data. We can use Powershell. This solution is widely adopted by Fortune 500 and is very reliable.

Pre-Requisites

npm and Node must be installed.
Sharepoint online tenant must be setup.
Visual Studio Code

Steps

Now, we need to install 2 node packages i.e. Yeoman and Gulp.

Execute the commands below:

npm install -g yo
npm install -g gulp

Next, we will setup Yeoman SharePoint Generator. We need to install this using npm.

npm install -g @microsoft/generator-sharepoint

Installation work is Completed. Now, let us start with Creating the Solution. Run the command below,

yo @microsoft/sharepoint

This will popup a series of questions that will help us create the client side solution as per our needs. For this tutorial we will use the configuration below.

Solution Name: BasicWebPart
Baseline packages: Sharepoint Online Only
Place the files: Create a subfolder
Name a webpart: WebPartOne
Webpart Description: First Web Part
Famework: No Javascript Framework

Our Solution Structure looks like this,

Now, we will set up a developer self-signed certificate using gulp. Execute the command below,

gulp trust-dev-cert

Note

At this Stage, we might run into issues. The issue might be caused by a difference in versioning. So for this tutorial we are using, node version 10.22.0, Gulp version 3.9.1, and CLI version 2.3 .

Now run,

gulp serve

We can also see WebPartOne that was created initially !!

On Sharepoint we can access the workbench at,https://{tenant-name}.sharepoint.com/_layouts/workbench.aspx

Our Development Environment is now completely ip and running. Now, we will create another webpart.

Open solution and run the command,

yo @microsoft/sharepoint

Again, this will ask us a few questions to help us configure the webpart. The questions and their answers are as shown below.

We can see webPartTwo auto generated and it’s available on the designer workbench.

Customizing the Webpart

Now, let us customize the Webpart we use for practical usage. We will use the functionality of sharepoint for customizations. Below is the reference .

this.context.pageContext	To get contextual information of webpart
Environment.type	import { Environment, EnvironmentType } from'@microsoft/sp-core-library'; To Get The Current Execution Environment, possible values: ● EnvironmentType.Local ● EnvironmentType.SharePoint ● EnvironmentType.ClassicSharePoint ● EnvironmentType.Test
https://{tenantprefix}.sharepoint.com/_api/web/lists.	The Sharepoint Api Endpoint to get all the lists. You can execute directly in the browser to check the response.

Now, let us update WebPartOne to show basic environment details.

We will create 2 functions,

protected get currentEnv(): string {
let env: string = "Not Set";
if (Environment.type == EnvironmentType.Local) {
env = "Local";
} else if (Environment.type == EnvironmentType.Test) {
env = "Test";
} else if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) {
env = "Prod";
}
return env;
}
protected get absoluteUrl(): string {
return this.context.pageContext.web.absoluteUrl;
}

Update the render function,

public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.webPartOne }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to ${escape(this.context.pageContext.web.title)}!</span>
<h2>The Current Environment is ${this.currentEnv} !!</h2>
<p>The List Api Url is ${this.absoluteUrl+'/_api/web/lists'} !</p>
</div>
</div>
</div>
</div>`;
}

In our Local Environment, the output looks like this,

Let us deploy our entire solution. In this process we will create a zip. Then we will upload this zip to our sharepoint portal for production use. This will minify our solution and we are ready to ship. Let us run the below commands.