DEV Community: Guido Zambarda

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!

Copying Arrays in TypeScript: Spread vs Deep Linking

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

TLDR : use the spread operator for arrays of non-object items, otherwise you need to copy the array breaking the deep link of the objects using, for example, JSON.parse and JSON.stringify.

If you’re interested in knowing more keep reading!

With this post I want to remind (mostly to myself) that there are different ways of copy an array. Sometimes, the behavior can be odd, and then you suddenly realize that the problem was the way you copied the array!

I know, probably this is not an exciting article, but it might be helpful to someone.

In the worst case scenario, I will read it myself in the future!

I’ve created a sample app project using the following command:

npx create-next-app@latest

After some editing I’ve created a very ~~ugly~~ helpful example of how to copy an array and the main difference between a simple array and a complex one.

In the first example, I’ve created a number array and in the second I’ve created an object array. The buttons will copy the source array to the destination array and then update an element of the destination array.

The button Copy with spread operator, as it states, the copy will be performed using the spread operator for both the source arrays:


const tempArrayOfNumbers = [...sourceArrayOfNumbers];
tempArrayOfNumbers[2] = 100;
setDestinationArrayOfNumbers(tempArrayOfNumbers);

const tempArrayOfObjects = [...sourceArrayOfObjects];
tempArrayOfObjects[2].name = `${tempArrayOfObjects[2].name} - changed!`;
setDestinationArrayOfObjects(tempArrayOfObjects);

Using the spread operator will work fine with arrays that are not containing objects. In case the array contains objects, a deep link to the object reference is maintained so the arrays will be different but both will point to the same object reference for each item…long story short: if you update an object in the destination array also the relative object of the source array gets updated!

The button Copy without deep linking, on the other hand, creates the copy using the technique of transforming the source array in a string using JSON and then parsing it back to an array of objects. In this way every reference will be lost and the updates on an item don’t reflect on the source item.

const tempArrayOfNumbers = JSON.parse(JSON.stringify(sourceArrayOfNumbers));
tempArrayOfNumbers[3] = 42;
setDestinationArrayOfNumbers(tempArrayOfNumbers);

const tempArrayOfObjects = JSON.parse(JSON.stringify(sourceArrayOfObjects));
tempArrayOfObjects[3].name = `${tempArrayOfObjects[3].name} - changed!`;
setDestinationArrayOfObjects(tempArrayOfObjects);

The result will be like the following:

If you want to play with the sample you can find it here on GitHub.

Hope this helps!

Access is denied (0x80070005 (E_ACCESSDENIED)) while provisioning template with PnP PowerShell

Guido Zambarda — Wed, 29 Oct 2025 10:30:00 +0000

Introduction

By utilizing the PnP PowerShell module, users can harness the power of scripting to automate tasks, reduce manual errors, and manage SharePoint resources effectively.

This approach not only saves time but also enhances consistency across different environments. Additionally, leveraging this powerful tool allows for customization options that can align with specific project requirements.

If you’re interested in knowing more about PnP PowerShell, have a look at the official site here.

To provision a site template with PnP PowerShell, you will have simply to invoke the correct command, for example the following one:

Invoke-PnPSiteTemplate -Path "Provisioning-template.xml"

While this approach is a must go for, sometimes errors pop up, in fact today I’ve faced the following error:

Invoke-PnPSiteTemplate: Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))

So, let’s cover how I faced this issue.

Debugging

To understand what is happening, since the error is not friendly at all, I’ve enabled the trace logging. You can do this with the following command:

Set-PnPTraceLog -On -LogFile log.txt -Level Debug

In this example, this command will save all the debugging logs to a file named log.txt.

This allowed me to scan the logs and finding out the following rows (cleaned up a little bit for better reading):

[Debug] Updating field {GUID} in site

[PnP.Framework] [0] [Error] ExecuteQuery threw following exception: Microsoft.SharePoint.Client.ServerUnauthorizedAccessException: Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))

Turned out

In my case, it turned out that the issue was generated by the field _ExtendedDescription present in my template file.

After banging my head on a wall for a while I understood what was happening.

I discovered that the issue was generated from a setting of the SharePoint site, setting the DenyAddAndCustomizePages to false resolved the issue!

Set-PnPTenantSite -Url "<your site URL>" -DenyAddAndCustomizePages:$false

Conclusions

It seems that the setting DenyAddAndCustomizePages prevent updating some field so, if the next time you’re provisioning a site template with PnP PowerShell keep this in mind! I hope that this article helps you avoiding banging your head like I did! And if it’s not, let’s connect on socials and discuss your issue!

Hope this helps!

SPFx extensions: discover the field customizer

Guido Zambarda — Wed, 15 Oct 2025 09:00:00 +0000

Introduction

SharePoint Framework offers different extension project types, for example the Application customizer (more here), those extensions allow customization of the standard SharePoint Online UI/UX. With this article I will cover the field customizer extension.

This extension allows customizing the appearance of a specific field of a SharePoint Online list.

To demonstrate the use of a simple field customizer I’ve created a sample solution that you can find here.

Visual appearance

First thing first, let’s see how the sample solution displays!

Following, the list without the field customizer, pay attention to the Done column which displays a percentage of completion:

And here with the field customizer in action:

As you can see, the numeric value is displayed as a a progress bar with a different color for different value ranges.

Note: This is just a simple sample to demonstrate how to use this SPFx extension. The possible customizations can be way more complex than this.

Now, let’s cover how to achieve this!

Show me the code

Creating the solution

To create the solution, there are a couple of different methods, I will not cover those in detail here because it’s not the topic of this article, but those are:

using the VSCode extension SharePoint Framework Toolkit. This extension offers a very nice UI to allow the creation of the solution. You can find it here.
using Yeoman generator. This is a CLI tool, if you prefer using command line tools. I wrote an introductory article about it a while ago, you can find it here.

Now, let’s see the code in detail.

Field customizer highlights

When the solution is created, the field customizer extension’s class extends the SPFx BaseFieldCustomizer. The class signature will be like the following:

export default class BasicFieldCustomizerFieldCustomizer
  extends BaseFieldCustomizer<IBasicFieldCustomizerFieldCustomizerProperties> {

Inside the class, the method used to define how the render of the field appears is the onRenderCell:

public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
  // Retrieve the field value
  const percentage: unknown = event.fieldValue;

  const basicFieldCustomizer: React.ReactElement<IBasicFieldCustomizerProps> = React.createElement(BasicFieldCustomizer, 
{
  percentage
} as IBasicFieldCustomizerProps);

  ReactDOM.render(basicFieldCustomizer,
    event.domElement);
}

The method will render the React component that will actually define how the field value will be rendered.

I will not cover the whole implementation of the BasicFieldCustomizer here, let’s just say that it creates a div element with a specific color based on the field value. If you’re interested in knowing more about the component you can check the code here.

After updating the code as you need, the next thing to configure is the serve.json file. This file is used for testing purposes and allows to define where to execute the tests.

You can specify a custom configuration, if there is no need of a specific one you can configure the default one. For example, in the sample solution, I’m using the default configuration as following:

"serveConfigurations": {
  "default": {
    "pageUrl":
      "https://{tenantDomain}/SitePages/myPage.aspx",
    "fieldCustomizers": {
      "Done": {
        "id": "c6305766-23e2-4fac-9bd2-fe9b80eb82de",
    "properties": {}
      }
    }
  },

The important configurations here are:

pageUrl: the URL of the page where you want to test your field customizer. The {tenantDomain} placeholder is automatically overridden if you have specified the environment variable (more on that here), otherwise you can just copy and paste the full URL for the target page in the SharePoint Online site.
Inside the fieldCustomizers object, you need to create an object with the internal name of the field you’re customizing and this object, inside the id property, contains the id of the field customizer (which can be found in the field customizer manifest JSON file).

After configuring the serve.json file, executing the following command will open a browser window that points to the pageUrl specified in the configuration:

gulp serve

After the browser window opens, you will be asked to load or not the debug scripts:

Clicking on the “Load debug scripts” button, the needed files are loaded and you should already see your field customizer in action!

Hint: if the field customizer is not loading, try adding the following parameter to the query string:

&allowSpfxDevFallback=true

If the field customizer is still not loading, check that:

The pageURL inside the serve.json file is pointing to the correct page.

The column internal name used in the serve.json file is the same of the target SharePoint Online column and that the column is visible in the current view.

The id property of the field customizer object used in the serve.json file is the same as the manifest JSON file of the field customizer.

Conclusions

The field customizer is another useful extension of the SharePoint Framework. It will enable developers to easily customize SharePoint Online and create useful and unique UI/UX.

If you’re interested in discovering plenty of examples regarding the field customizer, have a look here, filter by “field customizer”, and enjoy the community work!

Hope this helps!

How to Use Image Helper API in SharePoint Framework

Guido Zambarda — Wed, 01 Oct 2025 09:00:00 +0000

Introduction

The Image Helper API has been introduced with the version 1.14 of the SharePoint Framework and it allow to generate a URL to an image that will be close to requested site, this can be useful if resizing operations are required, and also the image might load faster because of caching. To use the Image Helper API the source image will have to be stored in SharePoint Online.

Currently, if the requested width is not one of the supported values, the resulting image may be of a different dimension. The documentation states that the supported widths (in pixels) are the following:

200
400
960
1600
2560

As usual, I’ve created a sample solution to demonstrate how the Image Helper API works, you can find it here.

Visual appearance

The visual appearance of the solution is as follows:

At the top there’s a width selector with some default values, right after it there’s the PnP ImagePicker control. This control will help users selecting the images provided out-of-the-box or the ones from the SharePoint Online sites available to the user.

The last section, will show the processed image and the resulting URL retrieved from the call to the ImageHelper.convertToImageUrl function.

To show the result, here is an example with a default image that is resized to the 400px width:

As you can see the generated SharePoint URL contains many parameters and settings. For example, in the above screenshot, the URL has the following structure:

https://<tenant>.sharepoint.com/_api/v2.1/shares/<drive id>/driveItem/thumbnails/0/c400x99999/content?prefer=noRedirect,extendCacheMaxAge&clientType=modernWebPart&format=webp

In the URL, the section that is defining the size of the generated image is the c400x99999 string. This string specify to the API what’s the desired width and height of the image. The 400 value is the one specified via the dropdown of the sample solution, the 99999 value is specified because no desired height has been specified when calling the convertToImageUrl function.

Show me the code

To use the convertToImageUrl method from the ImageHelper class you will first have to import the SPFx package:

import { ImageHelper } from '@microsoft/sp-image-helper';

The package should already be available when you create the solution, if that’s not the case you can install it with the following command:

npm install @microsoft/sp-image-helper

To quickly allow the picture selection I’ve used the ImagePicker from the PnP reusable React controls.

If you don’t know the PnP reusable React controls package already you can have a look at the official site here.

To actually resize the image with the ImageHelper class you can use the following code:

ImageHelper.convertToImageUrl({ sourceUrl: imageUrl, width: selectedWidth })

The method accepts an object where it’s possible to specify:

sourceUrl of the original image, this is a required parameter.
width representing the wanted image size, this is also a required parameter.
height which is the desired image height, this is an optional parameter and is suggested, if possible, to avoid it for performance reasons.

Conclusions

The Image Helper API is an out-of-the-box functionality that may be of use if you need to show and resize images, that come from SharePoint Online, in your SharePoint Framework solution. It’s easy and straightforward to use. The only downside, in my opinion, is that not always the requested size is the final size of the image so be aware of this possibility.

If you’re interested in knowing more about this you can check the official documentation here.

Hope this helps!