'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Create Custom Web Parts in SharePoint Online
Question details
The user needs to develop custom web parts for SharePoint Online in Microsoft 365, but finds that Visual Studio only provides templates for SharePoint 2016 and 2019.
- Product
- SharePoint Online
- Device & OS
- not provided
- Scenario
- Setting up a development environment to build and deploy custom web parts specifically for a Microsoft 365 SharePoint Online tenant.
- Observed behavior
- Visual Studio templates default to on-premises server solutions (SharePoint 2019/2016), lacking direct options for modern SharePoint Online client-side web part deployment.
Ensure you have a Microsoft 365 developer tenant set up and Node.js installed on your computer, as modern SharePoint Online development relies on client-side tools rather than traditional Visual Studio server-side templates.
Build Client-Side Web Parts using the SharePoint Framework (SPFx)
Transition from traditional Visual Studio farm solutions to the SharePoint Framework (SPFx) to build modern client-side web parts for SharePoint Online.
SharePoint Online development has shifted away from server-side solutions (like those used in SharePoint 2016/2019) to client-side development. The SharePoint Framework (SPFx) is the recommended model for creating modern, responsive web parts in Microsoft 365 using web technologies and tools.
Install Node.js, a code editor like Visual Studio Code, and the Yeoman SharePoint generator via your command line interface.
Open your terminal, create a new project directory, and run the command 'yo @microsoft/sharepoint' to generate the boilerplate code for your new client-side web part.
Write your custom logic and UI using TypeScript and your preferred front-end framework, such as React, directly within the generated project structure.
Run 'gulp serve' in your terminal to preview and test your custom web part on the local SharePoint Workbench without needing to deploy it first.
Bundle your solution using 'gulp bundle --ship' and package it with 'gulp package-solution --ship'. Finally, upload the generated .sppkg file to your SharePoint Online App Catalog.
Seek Assistance on the Microsoft Q&A Platform
Connect with Microsoft specialists to resolve specific development roadblocks or deployment errors in SharePoint Online.
Discover WPS Office for Your Daily Documentation Needs
While building SharePoint web parts requires specialized Microsoft 365 developer tools, you don't have to rely on expensive subscriptions for your general office tasks. WPS Office is a highly compatible, lightweight, and free alternative, perfect for drafting project documentation, managing development spreadsheets, and designing presentations.
- 1. Download the software: Visit the official WPS Office website and download the free installer for your operating system.
- 2. Install WPS Office: Run the setup wizard to complete the quick installation process.
- 3. Open your Microsoft Office files: Launch WPS Office and directly open your existing .docx, .xlsx, or .pptx files with full formatting preservation.
Frequently Asked Questions
Why doesn't Visual Studio show SharePoint Online templates?
Traditional Visual Studio SharePoint templates are designed for server-side farm solutions used in on-premises versions like SharePoint 2016 and 2019. SharePoint Online relies on the modern, client-side SharePoint Framework (SPFx), which is typically scaffolded using command-line tools like Node.js and Yeoman rather than Visual Studio GUI templates.
What programming languages are required to build SharePoint Online web parts?
Modern SharePoint Online web parts built via the SharePoint Framework (SPFx) are primarily developed using TypeScript, HTML, and CSS. Developers also frequently utilize modern front-end JavaScript frameworks such as React.
Where can I test my custom SharePoint web part before deploying it?
You can test your custom web parts locally using the SharePoint Workbench, which is included in the SPFx development toolchain. It provides a local testing environment in your browser so you can preview changes instantly without uploading files to your live Microsoft 365 tenant.
