Building Custom Web Parts Extensions with SharePoint Framework SPFx

SharePoint is a powerful platform used by organizations to create websites, manage content, and collaborate efficiently. If you're new to SharePoint and looking to customize your site beyond the standard features, the SharePoint Framework (SPFx) is your go-to tool. SPFx allows you to build custom web parts and extensions, enhancing the functionality and appearance of your SharePoint sites. Let's dive into the basics of SPFx in a straightforward and understandable way.

What is SharePoint Framework (SPFx)?

The SharePoint Framework (SPFx) is a modern development model for building customizations in SharePoint. It uses web technologies like TypeScript, JavaScript, HTML, and CSS and integrates well with modern development tools such as Node.js, npm, and gulp. SPFx is designed to work on both classic and modern SharePoint pages, providing a flexible and consistent development experience.

Getting Started with SPFx

To start developing with SPFx, you need a few tools installed on your machine:

Node.js and npm: Node.js is a JavaScript runtime, and npm is its package manager. They are essential for managing SPFx dependencies.
Yeoman and SharePoint Generator: Yeoman is a scaffolding tool that helps generate the basic structure of a project. The SharePoint Generator is a Yeoman generator specifically for SPFx projects.
Code Editor: Visual Studio Code is a popular choice for SPFx development due to its powerful features and extensions.

Setting Up Your Development Environment

1. Install Node.js and npm

Download and install the latest version of Node.js from Node Js Org. This will also install npm.

2. Install Yeoman and Gulp

Open your command prompt or terminal and run the following commands:

 npm install -g yo gulp

3. Install the SharePoint Generator

 npm install -g @microsoft/generator-sharepoint

4. Create a New SPFx Project

Navigate to the directory where you want to create your project and run:

yo @microsoft/sharepoint

Follow the prompts to set up your project. You'll be asked for details like your solution name, the target SharePoint environment, and the type of component you want to create (web part or extension).

Building a Custom Web Part

A web part is a reusable component that displays content or provides functionality on a SharePoint page. Here's how to create a simple "Hello World" web part:

1. Generate the Web Part

When setting up your project with the SharePoint Generator, choose to create a web part. Name it something like "HelloWorld."

2. Develop the Web Part

Open the project folder in Visual Studio Code. You'll see a src folder containing your web part files. Open HelloWorldWebPart.ts and modify the render method:

import { Version } from "@microsoft/sp-core-library";

import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";

import * as strings from "HelloWorldWebPartStrings";

export interface IHelloWorldWebPartProps {
  description: string;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = (
      <div>Hello, ${this.properties.description}!</div>
    );
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription,
          },

          groups: [
            {
              groupName: strings.BasicGroupName,

              groupFields: [
                PropertyPaneTextField("description", {
                  label: strings.DescriptionFieldLabel,
                }),
              ],
            },
          ],
        },
      ],
    };
  }
}

3. Run the local server to test your web part

gulp serve

This will open a local SharePoint workbench where you can see and test your web part.

4. Deploy the Web Part

After testing, package your solution for deployment:

 gulp bundle --ship

gulp package-solution --ship

Upload the generated .sppkg file from the sharepoint/solution folder to your SharePoint App Catalog. Once deployed, add your web part to a SharePoint page.

Building Extensions

Extensions allow you to customize the behavior and appearance of modern SharePoint pages. There are three types of extensions:

Application Customizers: Add scripts or HTML to the header or footer.
Field Customizers: Customize how fields are displayed in lists.
Command Sets: Add custom actions to list items.

Creating an extension follows a similar process to creating a web part but with different configuration settings. When running the SharePoint Generator, choose to create an extension and select the type of extension you need.

Conclusion

Using the SharePoint Framework, you can create powerful, customized web parts and extensions that enhance your SharePoint site. By leveraging modern web technologies and tools, SPFx development is accessible and efficient, even for those new to SharePoint. Start experimenting with SPFx today and unlock the full potential of your SharePoint environment!