SPFx PropertyPaneHorizontalRule: Organizing the Property Pane with Visual Separators Introduction As Web Parts become more sophisticated, their Property Panes often contain many configuration options. Without proper organization, users can quickly become overwhelmed by long lists of settings. The SharePoint Framework… Continue reading

SPFx PropertyPaneLink: Adding Helpful Links to the Property Pane Introduction As we continue exploring the native SharePoint Framework Property Pane controls, we now arrive at PropertyPaneLink. Unlike controls such as TextField, Dropdown, or Slider, this control does not collect information… Continue reading

SPFx PropertyPaneLabel: Displaying Informational Text in the Property Pane Introduction As we continue exploring the native SharePoint Framework Property Pane controls, we now arrive at one of the simplest controls available: PropertyPaneLabel. Unlike most controls we’ve studied so far, the… Continue reading

SPFx PropertyPaneButton: Executing Actions from the Property Pane Introduction Until now, every Property Pane control we have explored shared one common characteristic: they stored data inside the Web Part. Examples include: The PropertyPaneButton is different. Instead of storing information, it… Continue reading

SPFx PropertyPaneSlider: Working with Numeric Values in the Property Pane Introduction The SharePoint Framework provides several native controls for configuring Web Parts. One of the most useful when working with numeric values is the PropertyPaneSlider. protected onInit(): Promise<void> { this.properties.maxItems… Continue reading

SPFx PropertyPaneToggle: Enabling and Disabling Features with a Toggle Switch Introduction The SharePoint Framework provides several native controls for building intuitive Property Panes. One of the most common is the PropertyPaneToggle. Although it is similar to the PropertyPaneCheckbox, the Toggle… Continue reading

SPFx PropertyPaneChoiceGroup: Using Radio Buttons in the Property Pane Introduction this.properties.selectedTheme = “dark”; this.properties.selectedTheme = “dark”; this.properties.selectedTheme = “dark”; This makes it an excellent choice when the number of options is small. In this article, we’ll build a simple example… Continue reading

SPFx PropertyPaneDropdown: Creating Selection Lists in the Property Pane Introduction One of the most frequently used controls in the SharePoint Framework Property Pane is the PropertyPaneDropdown. Unlike a text field, a dropdown allows users to select one option from a… Continue reading

SPFx Property Pane TextField Multiline: Creating a Long Text Field Introduction In this article, we continue exploring the native SharePoint Framework Property Pane controls. This time, we will use PropertyPaneTextField again, but with one important difference: This turns the normal… Continue reading

SPFx Property Pane Checkbox: Showing and Hiding Content in a Web Part Introduction In this article, we will explore one of the simplest and most useful controls available in the SharePoint Framework Property Pane: the PropertyPaneCheckbox. The goal is simple:… Continue reading

Getting Started with the SharePoint Framework Property Pane Introduction One of the first concepts every SharePoint Framework (SPFx) developer should understand is the Property Pane. The Property Pane provides a simple and standardized way for users to configure a web… Continue reading

Understanding the PnP SPFx Progress Control — Deep Dive: Classes, Interfaces, and React.FC A companion piece to the “Progress from Scratch” series. This article breaks down the WP3 code in detail and explores a broader question: how do you take… Continue reading

Understanding the PnP SPFx Progress Control — Part 3: Real Actions with execute() “Progress from Scratch” series: in this article (3 of 5) we replace the manual “Next step” button from Part 2 with actions that implement a real execute()… Continue reading

Understanding the PnP SPFx Progress Control — Part 2: Managing State with currentActionIndex “Progress from Scratch” series: in this article (2 of 5) we move away from the hardcoded currentActionIndex used in Part 1 and turn it into real React… Continue reading

Understanding the PnP SPFx Progress Control — Part 1: The Fundamentals “Progress from Scratch” series: in this article (1 of 5) we’ll understand the core concept behind the Progress control from @pnp/spfx-controls-react, and build the first Web Part — fully… Continue reading

When developers start with the SharePoint Framework, the most common entry point is building web parts. Web parts are powerful, modular, and ideal for isolated UI components. Understanding SPFx Application Customizer in SharePoint Online Extending SharePoint Beyond Web Parts When… Continue reading

When building enterprise solutions in SharePoint Framework, long-running processes are common: triggering Power Automate flows importing files processing lists migrating content generating reports synchronizing data Building Real Progress Tracking in SPFx with PnP Progress, PnPjs, and Power Automate When building… Continue reading

Placeholder Control in SPFx (PnP React Controls) The Placeholder control is a simple but very useful UI helper from PnP when your web part still has no configuration. It provides a clean “empty state” experience, guiding the user to open… Continue reading

Using the PnP SPFx PeoplePicker Control in SharePoint Framework The PeoplePicker control from the PnP SPFx React Controls library is one of the most useful components when building SharePoint Framework solutions that need user selection. It simplifies searching and selecting… Continue reading

Pagination Control in SPFx with PnP React Controls The SharePoint Framework ecosystem often needs pagination when displaying long datasets such as lists, search results, audit logs, or external APIs. Instead of building pagination logic from scratch, the PnP SPFx React… Continue reading

Pagination Control in SPFx with PnP React Controls The SharePoint Framework ecosystem often needs pagination when displaying long datasets such as lists, search results, audit logs, or external APIs. Instead of building pagination logic from scratch, the PnP SPFx React… Continue reading

When working with SharePoint Online, SPFx solutions, and PnP PowerShell, it is now recommended to use your own Microsoft Entra ID application registration instead of relying on a shared/default application. PnP PowerShell requires a client ID for authentication scenarios, and… Continue reading

Customizing the Current Step Color in ProgressStepsIndicator (SPFx + PnP Controls) Customizing the Current Step Color in ProgressStepsIndicator (SPFx + PnP Controls) One of the biggest advantages of using the PnP SPFx React Controls library is speed. You get production-ready… Continue reading

One of the biggest strengths of the SharePoint Framework is theme inheritance. Your web part automatically respects: Fluent UI design tokens tenant branding site theme colors dark mode Microsoft Teams theme Customizing ProgressStepsIndicator Colors in SPFx Without Affecting the Entire… Continue reading

In enterprise environments, users rarely think in isolated actions. They think in processes. Every business operation usually follows a sequence: a training process follows certification milestones a document moves through approval stages a ticket evolves through support statuses an onboarding… Continue reading

One of the most overlooked areas in SharePoint Framework development is theme awareness. A web part can be technically correct, fully functional, and still feel visually “wrong” if it ignores the current SharePoint theme. Mastering Theme Handling in SPFx: Using… Continue reading

SPFx ModernTaxonomyPicker Control – Basic Example Introduction The ModernTaxonomyPicker control from @pnp/spfx-controls-react allows users to select one or more taxonomy terms from a SharePoint Term Set. This control is useful when an SPFx Web Part needs to work with managed… Continue reading

Building Interactive Maps in SPFx with the PnP Map Control When building SharePoint Framework (SPFx) solutions, location-based experiences are often underestimated. But maps are extremely useful in many business scenarios: The SharePoint Framework PnP React Controls library includes a ready-to-use… Continue reading

Using the LocationPicker Control in SPFx with PnP React Controls The LocationPicker control from the PnP SPFx React Controls library is a powerful component that allows users to search and select locations using the Microsoft location services integrated with SharePoint… Continue reading

This control allows you to render a user persona that, when clicked or hovered, opens the native Microsoft 365 profile card — the same one used throughout SharePoint, Teams, and Outlook. Building Rich User Profile Cards in SPFx with PnP… Continue reading

Building Reusable Context Menus in SharePoint Framework (SPFx) with Fluent UI Introduction In enterprise SharePoint solutions, users often need quick contextual actions directly attached to data rows. Examples include: Instead of navigating away or opening a separate panel, a Context… Continue reading

SPFx Basic ListView Kit: Reading SharePoint List Items with PnPjs and Rendering Them with PnP ListView When building SharePoint Framework solutions, one of the most common requirements is to read data from a SharePoint list and display it in a… Continue reading

When building SharePoint Framework solutions, it is very common to start with one web part, one React component, and one simple PnPjs configuration file. At the beginning, this feels natural. The web part needs SharePoint data, so we create a… Continue reading

PnPjs Configuration in SPFx — The Foundation Before Everything Else const sp = getSP(); const sp = getSP(); const sp = getSP(); const sp = getSP(); const sp = getSP(); Why PnPjs Config Matters SharePoint Framework gives you context. PnPjs… Continue reading

Building Modern SharePoint Solutions with SPFx, PnPjs and PnP ListView From Raw Data to Professional UI When building enterprise-grade SharePoint solutions with SPFx, one of the most common mistakes developers make is jumping directly into UI controls without understanding the… Continue reading

Getting Started with PnPjs in SPFx: Reading SharePoint Lists When building solutions with Microsoft 365 and SharePoint Framework (SPFx), one of the most important skills is learning how to communicate with SharePoint data efficiently. Before using advanced controls like PnP… Continue reading

The PnP SPFx ListView control provides a powerful and flexible way to render list data with filtering, selection, and icons — without building everything from scratch. Building a Simple ListView in SPFx using PnP Controls When developing SharePoint Framework (SPFx)… Continue reading

Here is a complete blog article in English, using your final code and covering all the key points from the official documentation. Using the PnP SPFx ListPicker in SharePoint Framework (Dev. Guide) https://your-tenant.sharepoint.com/sites/your-site/_layouts/15/workbench.aspx https://your-tenant.sharepoint.com/sites/your-site/_layouts/15/workbench.aspx In this article, we will walk… Continue reading

SPFx ListItemPicker Control: Selecting SharePoint List Items in a Web Part The ListItemPicker control from @pnp/spfx-controls-react is used in SharePoint Framework solutions when the user needs to search and select one or more items from an existing SharePoint list. It… Continue reading

How to Use PnP ListItemComments in SPFx and Fix the ServiceScope Error Introduction The ListItemComments control from the PnP SPFx React Controls library allows you to display and manage modern SharePoint Online item comments with minimal effort. However, when implementing… Continue reading