Automate Marketing Initiatives with Salesforce Marketing Cloud Learn More

Creating SPFx Web Parts: Key Tip

Sharepoint Framework

The SharePoint Framework (SPFx) is a web page and web part-based model. It offers complete assistance for client-aspect SharePoint development,  clean integration with SharePoint records,  and extending Microsoft groups. 

Further, we’ll learn how to make a web part with SharePoint Framework and how to create our first SPFx web part.

Setting Up SPFX Development Environment

1.node js 
2. Install any code editor that supports client-side development to create webpart: like Visual studio code
3. yeoman and gulp: npm install -g yo gulp 
4. Yeoman SharePoint generator: – npm install -g @microsoft/generator-sharepoint 

To get the node, gulp, and yeoman versions used: –  npm list -g –depth=0 

Screenshot 418 1024x193 1

Create the First Web Part

Web components are UI blocks that can be shown on a SharePoint page. 

By following the guidelines, let’s create a new  SPFx web part project.

  • Open the command prompt and
  • Create the folder where you want to create your webpart solution: md demoWebpart 
  • Enter in the folder: cd demoWebpart 

Further, to create a new solution on the present location, use the following command in the terminal yo @microsoft/sharepoint

After that generator will ask for the following user input: 

  • What is your solution name? (spfx-webpart): demowebpart 
  • Which type of client-side component to create?: webpart 
  • What is your Web part name?: demoWebpart 
  • Which template would you like to use: noframework 
Screenshot 420 1024x335 1

Following this procedure, your demo Web Part will be created. Further, we can test the Web Part on a workbench after creating the solution.

Use gulp serve to test the web part on the workbench.

To deploy the build: 
gulp bundle –ship 
gulp package-solution –ship 

A place for big ideas.

Reimagine organizational performance while delivering a delightful experience through optimized operations.

Web Part Using React Framework:

React components contain many functionalities and provides ability to receive properties. Components can transfer information among each other through properties. As a result, in this way you can control which view of web part will be display at any specific time slot.

For instance, the multiple views are built individually to make the programming and maintenance easier. Further, this also makes it easy for a group of developers to work on the same web part at the same time. Meanwhile, splitting the multiple views into independent React components, on the other hand, allows switching between them much easier. 

Creating Web Part Using React Framework:

yo @microsoft/sharepoint

What is your solution name? (spfx-webpart): webpartWithReact 


Which type of client-side component to create?: webpart 

What is your Web part name?: webpartWithReact 

Which template would you like to use: React

After this, your web part will be created.

In webpart, three files are created in src/webpart/component 

WebpartWithReactProp.ts: in this, we declare the properties 

WebpartWithReact.tsx: in this, we can use properties that are declared in WebpartWithReactProp.ts file 

WebpartWithReact.module.scss: write the CSS


Therefore, SharePoint web parts provide functionality for web developers to create an extremely efficient and user-friendly solution. 

Further, Web parts can display lists and libraries, data from external data sources, and content from other sites.


 To sum up, with versatility and inter-combinability SharePoint web part is an immensely powerful means to build up the content.

Top Stories

Enhancing GraphQL with Roles and Permissions
Enhancing GraphQL with Roles and Permissions
GraphQL has gained popularity due to its flexibility and efficiency in fetching data from the server. However, with great power comes great responsibility, especially when it comes to managing access to sensitive data. In this article, we'll explore how to implement roles and permissions in GraphQL APIs to ensure that
Exploring GraphQL with FastAPI A Practical Guide to begin with
Exploring GraphQL with FastAPI: A Practical Guide to begin with
GraphQL serves as a language for asking questions to APIs and as a tool for getting answers from existing data. It's like a translator that helps your application talk to databases and other systems. When you use GraphQL, you're like a detective asking for specific clues – you only get
Train tensorflow object detection model with custom data
Train Tensorflow Object Detection Model With Custom Data
In this article, we'll show you how to make your own tool that can recognize things in pictures. It's called an object detection model, and we'll use TensorFlow to teach it. We'll explain each step clearly, from gathering pictures, preparing data to telling the model what to look for in
Software Development Team
How to deploy chat completion model over EC2?
The Chat Completion model revolutionizes conversational experiences by proficiently generating responses derived from given contexts and inquiries. This innovative system harnesses the power of the Mistral-7B-Instruct-v0.2 model, renowned for its sophisticated natural language processing capabilities. The model can be accessed via Hugging Face at – on a dedicated GPU server g4dn.2xlarge,
How to deploy multilingual embedding model over EC2
How to deploy multilingual embedding model over EC2?
The multilingual embedding model represents a state-of-the-art solution designed to produce embeddings tailored explicitly for chat responses. By aligning paragraph embeddings, it ensures that the resulting replies are not only contextually relevant but also coherent. This is achieved through leveraging the advanced capabilities of the BAAI/bge-m3 model, widely recognized for
Tracking and Analyzing E commerce Performance with Odoo Analytics
Tracking and Analyzing E-commerce Performance with Odoo Analytics
Odoo is famous for its customizable nature. Businesses from around the world choose Odoo because of its scalability and modality. Regardless of the business size, Odoo can cater to the unique and diverse needs of any company. Odoo has proven its capacity and robust quality in terms of helping businesses


          Keep an eye on your inbox for the PDF, it's on its way!

          If you don't see it in your inbox, don't forget to give your junk folder a quick peek. Just in case.

              You have successfully subscribed to the newsletter

              There was an error while trying to send your request. Please try again.

              Zehntech will use the information you provide on this form to be in touch with you and to provide updates and marketing.