Written by

Arut Selvan

Share

  

Category

see all categories
intranet as a service

Create SPFx Web parts or Extensions using Visual Studio 2017

SPFX is the developmental framework provided by Microsoft to create, build and install apps on SharePoint or Office 365. Using SPFx  Initially SPFx web parts and Extensions are created using commands like “yo@microsoft/sharepoint”, now it is possible to create them using Visual Studio. We got cool visual studio extensions to perform it.

Prerequisites:

1. Set up your O365 tenant using this link
2. Set up your development environment by following the instructions from this link.
3. Download and install the VS extension from this link.

 Get Started:

After installing VSIX, Open Visual Studio then File -> New -> Project.  You could see the below window. Choose  “SPFx Project” which comes under Office/Sharepoint->SharePoint Framework section. Provide your solution name and related details and click on Ok.

SPFx Project

In the next window, select the developmental framework like react, knockout. I chose none to continue without any framework. Choose the Environment type, either it can be spo (SharePoint online) or on-prem. Then, provide your component related details like component type(webpart or extension), name and description. “Skip Feature Deployment” checkbox is to configure the app to deploy it globally inside a tenant so that it will be available for all the site collections. I am unchecking it since I will can install it manually. I am checking this “Do not automatically install dependencies (skip ‘npm install’ command)” because it consumes lot of time and sometimes VS can be crashed while performing this operation. Then Click on “Generate”.

Skip Feature Deployment

The project will be created in the matter of seconds. Then open the command prompt and point the location to the project location run the “npm install” command to install the node packages separately.

npm install

After successful installation of node modules, just click on F5 from your visual studio to run the application. It will open the workbench in a new browser window.

Leaderboard_CDR

You can able to add the web part in the workbench and work on it.

SharePoint Workbench-1

I am customizing the webpart.ts like below from the project to display the username.

export default class MyWebpartWebPart extends BaseClientSideWebPart<IMyWebpartWebPartProps> {

  private user: any;

   protected onInit(): Promise<void> {

    this.user = this.context.pageContext.user.displayName;

     return super.onInit();

  }

   public render(): void {

    this.domElement.innerHTML = `

      <div class="${ styles.myWebpart}">

        <div class="${ styles.container}">

          <div class="${ styles.row}">

            <div class="${ styles.column}">

              <span class="${ styles.title}">Welcome ${this.user}!</span>

             

            </div>

          </div>

        </div>

      </div>`;

  }

 

  protected get dataVersion(): Version {

    return Version.parse('1.0');

  }

 

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField('description', {

                  label: strings.DescriptionFieldLabel

                })

              ]

            }

          ]

        }

      ]

    };

  }

}

Now you can see the changes on screen. Since we are running it in localhost workbench, it doesn’t take the SharePoint context and so it is displaying as below.

User 1

You can able to run the same inside your SharePoint environment by using the below url

https://<your_sharepoint_site_collection_url>/_layouts/workbench.aspx[

After opening the page, add the same web part and see the difference.

Create usergroup

Hope this article is helpful. Though Visual Studio is heavy, it is very much faster than previous versions like 2015. So let's start building our SPFx apps using Visual Studio IDE instead of using Command Prompts.

Arut Selvan

Written by Arut Selvan

A technology enthusiast keen in learning & exploring new Microsoft technologies. Predominantly working on Microsoft 365, SharePoint & Azure. Currently working with "Hubfly - A unified digital workplace" as a Product Engineer, Arut brings in the new flavors of the technology to the product. He ensures we are always on the edge in our technology stack. He brings in innovation to the product with his out of the box thinking. He is also a Microsoft certified professional.