Post
Ask Question

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:
  1. npm install -g yo  
  2.   
  3. npm install -g gulp  
Next, we will setup Yeoman SharePoint Generator. We need to install this using npm.
  1. npm install -g @microsoft/generator-sharepoint  
Installation work is Completed. Now, let us start with Creating the Solution. Run the command below,
  1. 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,
  1. 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,
  1. 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,
  1. 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,
  1. protected get currentEnv(): string {  
  2.     let env: string = "Not Set";  
  3.     if (Environment.type == EnvironmentType.Local) {  
  4.         env = "Local";  
  5.     } else if (Environment.type == EnvironmentType.Test) {  
  6.         env = "Test";  
  7.     } else if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) {  
  8.         env = "Prod";  
  9.     }  
  10.     return env;  
  11. }  
  12. protected get absoluteUrl(): string {  
  13.     return this.context.pageContext.web.absoluteUrl;  
  14. }   
Update the render function,
  1. public render(): void {      
  2.    this.domElement.innerHTML = `      
  3.    <div class="${ styles.webPartOne }">      
  4.    <div class="${ styles.container }">      
  5.    <div class="${ styles.row }">      
  6.    <div class="${ styles.column }">      
  7.       <span class="${ styles.title }">Welcome to ${escape(this.context.pageContext.web.title)}!</span>      
  8.          <h2>The Current Environment is ${this.currentEnv} !!</h2>      
  9.          <p>The List Api Url is ${this.absoluteUrl+'/_api/web/lists'} !</p>      
  10.          </div>      
  11.       </div>      
  12.    </div>      
  13. </div>`;      
  14. }     
 
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.
  1. gulp build  
  2. gulp bundle --ship  
  3. gulp package-solution --ship  
Now, we can find the files as shown below,
 
 
To deploy our app we must have an app catalog site available.
 
In case you don’t have app catalog setup go to admin → Term Store → Create a new app catalog site → Ok → Fill The Details
 
Admin Url: https://{tenantname}-admin.sharepoint.com/
 
Upload App by navigating to App Catalog and we can see the result below,
 
 
Next, Go to gear icon → Add an app, You can also see this app in that area.
 
 
Now, when we create a new page, we can see WebPartOne and WebPartTwo. We will use webPartOne to get our new environment data.
 
After creating the new page we can see the final as shown below,
 
 
 
Now, we are done. Thanks for staying until  the end. Please comment for more improvements and share your ideas.


Similar Articles