SharePoint’s out-of-the-box web parts cover a lot of common business needs. However, you may find yourself needing additional functionality not available in the default components.
Custom web parts for SharePoint fill this gap by allowing developers to create reusable components with custom logic and UI.
Before diving into development, it’s important to understand best practices that ensure your custom web parts integrate smoothly into SharePoint. This article provides guidelines, examples, and resources to set your SharePoint web part project up for success.
Why Create Custom Web Parts?
Developing custom web parts allows you to:
- Add unique components not available out-of-the-box
- Tailor functionality specifically to business needs
- Create consistent branding and UI
- Reuse logic across multiple pages
- Build on existing data sources like lists and libraries
- Simplify complex processes into easy-to-use components
Well-designed custom web parts improve efficiency and the end-user experience.
Key Planning Considerations
“Failing to plan means planning to fail” – This age-old adage rings very true when undertaking a new SharePoint web part project. Proper planning upfront will pay dividends during development.
Gather Requirements
First and foremost, clearly identify the needs, goals, and use cases for the web part. Develop clear requirements around:
- Functionality: What should the component do? How should it work?
- Layout/UI: How should it be styled? What should it look like?
- Data: What data does it need to function? What data sources can be leveraged?
- Integration: How will it integrate with other parts of the platform?
- Governance: What compliance, security, and governance factors are necessary?
Validate requirements with key stakeholders before writing a single line of code.
Choose Framework
The SharePoint Framework (SPFx) is the preferred way to build custom web parts since its release in 2017.
SPFx utilizes modern standards like Node.js, TypeScript, and React to create components. The framework handles communication with SharePoint, packaging, deployment, and more.
Legacy approaches like SharePoint Add-ins or full trust code solutions have major drawbacks compared to SPFx:
| Consideration | SharePoint Add-ins | Full Trust Code | SharePoint Framework |
| Browser Support | IE8+ | IE8+ | Modern Evergreeen Browsers |
| Dev Language/Tools | CSOM, REST, js/css/html | Server Side Code (C#) | Node.js, React, TypeScript |
| Hosting Location | SharePoint App Catalog | GAC | CDN |
| Permission Level | App Context | Full Control | Custom permission level |
| Applicable SKUs | Online & On-prem | On-prem only | Online & On-prem |
Given the benefits, *SPFx is recommended in most cases for new custom web part projects*.
Following Best Practices
With planning done, it’s time to start development. Utilizing the following best practices helps create stable, scalable and governable custom web parts.
1. Validate Input
Sanitizing and validating any user input is a crucial security practice. All input passed to a web part should be validated before usage.
For example, validate that text input does not contain dangerous <script> tags before rendering or storing the value. Refer to OWASP’s input validation guidance.
2. Use TypeScript
SPFx utilizes TypeScript, which brings optional static typing to JavaScript. Interface definitions enforce contracts between different components.
Using TypeScript allows creating self documenting code with clear contracts. This improves long term maintainability and reduces bugs.
3. Follow React Best Practices
Since SPFx utilizes React under the hood, following standard React best practices improves quality:
- Break UI into reusable components with clear responsibilities
- Lifting state up to parent components where possible
- Avoiding direct DOM manipulation whenever possible
- Make components predictable by using props instead of internal states wherever possible
Adhering to React principles facilitates the creation robust and resilient UI components.
4. Use Office UI Fabric Components
The Office UI Fabric library contains reusable React components matching SharePoint and Office theming.
Leveraging Fabric components improves consistency since they match out-of-the-box SharePoint UI. It also reduces effort compared to creating new CSS styles.
5. Follow Accessibility Standards
Ensuring custom web parts meet accessibility standards improves the experience for users with disabilities.
Techniques like appropriate color contrast, keyboard navigation, and ARIA landmark roles are simple to implement but make a big difference.
Microsoft provides guidance on accessibility considerations specific to SharePoint Framework development.
Development Resources
The following resources provide valuable reference material when undertaking a custom web part project:
- Official Microsoft Documentation – In-depth SPFx guidance
- dev.office.com – Samples, API reference, tools
- spfx.video – Video tutorials on SharePoint Framework
- spread.video – Video tutorials on integrating React and SharePoint
- GitHub Repo Examples – Open source web part samples
The references above can get most projects kick started smoothly.
Summary
Developing custom functionality tailored to specific business needs is made possible in SharePoint via the creation of custom web parts.
Properly planning the approach, integrating with SharePoint appropriately, and following best practices ultimately determine the success or failure of custom web part projects.
Leveraging the SharePoint Framework and its associated tooling facilitates creation of stable, scalable solutions while avoiding many common pitfalls.
Hopefully, this overview gives you increased confidence to undertake that custom web part project you’ve been contemplating!
