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

App 99 — Admin Center Microsoft Style with React, TypeScript, Vite, and Fluent UI Introduction As the ReactLab journey approaches its conclusion, App 99 introduces a realistic enterprise administration portal inspired by the Microsoft 365 Admin Center. This project consolidates… Continue reading

Technical Blog Article — App 98: Analytics System with React, TypeScript, Fluent UI, and Enterprise Dashboard Architecture Introduction As organizations become increasingly data-driven, analytics platforms have evolved into one of the most important categories of enterprise software. Executives, managers, analysts,… Continue reading

Building an Enterprise CRM System with React, TypeScript, Fluent UI, and Vite Introduction As applications grow beyond simple CRUD operations, they begin to resemble real business systems. One of the most common enterprise solutions is a Customer Relationship Management platform,… Continue reading

Building a Mini ERP Enterprise Application with React, TypeScript, Fluent UI, and Vite Introduction Enterprise Resource Planning (ERP) systems are among the most important software platforms used by organizations. They centralize business operations, improve visibility across departments, and provide a… Continue reading

Building an Enterprise Reservation Management System with React, TypeScript, Fluent UI, and Vite Introduction Modern organizations depend heavily on reservation and scheduling systems. Whether managing meeting rooms, company vehicles, training facilities, hotel resources, equipment, or shared workspaces, reservation platforms are… Continue reading

Building an Enterprise Corporate Catalog with React, TypeScript, Fluent UI, and Vite Introduction As React applications evolve from simple demonstrations into enterprise-grade systems, one recurring requirement appears across almost every organization: a centralized catalog. A corporate catalog can represent many… Continue reading