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

Handling attachments in SharePoint lists is a common requirement in enterprise solutions. Instead of building custom upload and download logic, developers can leverage the PnP SPFx React Controls library, which provides ready-to-use components that simplify development. Working with ListItemAttachments in… Continue reading

The ImagePicker enables users to select, upload, preview, and remove images directly within a web part. When combined with React Functional Components (React.FC) and hooks, it becomes even more efficient and maintainable. Here is a detailed, blog-ready article in English… Continue reading

Here is a new article focused specifically on presenting and using the IFramePanel control in a modern React.FC approach: Displaying an IFramePanel in SPFx Using React Functional Components Introduction The IFramePanel control from the PnP SPFx React Controls library provides… Continue reading

In this article, we will walk through the process of converting a class-style implementation using this.state into a clean React Functional Component (React.FC) using hooks like useState. We will also explain the key changes required to make the component work… Continue reading

SPFx PnP IFrameDialog Control Official documentation: https://pnp.github.io/sp-dev-fx-controls-react/controls/IFrameDialog/ Introduction The IFrameDialog control from PnP SPFx React Controls allows an SPFx web part to open external or internal web content inside a Fluent UI dialog using an iframe. According to the official… Continue reading

Property Pane in SPFx: Developer Guide When building a SharePoint Framework (SPFx) web part, one of the most important concepts to master is the Property Pane. The Property Pane is the configuration panel that allows users to customize a web… Continue reading

SPFx IconPicker with PnP React Controls The SharePoint Framework ecosystem allows developers to build reusable client-side web parts for modern SharePoint. In many enterprise scenarios, users or administrators need to select icons dynamically — for navigation, dashboards, cards, menus, or… Continue reading

SPFx HoverReactionsBar Control Official documentation: https://pnp.github.io/sp-dev-fx-controls-react/controls/HoverReactionsBar/ The HoverReactionsBar control from PnP SPFx React Controls allows users to select an emoji from a reaction bar or emoji picker. It is useful for scenarios such as reactions to comments, cards, news posts,… Continue reading

HoverReactionsBar in SPFx: Adding Interactive Emoji Reactions to Your Web Part The SharePoint Framework ecosystem allows developers to create rich, modern, and highly interactive experiences inside Microsoft SharePoint. One of the strengths of SPFx is its ability to integrate reusable… Continue reading

The GridLayout control from PnP SPFx React Controls is used to render a responsive grid inside a SharePoint Framework web part. It is useful when a web part needs to display a collection of visual items such as news, documents,… Continue reading

SPFx Calendar Control with PnP React Controls The SharePoint Framework (SPFx) is the modern development model for building client-side web parts in Microsoft SharePoint Online. It allows developers to build responsive, reusable, and interactive components using React, TypeScript, and Fluent… Continue reading

The FolderPicker control from PnP SPFx React Controls allows users to browse SharePoint folders and select one folder from a document library structure. According to the official documentation, this control can explore and select folders, and it can also allow… Continue reading

The FolderExplorer control from @pnp/spfx-controls-react is useful when an SPFx web part needs to let users navigate through folders inside a SharePoint document library. SPFx PnP React Controls — FolderExplorer Control Official documentation: https://pnp.github.io/sp-dev-fx-controls-react/controls/FolderExplorer/ Introduction The FolderExplorer control from @pnp/spfx-controls-react… Continue reading

SPFx FilterBar Control with PnP React Controls The SharePoint Framework ecosystem often needs a way to show active filters to users, especially when building search-driven or data-driven web parts. This is where the FilterBar control from PnP React Controls becomes… Continue reading

SPFx FilePicker Control with PnP React Controls The FilePicker control from the PnP SPFx React Controls library is one of the most practical controls for real-world SharePoint Framework solutions. It allows users to browse and select files from multiple Microsoft… Continue reading