Skip to main content

SharePoint SPFX components basic details and understanding

Microsoft developed SharePoint, a web-based platform that enables businesses and organisations to share and manage documents and information. The SharePoint Framework (SPFx) is a set of client-side tools and components that can be used to construct unique solutions on top of SharePoint. The creation of a SharePoint SPFx component will be covered in this blog.

Let's address specific requirements before creating a SharePoint SPFx component. Install the necessary software on your computer:

  1. Version 10 or later of Node.js
  2. SharePoint Framework (SPFx) generator using Git
  3. Now that all the prerequisites have been deployed, let's start developing the SharePoint SPFx component.

Start by making a new SPFx project.

Making a new SPFx application is the initial step. Launch the command prompt and execute the following commands 

yo @microsoft/sharepoint


The Yeoman generator for the SharePoint Framework will be started using this command. You will be prompted to enter details about your project, including its name, description, and the SharePoint environment in which you intend to use the component.

Add a new web component in step two.

The project will get a new web portion in the second step. To add a new web part, enter the following command:

yo @microsoft/sharepoint:spfx
The SharePoint Framework Yeoman generator will be restarted by this command. This time, it will request some details from you regarding the web portion, like its name, description, and the framework you intend to use.

Step 3: Enhance the web part's functionality

We will provide the web portion functionality in the third phase. Add your custom code by opening the web part file (src/webparts/MyWebPart/MyWebPart.ts). To create your web portion, you can use any client-side framework like React, Angular, or Vue.js.

Build and test the component in step four.

We will construct and test the component in the fourth stage. To create the component, enter the following command:

gulp build
With this command, your code will be compiled and a distributable package (dist folder) created. This package can be installed in any SharePoint environment.

Run the following command to test the component:

gulp serve
Using this command, you can test your component on a local development server.

Deploy the component in Step 5

The component will be installed in a SharePoint environment as the last step. To package and deploy the component, provide the following command:

gulp bundle --ship && gulp package-solution --ship
In your SharePoint environment, this command will produce a package (sharepoint/solution/my-web-part.sppkg) that you may add to the App Catalogue. Any SharePoint site can use the component when the package has been posted.

Conclusion

We covered how to create a SharePoint SPFx component in this article. You can create unique solutions on top of SharePoint using the potent technology known as SharePoint SPFx. Utilising client-side technology, SPFx enables you to create web components, extensions, and other customizations. You can build your own unique SharePoint SPFx component and install it in your SharePoint environment by following the instructions in this blog.

Labels:

Comments

Post a Comment

Popular posts from this blog

How to deal with SharePoint 2010 exception "An exception occurred when trying to issue security token: The server was unable to process the request due to an internal error"

Scenario: You receive the below exception when you try to logon to a site that has been configured to use Claims Based Authentication with a custom membership provider using FBA credentials: Event ID from Event Log  - 8306 An exception occurred when trying to issue security token: The server was unable to process the request due to an internal error.  For more information about the error, either turn on IncludeExceptionDetailInFaults (either from ServiceBehaviorAttribute or from the <serviceDebug> configuration behavior) on the server in order to send the exception information back to the client, or turn on tracing as per the Microsoft .NET Framework 3.0 SDK documentation and inspect the server trace logs.. Explanation: This error started to appear in our QA environment which does not have Visual Studio installed. I have tried starting the service "Claims to Windows Token Service" but that did not help either. I have made sure that all config...
Post a Comment
Read more

Custom Form Base Login Web Part With Sharepoint 2010

In my  Last Post , I talked about creating a Form based authentication web application with Active Directory LDAP. After implementing that you have surely noticed that, when you try to sign in after creating a site collection from FBA web application, you get the following sign in page: Surely, it does not look pretty at all. So, you might want to change this default login page. In order to do this, first let us create an empty SharePoint project in Visual Studio 2010. After that, add an application page by right click-selecting “Add New Item” and you will get like the following window in Solution Explorer: Notice that, when you add any application page to your project, Visual Studio automatically creates a Layouts  folder. To keep things simple enough for your understanding, you may keep your application page under a folder where you might name it as same as your project like the figure above. Now, add a reference for  Microsoft.SharePoint.IdentityModel...
2 comments
Read more

Migrating from Skype for Business to Microsoft Teams: A Step-by-Step Guide

Do you still use Skype for Business to meet the communication and collaboration needs of your business? If so, now is the perfect time to think about switching to Microsoft Teams, a cutting-edge platform with cutting-edge capabilities and seamless connectivity with other Microsoft services. But if you're unfamiliar with the procedure, switching to a new platform can seem like a difficult task. I'll walk you through the process of switching from Skype for Business to Microsoft Teams in this article. Plan the migration in Step 1 You must make a plan before you start the relocation procedure. Set a deadline, make a list of all the Skype for Business capabilities you presently use, and choose whether to migrate gradually or all at once. Step 2: Set up your surroundings. Make sure your network and infrastructure fulfil Microsoft Teams' standards. Upgrades to your hardware, software, and licences might be necessary. Additionally, confirm that you have the right permissions to ca...
Post a Comment
Read more