Forem: Guido Zambarda

VSCode extension – Node version pal

Guido Zambarda — Tue, 05 May 2026 09:00:00 +0000

Introduction

If you’re working across multiple Node.js projects, you already know the struggle:

One project requires Node 16
Another depends on Node 18
A legacy service still runs on Node 14
And somehow your terminal is on the wrong version… again

That’s exactly why Node Version Pal was created.

Node Version Pal is a lightweight Visual Studio Code extension that detects, displays, and helps you switch your project’s Node.js version — directly from the VSCode status bar.

No more guessing. No more terminal checks. No more “why is this build failing?”

What Problem Does It Solve?

Modern JavaScript development often means juggling multiple repositories — each with its own required Node version defined (hopefully) in:

.nvmrc
.node-version

Forgetting to switch versions can lead to:

Build errors
Runtime incompatibilities
Dependency installation issues
Subtle bugs that waste hours

Node Version Pal makes your Node version visible, accurate, and manageable — right inside your editor.

Key Features

Automatic Version Detection

Open a project containing a .nvmrc or .node-version file and Node Version Pal instantly detects the required Node version — no setup required.

It works quietly in the background and keeps your workflow uninterrupted.

Node Version in the Status Bar

Your project’s required Node version appears directly in the VS Code status bar.

That means:

You always know which version your project expects
You can instantly spot mismatches
No need to open a terminal to check node -v

Clear. Simple. Reliable.

One-Click Version Switching

Click the status bar item to switch Node versions using your installed version manager (like nvm or fnm).

No need to type commands.
No need to remember version numbers.
Just click and switch.

Auto-Refresh When You Change Branches

Switch Git branches?
Pull changes?
Update your .nvmrc file?

Node Version Pal automatically refreshes and updates the displayed version — so you’re never out of sync.

Multi-Workspace Support

Working with multi-root workspaces or microservices?

Each workspace folder is scanned independently, so every project shows the correct Node version for its context.

Perfect for:

Monorepos
Microservices
Full-stack setups

Create Version Files Easily

Don’t have a .nvmrc yet?

Node Version Pal allows you to quickly create one directly from VS Code — helping you standardize your project setup and improve team consistency.

Why Developers Love It

Node Version Pal is:

Lightweight
Non-intrusive
Zero-configuration
Focused on developer productivity

It doesn’t try to replace your version manager.
It enhances your workflow by making Node version awareness effortless.

If you work with Node daily, this extension becomes one of those tools you don’t want to live without.

How to Install

Installing Node Version Pal takes less than a minute:

Open Visual Studio Code
Go to the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
Search for Node Version Pal
Click Install

Or install directly from the Visual Studio Code Marketplace:

https://marketplace.visualstudio.com/items?itemName=guidozam.vscode-node-version-pal

Final Thoughts

Small tools can make a huge difference in daily development.

Node Version Pal removes friction, prevents mistakes, and keeps your environment aligned with your project — all without leaving your editor.

If you’re juggling Node versions across projects, give it a try today.

Your future self (and your builds) will thank you.

Hope this helps!

Cannot turn on Power Automate flow: [REDACTED] error

Guido Zambarda — Wed, 29 Apr 2026 09:00:00 +0000

Introduction

Lately I ran into an issue with a Power Automate flow. After exporting a solution with a specific flow to a different environment, I am facing an issue where the flow, which was running fine in the original environment, is turned off. When I try to turn on the flow I get the following error message:

[REDACTED]

Which, I think everyone can agree, is not a very useful message.

Due to the very obscure meaning of the message, I’ve tried opening the flow and saving it, this triggered the following error message:

Request to XRM API failed with error: ‘Message: Flow client error returned with status code “BadRequest” and details “InvalidOpenApiFlow”. Code: 0x80060467 InnerError: ‘.

Which can point to some direction, but it’s not a very helpful message…and, in all of this, the flow checker gives no errors!

The solution

At least in my case, scrolling through the actions, I discovered that an action was in error.

Following you can see the error in the old designer, which was not visible until I’ve expanded the action:

", "error": { "message": "The selected file doesn't exist, please select a valid file and drive." }, "source": "wordonlinebusiness-we.azconn-we-003.p.azurewebsites.net" }"/>

The dynamic operation request to API ‘wordonlinebusiness’ operation ‘GetFileSchema’ failed with status code ‘NotFound’. This may indicate invalid input parameters. Error response: { “status”: 404, “message”: “The selected file doesn’t exist, please select a valid file and drive. clientRequestId: ”, “error”: { “message”: “The selected file doesn’t exist, please select a valid file and drive.” }, “source”: “wordonlinebusiness-we.azconn-we-003.p.azurewebsites.net” }

The same error is present switching to the new designer.

At least in the new designer the error was already visible without having to expand the action content.

So, what was the solution?

It simply was to update the selected document in the Word Business action , simply as that!

Hope this helps!

Enable SharePoint AI on your tenant (preview)

Guido Zambarda — Wed, 22 Apr 2026 09:00:00 +0000

Introduction

This feature is in preview at the time of writing

Artificial Intelligence is no longer a future capability in SharePoint—it’s already here, and it’s deeply integrated with the modern Microsoft 365 experience. With the introduction of Knowledge Agents, organisations can unlock contextual insights, automate knowledge discovery, and dramatically improve how users interact with content.

In this post, we’ll walk through how to enable SharePoint AI on your tenant and what prerequisites you need.

Before covering the required steps, let me briefly cover what SharePoint AI enables on SPO. It introduces intelligent agents that can understand and interact with your content. These agents can:

Answer questions based on SharePoint Online sites and documents
Summarize pages and libraries
Assist users with contextual knowledge retrieval
Allow AI assisted document library column generation

Each SharePoint Online site even comes with a ready-made agent scoped to its content, and you can also build custom agents tailored to specific business needs!

Prerequisites

To enable SharePoint AI on your tenant there are three main prerequisites:

Microsoft 365 Copilot license: users must have an active license to use AI capabilities in SharePoint Online.
At the moment, the tenant must be opted-in in order to enable the AI capabilities, by default this is disabled.
Enable Anthropic as AI provider.

Steps

Starting from a newly created SharePoint Online site, you can see that there is nothing regarding AI in here:

To enable AI features, you will first need to opt-in as currently the option is turned off on all tenants. To do that you will need a SharePoint Administrator or a Global Administrator to execute a PowerShell command.

Opt-in to AI in SharePoint Online

Note: use Windows PowerShell for the following operations

In order to opt-in you will first need to install or update the module: Microsoft.Online.SharePoint.PowerShell

After installation, you can use the module to perform the opt-in for all sites or for specific sites.

To execute the following commands, you will need to first connect to the SharePoint admin URL:


Connect-SPOService https://yourtenant-admin.sharepoint.com

Enable for all sites

To opt-in for all sites you have in your SharePoint tenant you can execute the following command:


Set-SPOTenant -KnowledgeAgentScope AllSites

After executing the above command, you can check the configuration of the tenant running the following command:


Get-SPOTenant | Select-Object KnowledgeAgentScope

Enable for selected sites

To enable SharePoint AI for a selected site, you can set the KnowledgeAgentScope to include the sites from a list:


Set-SPOTenant -KnowledgeAgentScope IncludeSelectedSites

To specify the sites to be included you can set the KnowledgeAgentSelectedSitesList parameter, in the following code example I am adding two different sites to the list of sites that will opt-in to SharePoint AI:


Set-SPOTenant -KnowledgeAgentSelectedSitesList @("https://yourtenant.sharepoint.com/sites/AwesomeSite", "https://yourtenant.sharepoint.com/sites/sampleSite02")

If you already executed the above command and need to append another site to the list of sites, you can set the KnowledgeAgentSelectedSitesListOperation parameter with the Append operation:


Set-SPOTenant -KnowledgeAgentSelectedSitesList @("https://yourtenant.sharepoint.com/sites/NewSite") -KnowledgeAgentSelectedSitesListOperation Append

Again, if you need to check that the values are correctly updated, you can execute the following command:


Get-SPOTenant | Select-Object KnowledgeAgentScope, KnowledgeAgentSelectedSitesList

Enable Anthropic AI provider

As last step, you need to enable Anthropic as Microsoft subprocessor.

To do that, navigate to the Microsoft 365 admin center , open the Copilot section on the left, and then select Connectors , from here select the AI providers operating as Microsoft subprocessors :

A panel will open on the right side of the page, where you can select Anthropic as the available subprocessor:

Enjoy!

After performing the above tasks, if you return to the site (or sites) for which you have opted-in, you will see a new icon in the bottom right corner of the page:

From the new button you can perform multiple operations, to have an idea here is the menu and the various options available:

I won’t cover all the options in this blog post as it is focused only on how to enable SharePoint AI.

Conclusions

If you want to know more about how to get started with AI in SharePoint, have a look at the official documentation here.

AI in SharePoint is a very nice usage of AI, it allows various features that are quite powerful for users, if you want to know more about the capabilities have a look here.

Hope this helps!

VSCode extension – SPFx version pal

Guido Zambarda — Tue, 21 Apr 2026 09:00:00 +0000

A Tiny VS Code Extension with Big SPFx Value

Working with SharePoint Framework (SPFx) projects can sometimes feel like juggling versions — especially if you’re maintaining multiple projects with different SPFx dependencies. What version of SPFx was that project using again? That’s exactly where SPFx Version Pal comes in.

What Is SPFx Version Pal?

SPFx Version Pal is a lightweight VS Code extension that displays the detected SharePoint Framework version of your current project right in the VS Code status bar.

While small in scope, it solves a very practical problem for SPFx developers — quickly identifying the framework version without digging through code or configuration files by hand.

Key Features

The power of SPFx Version Pal lies in its simplicity and unobtrusive integration with VS Code:

Automatic SPFx Project DetectionIt scans the workspace for SPFx-related dependencies in package.json — including packages like @microsoft/sp-core-library, @microsoft/sp-webpart-base, and others — to determine the SPFx version.
Version Display in the Status BarOnce detected, the SPFx version is shown in the status bar — so you always know which version you’re working on at a glance.
Auto-Refresh on ChangesThe display updates automatically when relevant parts of package.json change, keeping the version indicator in sync.
Manual Refresh OptionYou can click the status bar item or run a command from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to manually refresh the version detection.

How It Works

Under the hood, SPFx Version Pal does a simple – but effective – thing:

Scan the workspace for package.json files.
Look for SPFx dependency packages that identify an SPFx project.
Extract the version of the detected SPFx packages.
Display that version in the VS Code status bar — always visible and always up to date as you work.

This approach means there’s no extra configuration needed — just open a project and let the extension do its thing.

Why It Matters

In real-world SPFx development, it’s incredibly common to:

Switch between projects targeted at different SPFx versions.
Join a team mid-project and need quick context.
Tackle legacy code that hasn’t been updated in a while.

Without SPFx Version Pal, you’d typically have to open and read the package.json, search for SPFx packages, and interpret version strings manually. That might only take a minute — but minutes add up, and context matters when you’re deep in development mode. SPFx Version Pal removes that friction by keeping version info right where you look most.

Who Should Use It?

This extension is perfect for:

SharePoint developers working with SPFx projects in VS Code.
Teams managing multiple SPFx solutions over time.

Installation & Requirements

To use SPFx Version Pal:

You need Visual Studio Code.
Open any SPFx project with a valid package.json.
The extension will automatically detect and display the version in the status bar after installation.

Installation is straightforward — just install it from the VSCode extension marketplace, you can see it from the link: SPFx version pal.

Final Thoughts

SPFx Version Pal is a simple but smart productivity boost — a little helper that gives you constant visibility into your SPFx version context without having to hunt through files. It’s a great example of how focused tooling can make a developer’s routine workflow smoother and less error-prone.

Hope this helps!

Discover the ComboBoxListItemPicker control from the PnP reusable React controls

Guido Zambarda — Wed, 08 Apr 2026 09:00:00 +0000

Introduction

Continuing our exploration of the PnP React controls, today I want to talk about the ComboBoxListItemPicker control, a powerful component that combines the functionality of a combobox with SharePoint list item selection capabilities.

If you’re interested, you can find the code of this sample here.

The ComboBoxListItemPicker control allows users to select one or more items from a SharePoint list using a combobox interface. The control provides a list of options, suggestions based on user input and supports various configuration options for filtering, ordering, and customization.

This control is particularly useful when you need to:

Allow users to select items from large SharePoint lists
Filter list items based on specific criteria
Support both single and multiple item selection
Integrate seamlessly with SharePoint Online environments

Visual appearance

The ComboBoxListItemPicker control offers a wide range of configuration options. Let me showcase some of the various features and functionalities available.

Basic Single Selection

Starting with the minimal configuration, this is how the control appears with basic single-item selection:

The control displays a clean combobox interface to select the item(s) needed.

Once selected an item(s) it will be displayed in the control as follows:

Multiple Selection Mode

When configured for multiple selections, the control allows users to select several items from the list:

Selected items are displayed inside the control, and users can easily remove them by deselecting those from the dropdown options.

Filtered Results

The control supports OData filtering to show only specific items that match certain criteria:

In this example, the filter is applied to show only items with the word “different” in the title, demonstrating how you can programmatically restrict the available options based on your requirements.

Default selection

It’s possible to set programmatically the selected items so the user will find those already selected in the UI:

Ordered and Limited Results

You can configure the control to show a limited number of items and order them according to specific criteria:

This example shows only the top 3 items ordered alphabetically in a descending order, which is useful for large lists where you want to show only the most relevant options.

Disabled State

The control also supports a disabled state for scenarios where interaction should not be allowed:

Show me the code

Prerequisites

To use the PnP React controls, first you need to install the package:


npm install @pnp/spfx-controls-react --save --save-exact

After the installation of the package, you can proceed with the following instructions to use the ComboBoxListItemPicker component.

To use the control, you first need to import it:


import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';

Now that you understand how to install and import the component, let’s explore the different usage scenarios.

Basic Single Selection

The simplest implementation allows single item selection from a SharePoint list:


<ComboBoxListItemPicker
  listId={listId}
  columnInternalName='Title'
  keyColumnInternalName='ID'
  onSelectedItem={this._onSelectionChanged}
  webUrl={context.pageContext.web.absoluteUrl}
  spHttpClient={context.spHttpClient as any}
  label={strings.SelectAnItem}
  suggestionsHeaderText={strings.AvailableItems}
  noResultsFoundText={strings.NoItemsFound}
/>

The required fields in order to instantiate the control are the following:

webUrl: current web URL, retrievable from the web part context.
listId: the ID of the list from which the control will retrieve the items to display. In this sample, the selection of the listId value is done using the property pane with the PropertyFieldListPicker (more here).
columnInternalName: the name of the column used to display the options in the dropdown menu.
spHttpClient: the SharePoint HTTP client, retrievable from the web part context.
onSelectedItem: a function to define what happens when an item is selected.

In the sample, the onSelectedItem property, is set to a function that handles the selection change:


private _onSelectionChanged = (items: any[]): void => {
  console.log('Selected items:', items);
  this.setState({ selectedItems: items });
};

Multiple Selection Mode

It’s possible to enable multiple selection by setting the multiSelect property to true:


multiSelect={true}

The full code of this instance is something like the following:


<ComboBoxListItemPicker
  listId={listId}
  columnInternalName='Title'
  keyColumnInternalName='ID'
  onSelectedItem={this._onMultipleSelectionChanged}
  webUrl={context.pageContext.web.absoluteUrl}
  spHttpClient={context.spHttpClient as any}
  multiSelect={true}
  label={strings.SelectMultipleItems}
  suggestionsHeaderText={strings.ChooseItemsMultiple}
  noResultsFoundText={strings.NoMatchingItemsFound}
/>

With OData Filter

It’s possible to apply filters to show only specific items using OData syntax. In the sample you can see that it’s using the following filter:


substringof('different', Title)

In short, it will load all the items that have the string “different” in the title of the item.

The complete code for this control instance is the following:


<ComboBoxListItemPicker
  listId={listId}
  columnInternalName='Title'
  keyColumnInternalName='ID'
  filter="substringof('different', Title)"
  onSelectedItem={this._onFilteredSelectionChanged}
  webUrl={context.pageContext.web.absoluteUrl}
  spHttpClient={context.spHttpClient as any}
  label={strings.SelectItemsContaining}
  suggestionsHeaderText={strings.AvailableItemsFiltered}
  noResultsFoundText={strings.NoItemsFoundFilter}
/>

With Default Selection

You can provide pre-selected items using the defaultSelectedItems property, for example:


defaultSelectedItems={[{ ID: 1 }, { ID: 3 }]}

With the above code the component will be instantiated with two items selected, one with ID 1 and one with ID 3 which, in my sample, are the real IDs of the list item I have in my target SharePoint list.


<ComboBoxListItemPicker
  listId={listId}
  columnInternalName='Title'
  keyColumnInternalName='ID'
  defaultSelectedItems={[{ ID: 1 }, { ID: 3 }]}
  onSelectedItem={this._onDefaultSelectionChanged}
  webUrl={context.pageContext.web.absoluteUrl}
  spHttpClient={context.spHttpClient as any}
  multiSelect={true}
  label={strings.PreSelectedItemsExample}
  suggestionsHeaderText={strings.ItemsPreSelected}
  noResultsFoundText={strings.NoItemsAvailable}
/>

The structure of the array to be set in the defaultSelectedItems property can contain objects with only a property identifying the selected items.

With Item Limit and Ordering

The control offers the ability to limit the number of displayed items and control their order. Here is the full control declaration:


<ComboBoxListItemPicker
  listId={listId}
  columnInternalName='Title'
  keyColumnInternalName='ID'
  itemLimit={3}
  orderBy='Title desc'
  onSelectedItem={this._onLimitedSelectionChanged}
  webUrl={context.pageContext.web.absoluteUrl}
  spHttpClient={context.spHttpClient as any}
  label={strings.LimitedSelection}
  suggestionsHeaderText={strings.TopItemsAZ}
  noResultsFoundText={strings.NoMatchingItemsTop5}
/>

Among the properties of the control there is the property itemLimit, this property will specify how many items the control will display. In the above code the item limit is set to 3.

To sort the items you can use the orderBy property. This property will accept an OData sorting string, in the sample it’s using:


Title desc

And, of course, that’s ordering the items by title in a descending fashion.

Disabled State

It’s possible to disable the control when interaction is not allowed:


<ComboBoxListItemPicker
  listId={listId}
  columnInternalName='Title'
  keyColumnInternalName='ID'
  disabled={true}
  onSelectedItem={this._onDisabledSelectionChanged}
  webUrl={context.pageContext.web.absoluteUrl}
  spHttpClient={context.spHttpClient as any}
  label={strings.DisabledPicker}
  suggestionsHeaderText={strings.PickerDisabled}
  noResultsFoundText={strings.PickerIsDisabled}
/>

In short, it’s enough to set the disabled property to true to automatically apply a different styling and disable the possibility to interact with the control instance:


disabled={true}

Conclusions

In my opinion, the ComboBoxListItemPicker control is an excellent solution for scenarios requiring SharePoint list item selection with a modern, user-friendly interface. It effectively combines the familiarity of a combobox with powerful SharePoint integration capabilities. The control’s support for filtering, ordering, and multiple selection modes makes it suitable for a wide range of applications.

If you’re interested in learning more, you can check the official documentation here.

Hope this helps!

VSCode extension – Invisifolder

Guido Zambarda — Tue, 07 Apr 2026 09:00:00 +0000

Clean Up Your VS Code Explorer with One Click

If you’re like most developers, your Visual Studio Code workspace can quickly become cluttered with generated folders, build artifacts, and other directories you don’t need to see all the time. Whether it’s node_modules, dist, build, or dozens of other outputs, navigating around these can be a distraction — especially in large projects.

That’s where Invisifolder comes in: a lightweight, focused VSCode extension that helps you hide and manage folders right from the editor. It lets you reclaim your Explorer view and focus on the files that matter most.

What Invisifolder Does

Invisifolder is a free extension for Visual Studio Code that helps you hide selected folders from the Explorer view to keep your workspace clean and distraction-free. Instead of manually editing your settings.json or adding complex patterns to your files.exclude, this extension gives you an intuitive interface to hide/unhide folders as you need.

With Invisifolder you get:

Hide & Unhide Folders Per Workspace Simply choose which folders you want out of sight — and restore them just as easily.
Explorer Context Menu Integration Right-click a folder in the Explorer and choose Hide Folder without touching configuration files.
Command Palette Access Use Invisifolder: Hide Folder or Invisifolder: Unhide Folder from the Command Palette (Ctrl/Cmd + Shift + P) to manage visibility quickly.
Status Bar Management A status bar item lets you see how many folders are hidden and manage them via a quick menu.
Automatic Settings Integration Invisifolder stores your hidden folders in your workspace’s .vscode/settings.json under "invisifolder.hiddenFolders" and maps them to files.exclude patterns. That means even if someone else opens the project without Invisifolder installed , the folders stay hidden thanks to the files.exclude settings.

How to Use Invisifolder

Using Invisifolder is straightforward and intuitive:

Hide a Folder
- Right-click a folder in the Explorer and select Invisifolder: Hide Folder,
- OR open the Command Palette and run Invisifolder: Hide Folder.
Unhide a Folder
- Open the Command Palette and run Invisifolder: Unhide Folder,
- Or manage hidden entries from the status bar.
Manage Your Hidden List
- Click the Invisifolder status bar icon to see all currently hidden folders and unhide one with a click.

Behind the scenes, Invisifolder keeps everything configured in your workspace settings, giving you a persistent and team-friendly way to control what shows up in the Explorer.

Why It Matters

VSCode natively supports hiding files and folders using files.exclude , but managing that manually can be tedious — especially when you want to toggle visibility frequently or per workspace. Invisifolder makes this process:

Fast & interactive — No digging through JSON.
Context-aware — Just right-click where you already are.
Workspace-scoped — Different projects can hide different folders without global effects.

For developers who switch between front-end, back-end, library, and mono-repo projects, that flexibility is a game changer when managing clutter.

Who Should Use Invisifolder

This extension is ideal for:

Developers working with generated output folders (e.g., dist, out, build)
Anyone maintaining codebases with lots of auxiliary or tooling directories
Teams who want per-workspace organization without global settings pollution
VS Code users who prefer GUI controls to manual config editing

If you find yourself constantly editing files.exclude or wish Explorer stayed focused on the files that matter, Invisifolder is a small tool with a big usability impact.

Installation

You can install Invisifolder directly from the Visual Studio Code Marketplace or the Extensions view in VS Code:

Open VS Code
Go to Extensions (Ctrl/Cmd + Shift + X)
Search for Invisifolder
Click Install

Or if you prefer, here is link to VSCode marketplace: Invisifolder.

Once installed, you’re ready to start cleaning up your workspace with just a few clicks.

Final Thoughts

Invisifolder might be a small utility in the grand ecosystem of VSCode extensions, but it solves a very real, everyday problem in my opinion: workspace clutter and distraction. With its intuitive controls and seamless integration into Explorer, it makes folder management faster, cleaner, and less error-prone.

If you crave a neat, efficient workspace — this extension is worth a try!

Hope this helps!

Discover the ListItemComment control from the PnP reusable React controls

Guido Zambarda — Wed, 25 Mar 2026 10:00:00 +0000

Introduction

Proceeding with the appointments with the PnP React controls today I want to talk about the ListItemComment control.

If you’re interested you can find the code of this sample here.

The ListItemComment control is used to add and display comments for a SharePoint list item.

Visual appearance

Let’s start with the visual appearance of the sample solution.

As you can see the solution first asks for a SharePoint list in the current site.

Once the list has been selected, the list items are loaded and available for selection.

When an item is selected, the ListitemComment control will list the available comments and allow the user to insert a new comment. For example, following you can see a list item without any comment.

If the list item has comments those are displayed in a chronological order and allow the user to perform a couple of operations such as:

liking the comment
deleting the comment

Now let’s see how to use the control.

Show me the code

Prerequisites

To use the PnP React controls, first you need to install the package:


npm install @pnp/spfx-controls-react --save --save-exact

After the installation of the package you can proceed with the following instructions to use the ListItemComment.

To use the control you first need to import it and that can be done as following:


import { ListItemComments } from '@pnp/spfx-controls-react/lib/ListItemComments';

Actual implementation

In the sample solution, a ListPicker and a ListItemPicker controls are used to select the actual list item to be used from the ListItemComments control.

Once that we have the list ID and the list item ID we can use the ListItemComments as follows:


<ListItemComments
  listId={selectedListId!}
  itemId={selectedItemId}
  label={strings.ListItemCommentsLabel}
  serviceScope={context.serviceScope as any}
  />

NB: The context used for retrieving the serviceScope is the web part one.

Conclusions

The ListItemComments control proves to be a powerful yet incredibly simple solution for integrating comment functionality into your applications. With minimal setup and a clean use, developers can quickly add robust comment handling without reinventing the wheel. It empowers developers to implement and manage comments in a flash, freeing up time to focus on building richer, more engaging user experiences.

Hope this helps!

Using top actions to configure web parts in a SPFx solution

Guido Zambarda — Wed, 11 Mar 2026 10:00:00 +0000

Introduction

With this blog post I want to cover what the top actions are and how to use those in your solution.

The top actions of a web part are the commands available when you select a web part, to better understand what we are talking about, have a look at the following screenshot:

What you might not know is that it’s possible to add some customisation. The actual supported customisations are:

a button.
a drop down control.

In this sample I’ll be demonstrating how to use those two options.

Visual appearance

Starting with the visual appearance of the sample web part, this is how the web part renders in edit mode:

Let’s zoom a little bit more on the editing toolbar:

Aside of the default buttons, you can see that there is a separator and, on the right side of it, the custom controls:

A like button, used to demonstrate how the control works. In this sample it will be a simple like/unlike button.
A drop down control, used to specify the logging level for the web part.

After clicking on the like button, the icon will be updated:

Let me zoom in a little bit to better show you:

Now, let’s have a quick look at the drop down:

In the previous screenshot you can see that there are four different logging levels:

Off: the logging is turned off and will not display anything in the browser console.
Warning: the logging is turned on and will only display warnings in the browser console.
Error: the logging is turned on and will only display errors in the browser console.
Verbose: the logging is turned on and will display all the logging messages.

Show me the code

Now let’s cover the code to use the top actions.

Prerequisite

The first thing, in order to use the top actions, is to install the required package:

npm install @microsoft/sp-top-actions

Once added the package, it’s possible to import the required types in the web part component:

import {
  ITopActions,
  TopActionsFieldType
} from '@microsoft/sp-top-actions';

The types are used to define the required getTopActionsConfiguration method. The ITopActions is the return type of the new method, the other type is used to define the type of the action button, but we will cover that in a short while.

The method has the following structure:

public getTopActionsConfiguration = (): ITopActions | undefined => {

  return {
    topActions: [
      // list of actions
    ],
    onExecute(actionName, updatedValue) {
      // code to handle execution of action button
    },
  };
}

Top action structure

Before diving into the objects, let’s talk a little bit about the structure of the top actions.

All the objects used to define a top action must have the following properties:

type: is the type of the control to be displayed. This is defined using the TopActionsFieldType. As of now, the supported types are:
- Button
- Dropdown
targetProperty: this is the name of the top action.
properties: the specific properties for the selected type. Each type has a different available set of properties.

There are also some common properties that are not required. Those properties are:

title: the tooltip to be displayed for the control, this is also used as value for the arial-label property.
shouldFocus: it’s a flag to specify if the control should be focused or not.

Sample code

In the getTopActionsConfiguration, inside the topActions property, you can configure the buttons that you want to be displayed.

In the following snippet it’s defined the structure of the “Like” button:

{
  type: TopActionsFieldType.Button,
  title: strings.TopActions.ButtonTitle,
  targetProperty: "button",
  properties: {
    text: strings.TopActions.ButtonText,
    icon: properties.like === true ? "LikeSolid" : "Like",
  }
}

In the following one, instead of the previous one, it’s defined the dropdown top action:

{
  type: TopActionsFieldType.Dropdown,
  title: strings.TopActions.DropdownTitle,
  targetProperty: "dropdown",
  properties: {
    options: [
      {
        key: LoggingEnum.Off,
        text: strings.TopActions.DropdownOptionOff,
        checked: true
      },
      {
        key: LoggingEnum.Warning,
        text: strings.TopActions.DropdownOptionWarning,
      },
      {
        key: LoggingEnum.Error,
        text: strings.TopActions.DropdownOptionError,
      },
      {
        key: LoggingEnum.Verbose,
        text: strings.TopActions.DropdownOptionVerbose,
      },
    ],
  },
}

The question you should be asking now it’s: ok, but how do I handle the button clicks or the dropdown option selection?

This is achieved using the onExecute method inside the getTopActionsConfigurationmethod of the web part.

Here is a snippet of how the onExecute method can be defined:

onExecute(actionName, updatedValue) {
  switch (actionName) {
    case "button":
      properties.like = !properties.like;
      break;
    case "dropdown":
      properties.logging = updatedValue as LoggingEnum;
      break;
  }
}

The method is shared across all the top actions defined. The actionName argument contains the value of the targetProperty. The updatedValue will have different values based on the type of control:

Button control: the updatedValue will be a boolean value set to true when the button is clicked.
Dropdown control: contains the key value of the selected option.

Conclusions

If you’re interested in knowing more you can have a look at the official documentation here.

If you’re interested in having a look at the complete sample code you can find it here.

Top actions are an extremely useful addition to SharePoint Framework web parts, I think that many developers might be interested in using those controls and enabling different ways of interaction with the custom web parts.

Hope this helps!

Storing App Configuration in OneDrive with Microsoft Graph using an SPFx Web Part

Guido Zambarda — Wed, 18 Feb 2026 10:00:00 +0000

Introduction

When building a SharePoint Framework web part, choosing where to store configuration can be surprisingly complex. SharePoint lists require provisioning, tenant properties can be restrictive, and hardcoded values aren’t maintainable nor a good practice. A cleaner alternative is to use Microsoft Graph—specifically the /me/drive/special/approot endpoint—to store configuration files in a secure, app-scoped folder within the current user’s OneDrive.

The /me/drive/special/approot path provides a dedicated storage location that’s automatically created and isolated to your Azure Entra ID app registration. This makes it ideal for storing JSON configuration for an SPFx web part without deploying additional infrastructure. In this post, we’ll look at how to configure permissions, access the endpoint from SPFx, and read/write configuration files using Microsoft Graph.

In order to demonstrate how to use this special Microsoft Graph endpoint, I’ve created a sample web part that you can find here. The sample will allow the user to specify the content of the configuration file and also offer the ability to save or load the configuration from the Graph API.

Visual appearance

Starting with the visual appearance of the solution, here you can see the web part:

The web part is composed of:

Save Config: this button is used to save the input of the text field to the Graph API.
Load Config: this button loads the configuration file from the Graph API.
Text area: used to insert the value to be saved to the configuration file.

For example, it’s possible to specify the following JSON:

and saving it using the Save Config button. The user will receive a message confirming the operation success:

Sending the content of the file to the /me/drive/special/approot Graph endpoint will save a file in the following OneDrive folder:

The created file will look like the following:

The name of the file is defined in the web part code, it’s totally customizable and can be decided by the developer, in this sample it’s a JSON file.

Show me the code

I won’t cover all the web part’s code, if you are interested in digging the whole code you can check the full sample solution code here.

In detail, there’s a Graph service which is in charge of execute requests against the /me/drive/special/approot Graph endpoint.

First of all, to execute the requests, it’s needed to create a Graph client and to create it is enough to use the web part’s context:

private async getGraphClient(): Promise<MSGraphClientV3> {
    if (!this.graphClient) {
        this.graphClient = 
          await this.context
                .msGraphClientFactory
                .getClient("3");
    }
    return this.graphClient;
}

Once that the graphClient is available, it’s possible to interact with the Graph APIs.

To save the specified JSON there’s a specific uploadFile method. The interesting section of this method is the following:

await graphClient
  .api(
      `/me/drive/special/approot:/${encodeURIComponent(fileName)}:/content`,
  )
  .version("v1.0")
  .header("Content-Type", contentType)
  .put(content);

This will create a file with the specified fileName and the content as text.

The other operation, needed in this sample, is the one to read the content of the file from the endpoint. The interesting section of the readJsonFile method is the following:

await graphClient
  .api(
      `/me/drive/special/approot:/${encodeURIComponent(itemName)}:/content`,
  )
  .version("v1.0")
  .responseType(ResponseType.TEXT)
  .get();

This partial code retrieves the content of the file with the specific fileName.

Those are the most interesting code sections of this sample, if you’re interested in knowing more check out the full sample on GitHub.

Conclusions

The /me/drive/special/approot Graph endpoint is very useful when it comes to saving configuration for the current user, this is because it doesn’t need anything else such as a SharePoint list to store the user specific configuration.

Hope this helps!

Using the PropertyFieldOrder from the PnP reusable property controls

Guido Zambarda — Wed, 04 Feb 2026 10:00:00 +0000

Introduction

Proceeding our dive into the PnP reusable property pane controls, I want to cover the PropertyFieldOrder control.

The PnP reusable property pane controls is a package that contains a lot of useful controls that can be used in any SharePoint Framework web part’s property pane, if you want to know more about this you can check out the official site here.

To demonstrate the various capabilities of the control, I’ve created a sample solution which you can find here. The sample solution contains a simple web part that shows how the PropertyFieldOrder works.

In few words, the control allows the user to choose the order of a predefined list of entries.

Visual appearance

Starting from how the component appears, I’ve created a sample web part which simply displays the entries used in the PropertyFieldOrder control. To make this sample a little more appealing I’ve imagined a racing with six participants:

The PropertyFieldOrder control is used in the property pane, so let’s see how this is rendered:

As usual, in the sample solution, you can find multiple instances of the control, each instance demonstrate a specific property of the control.

The PropertyFieldOrder control allows to reorder a list of items so here, for example, if Princess Peach throws a tortoise to Bowser, the rank can change to the following (Bowser lose two positions):

This is possible either by:

Clicking on the up and down arrows.
Dragging and dropping the item to the desired position.

Proceeding with other control instances, it’s possible to disable the control. As a result all the arrows and the drag and drop capabilities are disabled.

The control offers the ability to modify the user experience, for example you can hide the up and down arrows, leaving only the ability to drag and drop the items:

In opposition with the previous instance, it’s also possible to disable the drag and drop capability, leaving only the ability to use the arrows to move the items around:

The next instance, is used to highlight the ability to specify a custom Fluent UI icon to be shown instead of the arrows. By default the ChevronUpSmall and ChevronDownSmall icons are used:

If you change the icon names, for example to TriangleSolidUp12 and TriangleSolidDown12 you can have a rendering like the following:

Finally, the last instance present in the sample solution, is the one demonstrating how to perform a custom rendering of each item:

Now, after having an idea of the possibilities, let’s cover more in detail the code used.

Show me the code

Prerequisites

To use the PnP property controls first you need to install the package:

npm install @pnp/spfx-property-controls --save --save-exact

After the installation of the package you can proceed with the following explanations for the PropertyFieldOrder control.

To use the control you have to import it in the web part file with the following statement:

import { 
  PropertyFieldOrder
} from '@pnp/spfx-property-controls/lib/PropertyFieldOrder';

Now, that we have the SharePoint Framework solution ready, let’s cover each single control instance in more detail.

Minimal instance

The minimal instance of the control shows what is the minimum configuration needed to use the PropertyFieldOrder. Each of the following instances will have the same set of basic properties plus the instance specific ones.

PropertyFieldOrder('minimalOrder', {
  key: 'minimalOrderFieldId',
  label: strings.MinimalOrderLabel,
  items: this.properties.minimalOrder,
  textProperty: 'text',
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged
})

In this minimal configuration, I think the two most interesting properties are:

items: which contains the array of items to be shown in the control.
textProperty: which contains the name of the object’s property that contains the text to be displayed.

The other properties are pretty self explanatory, but for the sake of completeness here is a brief explanation:

key: is the identifier of the control instance.
label: is the text shown for the control.
properties: is a binding to the web part properties.
onPropertyChange: is a binding to the onPropertyPaneFieldChanged method.

Disabled instance

In case you need to disable the control that’s easily done using the disabled property specifying a boolean value:

PropertyFieldOrder('disabledOrder', {
  key: 'disabledOrderFieldId',
  label: strings.DisabledOrderLabel,
  items: this.properties.disabledOrder,
  textProperty: 'text',
  disabled: true,
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged
})

Setting the disabled property to true will disable the control, setting it to false will enable the control.

No arrows instance

Removing the arrows from the user interface might be useful and that’s possible by setting the removeArrows property to true.

PropertyFieldOrder('noArrowsOrder', {
  key: 'noArrowsOrderFieldId',
  label: strings.NoArrowsOrderLabel,
  items: this.properties.noArrowsOrder,
  textProperty: 'text',
  removeArrows: true,
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged
})

No drag and drop instance

In case you find the arrows a nice UI addition but you don’t want to allow users to drag and drop the items around, you can disable this by setting the disableDragAndDrop to true.

PropertyFieldOrder('noDragDropOrder', {
  key: 'noDragDropOrderFieldId',
  label: strings.NoDragDropOrderLabel,
  items: this.properties.noDragDropOrder,
  textProperty: 'text',
  disableDragAndDrop: true,
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged
})

Custom icons instance

This instance demonstrates how to change the default icon for the arrows. The custom icons can be chosen from the Fluent UI ones. In the sample, there are a couple of text boxes to allow users to specify which icon to use for either the two icons.

The properties to specify the custom icons are:

moveUpIconName: the Fluent UI icon name to be used as the up arrow.
moveDownIconName: the Fluent UI icon name to be used for the down arrow.

PropertyFieldOrder('customIconsOrder', {
  key: 'customIconsOrderFieldId',
  label: strings.CustomIconsOrderLabel,
  items: this.properties.customIconsOrder,
  textProperty: 'text',
  moveUpIconName: this.properties.customUpIcon,
  moveDownIconName: this.properties.customDownIcon,
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged
})

Custom render instance

The last instance present in the sample solution is the one allowing to customize the rendering of the items.

In the sample, there is the following array of items:

const defaultMarioCharacters = [
  {"text": "Mario", "icon": "🍄"},
  {"text": "Luigi", "icon": "👑"},
  {"text": "Princess Peach", "icon": "👸"},
  {"text": "Bowser", "icon": "🐲"},
  {"text": "Yoshi", "icon": "🦕"},
  {"text": "Toad", "icon": "🍄"}
];

For each item, there are a text and an icon properties. Say that we want to display the icon near the text inside of the PropertyFieldOrder control, that is possible by setting the property onRenderItem:

PropertyFieldOrder('customRenderOrder', {
  key: 'customeRenderOrderFieldId',
  label: strings.CustomRenderLabel,
  items: this.properties.customRenderOrder,
  onRenderItem: this.renderMarioCharacter,
  properties: this.properties,
  onPropertyChange: this.onPropertyPaneFieldChanged,
})

In the sample, the method used for rendering the items is the following one.

private renderMarioCharacter = (
  item: {
    text: string, icon: string
  },
  index: number): JSX.Element => {

  return React.createElement('span', {
    style: { display: 'flex', alignItems: 'center' }
  },
    React.createElement('span', {
      style: { marginRight: '8px', fontSize: '16px' }
    }, item.icon),
    item.text
  );
}

The method will simply create a span element and putting the icon inside another span element, alongside the text of the item.

Conclusions

The PropertyFieldOrder control is an awesome ready to use and customisable control. With this you can quickly allow users to order items without having to develop all the necessary code yourself.

If you’re interested in knowing more, you can check out the official documentation here.

Hope this helps!

Render a Mermaid diagram in an SPFx web part

Guido Zambarda — Wed, 14 Jan 2026 10:00:00 +0000

Introduction

Mermaid is quite useful, no doubt about that. It might also be useful to display diagrams in a SharePoint Online site. So, why not displaying a mermaid diagram in an SPFx web part?

If you don’t know Mermaid you can have a look here.

Visual appearance

Let’s start having a look at a sample solution I’ve prepared. The solution is composed of a web part that allows, through the property pane, to configure the diagram to be shown.

You can find the code here.

First of all, in the following screenshot, you can see how the web part displays:

This web part, as said, is configured through the property pane:

The property pane allows to configure different properties divided in two different sections:

Configuration
- Title: the title to be displayed for the web part.
- Mermaid Diagram: the actual Mermaid diagram to be displayed.
Styling
- Show Title: allow to hide or display the title of the web part.
- Show Border: allow to hide or show the border of the web part.

To have a better user experience, I’ve used the PropertyFieldCodeEditor (more here) from the PnP reusable property pane controls (more here) in order to allow code editing inside the property pane.

For example, it’s possible to specify a Mermaid code in the property pane with a very nice code editor:

Once set the Mermaid diagram, you can have it displayed directly in the web part:

If you want some more idea of the capabilities, have a look at the readme file of the project here.

Show me the code

Now that you have a clear understanding of the appearance of the web part, let’s cover how to implement it.

To render a Mermaid diagram, first you need to install the mermaid package:

npm i mermaid

I won’t cover all the code here, if you’re interested in having a look at the whole project you can find it here.

After installing the package, you need to import it into your component:

import mermaid from 'mermaid';

After importing the package, you will need to initialize Mermaid:

mermaid.initialize({
  startOnLoad: false,
  theme: 'default',
  securityLevel: 'strict',
  htmlLabels: false
});

After initialization, you can use the package to render the actual SVG and insert it into the target HTML element:

const { svg } = await mermaid.render(
  diagramId,
  this.props.mermaidDiagram
);

The arguments for the Mermaid render method are:

diagramId: which is simply a unique ID for the diagram.
this.props.mermaidDiagram: is the actual text of the Mermaid diagram to be rendered.

After the generation of the Mermaid diagram it’s a simple matter of showing it in the web part:

this.diagramRef.current.innerHTML = svg;

Conclusions

I think that Mermaid is pretty useful and powerful, particularly when it comes to visualizing complex data and workflows. It can be a very interesting addition to your SharePoint Online site, as it allows users to create diagrams and flowcharts with ease, enhancing the overall user experience.

Hope this helps!

Automate Microsoft MFA login using Playwright

Guido Zambarda — Wed, 17 Dec 2025 10:00:00 +0000

Introduction

During a session at ESPC 25, where I and the awesome Peter Paul Kirschner talked about developing, testing and deploying a SPFx solution, a person asked if Playwright supports MFA: the answer is yes, using a TOTP.

This article wants to be an answer to that person and to everyone who wants to use Playwright but has strict company policies regarding MFA.

Requirements

I think that’s obvious but, in order to use MFA (Multi-Factor Authentication) in Playwright, we need MFA to be set up correctly.

More specifically, we need an MFA-enabled account configured to utilize an authenticator app with a time-based one-time password (TOTP) system in place.

The TOTP itself is a temporary code generated through an algorithm that changes every 30 seconds. This dynamic nature of TOTP codes adds an extra layer of protection, making it significantly harder for unauthorized users to gain access. The codes are only valid for a brief period, ensuring that even if someone were to intercept a code, it would quickly become useless.

The TOTP algorithm works by generating a temporary code using a secret key (which is shared between the server and the authenticator app) and the current time, ensuring that each generated code is unique and time-sensitive.

To implement this in a testing environment with Playwright, we can leverage a powerful library for Node.js called OTPAuth. This library simplifies the process of generating TOTP codes, and it can be seamlessly integrated into our automation scripts. By utilizing OTPAuth, we can efficiently create the required TOTP codes needed for the login process in our automated test cases.

Add TOTP to an account

To add a TOTP to an account, you need to go to the specific account’s security settings.

First, go to the Security info page of the account you want to use.

Click the Add sign-in method button:

Select Microsoft Authenticator and click on Add :

Click on the Set up a different authenticator app link:

In the following dialog, click on the Next button:

Click on the Can’t scan the QR code? link

Copy the Secret key and keep it safe (don’t share it) as you will need it later:

Generate TOTP

To automatically generate a TOTP we will use the otpauth package available using NPM.

To generate a TOTP you will need to import the package:

import * as OTPAuth from "otpauth";

After this, you will need to instantiate the TOTP class with the needed configuration. In the sample I’ve used the following code:

let totp = new OTPAuth.TOTP({
  issuer: "Microsoft",
  label: process.env.MFA_USERNAME,
  algorithm: "SHA1",
  digits: 6,
  period: 30,
  secret: process.env.MFA_TOTP_SECRET,
});
const code = totp.generate();

The above code is used to generate a new TOTP using a specific secret. This secret is the one copied before.

To avoid having the secret hard coded you can set it into the .env file and reuse where needed.

Playwright configuration

Now, that we have set up the TOTP and have understood how to generate a new TOTP automatically, it’s possible to configure the login in Playwright.

In the playwright.config.ts file, in the projects section, you can configure a step for handling authentication which can be performed for each other steps.

For example:

export default defineConfig({
  // omitted for brevity ...
  projects: [
    {
      name: "setup",
      testMatch: /mfa.setup.ts/
    },
    {
      name: "Chromium",
      // omitted for brevity ...
      dependencies: ["setup"], // Will run first
    }
  // omitted for brevity ...

In the mfa.setup.ts file, aside of the rest of the code for handling the login, you can then use the code we’ve seen in the previous section to fill in the code:

const otpInput = await page.waitForSelector("input#idTxtBx_SAOTCC_OTC");

let totp = new OTPAuth.TOTP({
  issuer: "Microsoft",
  label: process.env.MFA_USERNAME,
  algorithm: "SHA1",
  digits: 6,
  period: 30,
  secret: process.env.MFA_TOTP_SECRET,
});

const code = totp.generate();
await otpInput.fill(code);

And you’re ready to execute your tests!

Conclusions

MFA can be challenging, but luckily is quite simple to setup and use it with Playwright! In this way you can be compliant with your company policies and still have a nice and running testing setup!

If you need to have a look at how I’ve set up the project you can find it on GitHub here on the mfa-support branch.

Hope this helps!