Learn SharePoint Framework development from our list of practical SPFx tutorials for SharePoint Online.
If you’ve ever worked on an SPFx project with a team, you’ve probably hit this problem: your serve.json has your personal SharePoint URL hardcoded, your colleague has a different tenant, and every time someone pulls the latest code from Git, something breaks. Sound familiar? That’s exactly what environment variables fix. And once you understand how they work … read more…
If you’ve been building SharePoint Framework solutions for a while, you already know Gulp. It’s been the backbone of every SPFx project since day one — running your builds, serving the workbench, packaging your .sppkg files. But that era is officially over. With SPFx v1.22, Microsoft replaced the Gulp-based toolchain with Heft — a config-driven build orchestrator from the Rush … read more…
If you’ve been wanting to build custom web parts or extensions for SharePoint, the very first thing you need to do is set up your SharePoint Framework (SPFx) development environment. With SPFx 1.22, things have changed. Microsoft has introduced a new build system called Heft, which replaces Gulp and handles the build process more structurally. I’m going … read more…
So you created an SPFx project, named it something like my-first-webpart in a rush, and now you’re staring at it thinking — this doesn’t look professional at all. Or maybe you downloaded a PnP sample from the community gallery, and now you need to rename it before deploying to production. In this tutorial, I will show you how … read more…
One of my clients recently faced an issue with the SPFx web part. Actually, their web part triggers emails when specific changes are made to the files they uploaded. To fix their problem, I have imported their SPFx solution package into my system to update the code. After updating the code, I need to build … read more…
If you’ve been building SharePoint Framework web parts for a while, you’ve probably hit a point where you need to show a modal popup — maybe to confirm a delete action, collect some input, or display detailed info without navigating away from the page. The good news? SPFx gives you multiple ways to do this. … read more…
This tutorial explains how to bind SharePoint list items to a Fluent UI React dropdown in an SPFx React web part using PnP JS, so that any new items added to the list automatically appear in the dropdown. By the end, you will have an SPFx client-side web part where the dropdown is dynamically populated … read more…
A few weeks before, I was working with a client on the SharePoint Online document management system. In this setup, guest users can also read, edit, and download files from the document library. Here, the client was required to track guest users who download any file from the document library by sending an email to … read more…
A few weeks ago, I created an SPFx web part for a USA Citizenship form that requires users to upload their identification documents along with personal details. Everything needs to be stored in one place and in a structured way, so I decided to use a SharePoint document library to hold both the files and … read more…
While working on a SharePoint Framework project for one of our clients, we were required to build a carousel web part to display company updates, internal communications, and related content. Here, the main requirement is that, for this web part, we need to allow users to choose which slides to display in the carousel. For … read more…
Have you ever had a requirement to display folders, subfolders, and nested subfolders from a SharePoint document library in a proper tree view format? Recently, one of our clients approached us with this exact need. They were migrating files and folders from a legacy file server to SharePoint Online and wanted the same hierarchical folder … read more…
If you’ve spent any real time building on Microsoft 365, you already know that SPFx is the backbone of modern SharePoint customization. I’ve seen developers with solid JavaScript skills stumble in SPFx interviews simply because they hadn’t connected the dots between the framework’s concepts and how they show up in practice. And I’ve seen the … read more…
A few weeks earlier, I worked on a Project Management app using SPFx for a client. For this SPFx web part, we use a SharePoint list as the data source to store project details, and we were required to display the latest project details on the app home page. Most of the time, I displayed … read more…
Recently, I needed to customize the default form of a SharePoint list. The requirement is that the choice values be displayed in the dropdown control with related icons, and some options be disabled for users. To achieve this, I created an SPFx Form Customizer extension and built the form using Fluent UI React controls, such … read more…
This free guide walks you through the 30 most-used Power Apps functions with real business examples, exact syntax, and results you can see.
Download a fully functional Power Apps Canvas App (with Power Automate): User Registration App