Unleashing the Power of SharePoint Online with the SharePoint Framework

SharePoint Online is a cloud-based service that offers a wide range of options for customizing and extending its capabilities. There are several common scenarios in SharePoint Online where you might want to modify the platform to better meet the needs of your organization. These include:

• Customizing site branding and theming to match your organization's branding guidelines and provide a consistent user experience.
• Building custom forms and applications to automate business processes and improve efficiency.
• Creating custom workflows to automate document approval, routing and other business processes.
• Building custom web parts to display data and content in a specific way that meets your organization's needs.
• Adding custom extensions to enhance the user interface and add new functionality to SharePoint Online.
• By customizing SharePoint Online to meet your organization's specific needs, you can improve productivity, increase user adoption and ensure that SharePoint is a valuable tool for your business.

What are the tools your organization can use to customize SharePoint Online?

• SharePoint Framework (SPFx) - A modern, client-side platform for building and customizing SharePoint experiences. SPFx allows developers to create web parts and extensions using modern web development frameworks and tools. (This article will describe web parts and extensions for SPFx.)
• SharePoint Add-ins - A legacy platform for building and deploying custom solutions in SharePoint. SharePoint Add-ins (previously known as SharePoint Apps) can be deployed in the cloud or on-premises and provide a wide range of options for customizing SharePoint, including custom pages, workflows and forms. Nowadays SharePoint Add-ins are deprecated in favor of other development approaches, such as SharePoint Framework (SPFx) and Microsoft Teams apps.
• Microsoft Power Platform - A low-code platform for building custom applications and automating business processes. Power Apps can be integrated with SharePoint, allowing you to create custom forms and workflows that can be used with SharePoint data. Power Automate allows you to create custom workflows that can be triggered by events. Learn more about how to integrate Power Apps, Power Automate and Power BI with SharePoint Online. https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/sharepoint-scenario-intro

Power Platform is typically recommended for power users who want to make smaller changes or build easy process, while SharePoint Framework (SPFx) and SharePoint add-ins are more suitable for software developers with advanced development skills.

There are certain scenarios where you might choose one approach over the others based on your specific needs. For example, you might choose to use:

• SharePoint Framework (SPFx) to build custom web parts or extensions if you need to have more control over the user interface or require complex functionality that cannot be achieved with Power Platform or other approaches. Additionally, SPFx might be preferred if you are working with hybrid scenarios that require connectivity to on-premises data sources.
• Power Platform, on the other hand, might be more suitable for power users or business analysts who want to create simple customizations or automate business processes without the need for extensive coding skills. It is also a good option if you need to integrate SharePoint with other Microsoft 365 services, such as Power BI or Power Apps.
• SharePoint Add-ins might be preferred if you need to build a custom application that can be deployed outside of SharePoint, such as a standalone application that integrates with SharePoint data or functionality. However, as mentioned earlier, add-ins have several limitations and are now deprecated in favor of other development approaches.

Overall, the choice of approach will depend on your specific requirements and the skills and expertise of your development team.

The rest of this article will focus on SharePoint Framework (SPFX) and how to customize SharePoint with development skills if needed.

Recommended tools for your SharePoint Framework development environment

To develop with the SPFx, you will need to set up a development environment, which includes the following technologies:

• Node.js - A JavaScript runtime that allows you to run server-side scripts. Node.js is required to run the SPFx development tools.
• NPM - The Node Package Manager, which allows you to manage dependencies and download packages for your projects.
• Yeoman - A scaffolding tool that provides a generator for creating SPFx projects.
• TypeScript - A statically typed language that transcode to JavaScript. TypeScript is the recommended language for SPFx development.
• Visual Studio Code - A code editor that provides a great development experience for TypeScript and JavaScript.
• Git - A version control system for tracking changes to your code.

Should you build web parts or extensions?

There are two main types of customizations you can build with SPFx: web parts and extensions.

• Web parts are components that you can add to SharePoint pages to display content and functionality. Web parts can be simple or complex and can include anything from simple text or images to interactive forms or custom applications.

• Extensions are customizations that add functionality to the SharePoint user interface, such as custom actions, command sets and field customizers. Extensions allow you to modify the look and feel of SharePoint, as well as add new functionality to existing components.

The main difference between web parts and extensions is their purpose and the way they interact with SharePoint. Web parts are focused on displaying content and functionality on a page, whereas extensions are focused on modifying the SharePoint user interface.

This means that web parts are more flexible in terms of what they can display and how they can interact with the user, whereas extensions are more limited in their scope but can provide deeper integration with SharePoint.

In summary, if you want to display content or functionality on a SharePoint page, a web part is the way to go. If you want to modify the SharePoint user interface or add new functionality to existing components, an extension is the better choice. If, for example, your company wants to put their own branding on a page (logo, color/style), use an extension.

Web parts

A web part consists of a manifest file, a Typescript file, and a React component, which work together to define the visual appearance and behavior of the web part. Web parts needs to be installed and added in the page to be usable for the users.

In every organization it is possible to see some examples of the following web parts:

• Connected web parts - These web parts allow multiple web parts on a page to communicate with each other and share data. Not all web parts are suitable to be connected; they need to be implemented to receive and send information. For example, you might have two SharePoint lists connected to filter data based on specific values.
• Third-party web parts - These web parts are created by third-party vendors and are available for purchase or download. They often provide specific functionality or capabilities that are not available in the standard SharePoint web parts.
• Custom web parts - These web parts are custom-built to meet the specific needs of an organization. They can be built using the SharePoint Framework, or using other development technologies, such as ASP.NET.

Figure 4 shows some examples of third-party web parts.

Extensions

Extensions consist of a manifest file and a Typescript file, and can be developed and deployed using modern web development tools. It is possible to distinguish the following types:

• Application customizers - Allows you to customize the header, footer and other parts of a SharePoint page.
• Command sets - Allows you to add custom actions to the SharePoint ribbon or context menu.
• Field customizers - Allows you to customize the way fields are displayed in SharePoint lists and libraries.
• Form customizer - Allows customization of SharePoint forms, such as adding custom fields, validation and changing layout to improve user experience and streamline business processes.

Develop in-house or use open-source solutions

When deciding on SharePoint Framework (SPFx) development, organizations can choose to either develop solutions from scratch or reuse open-source solutions.

• Developing from scratch provides organizations with complete control over the solution and the ability to tailor it to meet specific needs. However, developing solutions from scratch can be a time-consuming and costly process, especially if the necessary expertise is not available in-house. Additionally, organizations will be responsible for performing all necessary testing and debugging, as well as maintaining the solution and fixing any bugs or issues that arise.
• Reusing open-source solutions, on the other hand, can be a cost-effective option as they are typically free to use. Have already been developed and tested, allowing organizations to get up and running quickly. However, open-source solutions may not meet specific needs and requirements, and significant modifications may be necessary and may not be supported or maintained by the development community.

In conclusion, the best option for an organization will be to find a balance and reuse open-source solutions as much it can but taking the ownership and control of the code to be responsible and support it later on.

Resources

There are many open-source solutions available for SharePoint Framework (SPFx) development and choosing the best one for your organization depends on your specific needs and requirements. Some popular open-source solutions for SPFx development include:

• PnP-JS-Core - A collection of libraries and tools that simplify complex scenarios in SPFx development. It includes a set of libraries for making REST API calls, working with the taxonomy, and handling navigation.
• PnP Reusable SPFx Controls - A collection of pre-built SPFx components, including a search box, result templates and refiners. These components are reusable and can be used to quickly add functionality to your SPFx solutions.
• @pnp/spfx-controls-react - A set of reusable controls for SPFx development, including a people picker, a taxonomy picker and a site picker. These controls are built using React and can be easily customized to meet your organization's needs.
• Office UI Fabric React - A collection of React-based components that implement the Microsoft design language. It includes a wide range of components, from simple buttons and icons to more complex controls like date pickers and people pickers.

These are just a few of the many open-source solutions available for SPFx development. It is important to thoroughly evaluate the options and choose the solution that best fits your organization's needs and requirements.