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

SPFx FieldPicker Control — A Developer Configuration Tool for Dynamic SharePoint Solutions When building solutions with SharePoint Framework (SPFx), one common challenge is avoiding hardcoded SharePoint field names. Lists change. Columns are renamed. New metadata appears. Internal names can be… Continue reading

SPFx + PnP React Controls: Working with FieldCollectionData When building solutions with the SharePoint Framework, one common challenge is handling structured collections of data inside a form or component. Many business scenarios require users to add multiple rows of information… Continue reading

The SharePoint Framework (SPFx) is the modern development model for building client-side solutions in SharePoint Online. SPFx allows developers to create responsive and reusable web parts using technologies such as React, TypeScript, and Fluent UI. SPFx and PnP React Controls:… Continue reading

SPFx DynamicForm Control with PnP React Controls The DynamicForm control from the PnP SPFx React Controls library is one of the most powerful components available for SharePoint Framework development. Instead of manually creating React forms, field validation, save logic, lookup… Continue reading

SPFx DynamicForm Control with PnP React Controls The DynamicForm control from the PnP SPFx React Controls library is one of the most powerful components available for SharePoint Framework development. Instead of manually creating React forms, field validation, save logic, lookup… Continue reading

SPFx DateTimePicker Control (WP09) Introduction Modern SharePoint solutions often require users to enter both dates and times in a consistent and user-friendly way. Typical business scenarios include scheduling meetings, defining publishing dates, creating project milestones, registering service requests, and managing… Continue reading

WP08 – DragDropFiles Control Demo for SharePoint Framework Introduction What is SharePoint Framework (SPFx)? The SharePoint Framework (SPFx) is Microsoft’s modern development model for extending SharePoint Online and Microsoft 365. It allows developers to build client-side solutions using modern web… Continue reading

WP07 – Dashboard Control in SharePoint Framework (SPFx) Introduction to SharePoint Framework (SPFx) SharePoint Framework (SPFx) is the modern development model for Microsoft SharePoint Online and Microsoft 365. It enables developers to create client-side web parts and extensions using technologies… Continue reading

WP06 – Using ChartControl in SharePoint Framework (SPFx) Introduction The SharePoint Framework (SPFx) is Microsoft’s modern development platform for creating client-side solutions for SharePoint Online and Microsoft 365. SPFx enables developers to build responsive, secure, and maintainable web parts using… Continue reading

Building a SharePoint Framework (SPFx) Carousel Web Part with PnP React Controls Introduction SharePoint Framework (SPFx) is the modern development model for extending SharePoint Online and Microsoft 365. Introduced to replace older technologies such as Farm Solutions and SharePoint Add-ins,… Continue reading

Below is the complete English article section that highlights the real-world issue encountered during the implementation of WP04 AnimatedDialog. WP04 – AnimatedDialog in SharePoint Framework (SPFx) Using PnP SPFx React Controls Introduction SharePoint Framework (SPFx) is the modern development model… Continue reading

PnP SPFx React Controls – Complete Control Catalog and Documentation Reference Introduction The PnP SPFx React Controls library is one of the most important community-driven projects available for SharePoint Framework (SPFx) development. It provides a large collection of reusable React… Continue reading

SPFx WP03 – AdaptiveCardHost Control with PnP React Controls Introduction to SharePoint Framework (SPFx) SharePoint Framework (SPFx) is the modern extensibility model for SharePoint Online and Microsoft 365. Introduced by Microsoft to replace legacy development approaches such as Full Trust… Continue reading

WP02 – Building an Accordion Web Part with PnP SPFx React Controls Introduction The SharePoint Framework (SPFx) provides a modern development model for building client-side solutions in Microsoft 365. While React offers flexibility for creating user interfaces, many common components… Continue reading

The SharePoint Framework (SPFx) ecosystem provides a large collection of reusable controls through the PnP SPFx React Controls library. These controls accelerate development by providing ready-to-use components that follow Microsoft 365 design principles and accessibility guidelines. WP01 – AccessibleAccordion with… Continue reading

Building a Football Score Prediction Simulator with C#, LINQ and the Poisson Distribution One of the most interesting aspects of software development is applying mathematics and statistics to solve real-world problems. Recently, I developed a small C# console application to… Continue reading

Construindo um Simulador de Futebol com C#, LINQ e Distribuição de Poisson Recentemente desenvolvi uma aplicação Console em C# com o objetivo de estudar estatística aplicada ao futebol utilizando a Distribuição de Poisson através da biblioteca Math.NET Numerics. Embora seja… Continue reading

The PnP Controls Lab is a long-term educational and technical project designed to explore, validate, document, and demonstrate every control available in the PnP SPFx React Controls library. PnP Controls Lab – Building 100 SharePoint Framework Applications with PnP React… Continue reading

App 100 — React Enterprise Final Platform with React, TypeScript, Vite, and Fluent UI Introduction App 100 is the final application of the ReactLab journey. It represents the complete consolidation of everything learned across the previous 99 React applications: component… Continue reading