DEV Community: Guido Zambarda

Pro-code Declarative Agent with SharePoint knowledge base

Guido Zambarda — Wed, 24 Jun 2026 11:30:00 +0000

Introduction

[Disclaimer] In this post I will not cover how to create a declarative agent, if you’re interested in knowing the basics you can check my previous post here.

When creating declarative agents the pro-code way, there are plenty of possibilities to customise your agents. In this post, I will cover how to add a SharePoint Online site as knowledge base for a declarative agent.

The sample declarative agent I’ve created is based on a SharePoint Online site that contains Microsoft Copilot Studio licensing PDFs, let’s see how it displays and how it works.

If you’re interested in checking the sample code you can find it here.

Visual appearance

Nowadays I think everyone already know what is the interface for a declarative agent, however, just to give a little bit of context, I want to show you a couple of screenshots.

As every declarative agent we have a chat-like interface:

To speed up the testing phase I’ve added a suggested prompt that query the agent about the licensing options of Microsoft Copilot Studio.

As a result the agent will list all the available licensing types of MCS in the PDFs uploaded to my SharePoint Online site.

Show me the code

In this particular sample, there isn’t much work to do in order to support the SharePoint Online site as knowledge base, you simply have to define the capability to reach SPO and specify an identifier of the resource.

In the declarativeAgent.json file, alongside the name, description and instructions properties, it’s also possible to define the capabilities property.

This capabilities property contains the capabilities that the agent will have. To define a SharePoint Online site as knowledge base, you simply have to define an object with name OneDriveAndSharePoint, like the following:

 "capabilities": [
   {
     "name": "OneDriveAndSharePoint",
     "items_by_url": [
       {
         "url": "https://<your tenant>.sharepoint.com/sites/<your site>"
       }
     ]
   }
],

The object specify that the agent has the capability to access OneDrive and SharePoint Online. This object support two ways to define the items, one is the one you can see in the code snippet above using items_by_url, the other way is to use items_by_sharepoint_ids.

Using the items_by_url will simply require to have the full URL to the item you want to use as knowledge base. If you don’t specify any, the whole tenant will be accessible, if you specify a SharePoint Online site the whole content of the site will be accessible to the declarative agent.

Using the items_by_sharepoint_ids is slightly different, you will require to specify a more complex object that also contains the IDs to identify the target site, library or item. To have an idea, here are some of the properties with placeholder values:


"items_by_sharepoint_ids": [
  {
    "site_id": "<site-id>",
    "list_id": "<list-id>",
    "unique_id": "<unique-id>"
  }
]

This is just to give you an idea of the possibilities, there are also other properties that I will not cover here but that you can check the JSON schema on the official documentation here.

Conclusions

Adding a knowledge base to a declarative agent created with a pro-code approach is a very easy and straightforward process. Using SharePoint Online as knowledge source will give plenty of possibilities to create specialised site(s) to be used by declarative agents as knowledge source(s).

If you’ve never created a declarative agent I suggest that you start with my previous post or navigate to the Copilot dev camp, which is a very comprehensive site with multiple ways of creating your declarative/custom engine/low-code/no-code agents

Hope this helps!

Use the FilePicker from the PnP reusable React controls

Guido Zambarda — Wed, 10 Jun 2026 15:00:00 +0000

Introduction

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

The FilePicker control is a powerful and versatile component that allows users to browse and select files from various sources within your SharePoint Framework solutions. Whether you need to let users pick files from SharePoint document libraries, OneDrive, recent files, or even upload new files, the FilePicker control has you covered.

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

Visual appearance

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

The FilePicker control provides a clean and intuitive interface for file selection, starting from a simple button like the following one:

That, once clicked, opens a panel where it’s possible to select the file(s) to be selected.

When you click the button to open the file picker, a panel opens displaying multiple tabs that represent different possible file sources:

– Recent : Displays recently modified files based on search results.

– Stock Images : Access to stock image libraries.

– OneDrive : Select files from the user’s OneDrive.

– Site : Select content from the current site.

– Upload : Upload a single file from your local drive.

– Upload Files : Upload multiple files at once.

– From a Link : Paste a link to a file.

The control also includes breadcrumb navigation for easy folder traversal and implements paged data loading to ensure optimal performance even with large document libraries.

Minimal sample

The minimal configuration sample just demonstrates the very basic configuration of the control.

Aside of the grey area underneath the control, which is just used to list the selected file(s), the control renders a label and a button which are customisable.

Custom button icon

This sample highlights the ability to change the button into a custom icon.

onChange handler

The onChange sample demonstrate how to use the corresponding property in order to catch when the selection change.

In this sample, the onChange event just triggers a message bar and also a new row in the console logging to track the change event:

onCancel handler

The onCancel sample shows how to use the event in order to track when the panel is cancelled.

As the previous sample, this one shows a message bar when the panel is cancelled alongside a new row in the browser’s console.

File type restrictions

This sample demonstrates how to restrict the selectable files.

This simply doesn’t show anything special, but when the panel opens it will allow the selection of only DOCX or PDF files, this is totally customisable and I will cover that in the code section.

Required field

As many of the components offered by the PnP reusable React controls, it’s also possible to specify that the control is a required one:

Disabled state

When needed, it’s possible to disable the control:

Hidden control

It’s also possible to not display the default button and trigger the panel from a hidden control. In this sample I’ve used another button to toggle the visibility of the panel:

Tab visibility control

This particular instance shows how it’s possible to select which tab to show or hide from the panel, for example if you choose the following:

The resulting panel will be the following:

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 FilePicker control.

To use the control you first need to import it:


import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/FilePicker';

Actual implementation

In this sample solution, I’ve created multiple instances of the control to demonstrate different configurations and use cases of the FilePicker control. Let’s explore each one!

Minimal Configuration

The most basic implementation requires only two properties:


<FilePicker
  label="Select a file"
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  context={this.props.context as any}
/>

Key properties:

onSave: Handler called when a file is selected and saved.
context: The web part context.

The label property is not really required, but without specifying it there won’t be any text displayed.

This minimal configuration gives you a fully functional file picker with all tabs enabled by default.

Custom Button Icon

Instead of a standard button, you can display an icon button using the buttonIcon property. You can further customize the icon appearance with buttonIconProps:


<FilePicker
  label="Pick Document"
  buttonIcon="FabricFolder"
  buttonIconProps={{ 
    iconName: 'FabricFolder',
    styles: { root: { fontSize: 20, color: '#0078d4' } }
  }}
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  context={this.props.context as any}
/>

Key properties:

buttonIcon: Specifies which Fluent UI icon to display.
buttonIconProps: Additional properties for customizing the icon (size, color, etc.).

onChange handler

The onChange handler is triggered whenever the file selection changes in the picker panel, even before the user clicks save. This is useful for real-time validation or preview.


<FilePicker
  label="Select a file"
  buttonLabel="Browse Files"
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  onChange={(files) => {
    console.log('File selection changed:', files);
    this.setState({ selectionChanged: true });
  }}
  context={this.props.context as any}
/>

onCancel handler

The onCancel handler is called when the user closes the FilePicker panel.


<FilePicker
  label="Select a file"
  buttonLabel="Browse Files"
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  onCancel={() => {
    console.log('File picker cancelled');
    this.setState({ cancelled: true });
  }}
  context={this.props.context as any}
/>

File Type Restrictions

Use the accepts property to restrict file selection to specific file types. This example only allows DOCX and PDF files.


<FilePicker
  label="Select document (DOCX or PDF only)"
  buttonLabel="Browse Files"
  accepts={['.docx', '.pdf']}
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  context={this.props.context as any}
/>

The accepts property support an array of string representing the extensions to be supported.

Required

The required property adds a visual indication that file selection is mandatory.


<FilePicker
  label="Select a required file"
  buttonLabel="Browse Files"
  required={true}
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  context={this.props.context as any}
/>

The required property is a boolean flag that adds an asterisk (*) to the label. This is particularly useful in forms where file upload is mandatory.

Disabled

The disabled property prevents user interaction with the FilePicker.


<FilePicker
  label="Disabled file picker"
  buttonLabel="Browse Files"
  disabled={true}
  onSave={(files) => this.setState({ selectedFile: files?.[0] })}
  context={this.props.context as any}
/>

This is useful if you need to conditionally disable the picker based on form state, user permissions, or other business logic.

Hidden Control with Programmatic Panel Control

The hidden property hides the picker button while still allowing you to control the panel visibility programmatically using isPanelOpen.

In the sample solution, there is a button to handle the state change:


<DefaultButton
  text="Toggle Picker Visibility"
  onClick={() => this.setState({ panelOpen: !this.state.panelOpen })}
/>

And then, there is the control that displays the panel only when the previous button is clicked:


<FilePicker
  label="Hidden file picker (controlled programmatically)"
  buttonLabel="Browse Files"
  hidden={true}
  isPanelOpen={this.state.panelOpen}
  onSave={(files) => {
    this.setState({ selectedFile: files?.[0], panelOpen: false });
  }}
  onCancel={() => this.setState({ panelOpen: false })}
  context={this.props.context as any}
/>

Tab visibility

The FilePicker control allows many customisation, there are a bunch of properties to personalize the available tabs in the panel that allows selection of files.

Following a list of the available tab visibility properties:

hideRecentTab: handle visibility of the RecentTab.
hideWebSearchTab: handle visibility of the WebSearchTab.
hideStockImages: handle visibility of the StockimagesTab.
hideOrganisationalAssetTab: handle visibility of the OrganisationalAssetTab.
hideOneDriveTab: handle visibility of the OneDriveTab.
hideSiteFilesTab: handle visibility of the SiteFilesTab.
hideLocalUploadTab: handle visibility of the LocalUploadTab.
hideLocalMultipleUploadTab: handle visibility of the LocalMultipleUploadTab.
hideLinkUploadTab: handle visibility of the LinkUploadTab.

Conclusions

The FilePicker control is an incredibly powerful and flexible solution for file selection scenarios in SharePoint Framework applications.

Whether you need a simple file picker or a complex file selection workflow with custom validation and UI, the FilePicker control provides all the tools you need. The comprehensive feature set, combined with minimal required code, makes it an essential component for any SharePoint Framework developer working with files.

By leveraging the different configuration options shown in these examples, you can create exactly the file selection experience your users need, while maintaining clean, maintainable code through proper localization and separation of concerns.

In this blog post I didn’t cover all the available properties, if you’re interested in knowing more you can find the official documentation here.

Hope this helps!

New Feature for SPFx extensions: Grouping for ListView command set

Guido Zambarda — Wed, 20 May 2026 15:00:00 +0000

Introduction

The new version 1.23 of the SharePoint Framework brings a couple of new features, one of those features is the introduction of grouping for the ListView command set.

In this post I want to cover how this new functionality works and displays and to do this I’ve created a sample solution that you can find here.

Visual Appearance

Starting with the visual appearance of the grouping feature, following here’s how the grouping appears in a list:

Let’s zoom a little bit to better see how the grouping displays.

In the above screenshot the options Hardware Management and Software Management are groups (with custom icons) that contains other options. For example, in the Hardware Management group there are other three options:

In the Software Management group, on the other side, there are a couple of simple options and another group User Support to demonstrate that it’s possible to have nested groups.

Now that we have an idea of the visual appearance let’s cover how to achieve that.

Show me the code

After covering the visual appearance, let’s cover the code that allows us developers to group the command set items.

I won’t cover how to create a ListView command set here, if you’re interested in knowing how to create a basic extension you can have a look here.

When defining a command, in the extension’s manifest, the structure is like the following:


"SAMPLE_COMMAND": {
  "title": { "default": "Sample command" },
  ""iconImageUrl": "<omitted for brevity>",
  "type": "command"
},

With the newly inserted property group, it’s possible to define that a command belongs to a specific group. For example, the previous example can become the following:


"SAMPLE_COMMAND": {
  "title": { "default": "Sample command" },
  "iconImageUrl": "<omitted for brevity>",
  "type": "command",
  "group": "PARENT_GROUP"
},

The PARENT_GROUPvalue is the actual name of the group.

In order to define that a command is a group instead of a simple command, it’s enough to change the value of the type property to group instead of command, for example:


"SAMPLE_GROUP": {
  "title": { "default": "Sample group" },
  "iconImageUrl": "<omitted for brevity>",
  "type": "group"
}

If you don’t want to check the sample solution on GitHub but still want to have a better view of how this grouping works, here are the commands and groups I’ve used:


"items": {
    "HARDWARE_GROUP": {
      "title": { "default": "Hardware Management" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "group"
    },
    "SOFTWARE_GROUP": {
      "title": { "default": "Software Management" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "group"
    },
    "SUPPORT_SUBGROUP": {
      "title": { "default": "User Support" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "group",
      "group": "SOFTWARE_GROUP"
    },
    "INSTALL_HARDWARE": {
      "title": { "default": "Install Hardware" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "HARDWARE_GROUP"
    },
    "RETIRE_HARDWARE": {
      "title": { "default": "Retire Hardware" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "HARDWARE_GROUP"
    },
    "REPAIR_REQUEST": {
      "title": { "default": "Request Repair" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "HARDWARE_GROUP"
    },
    "INSTALL_SOFTWARE": {
      "title": { "default": "Install Software" },
      iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "SOFTWARE_GROUP"
    },
    "UPDATE_SOFTWARE": {
      "title": { "default": "Update Software" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "SOFTWARE_GROUP"
    },
    "CREATE_TICKET": {
      "title": { "default": "Create Support Ticket" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "SUPPORT_SUBGROUP"
    },
    "REMOTE_ASSIST": {
      "title": { "default": "Remote Assistance" },
      "iconImageUrl": "<omitted for brevity>",
      "type": "command",
      "group": "SUPPORT_SUBGROUP"
    }
  }

Conclusions

The new grouping feature brings a more organized and intuitive experience to the ListView command set. By enabling items to be grouped, the command set becomes more flexible and user-friendly.

If you want to know more about this topic have a look at the official documentation here.

Hope this helps!

Create your first declarative agent the pro-code way with VSCode

Guido Zambarda — Wed, 06 May 2026 09:00:00 +0000

Introduction

Nowadays Microsoft Copilot is THE argument when it comes to the Microsoft tenants, moreover we’re seeing an increase about using agents. Due to this I think it would be a good idea to start covering Copilot and I want to start with a Declarative Agent and since I’m a developer I want to start with the pro-code way of creating one.

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

What we’re building

What I want to cover with this post is a Declarative Agent the pro-code way. All the developers should have their own rubber duck sitting on the desk, but in this times it can be a little “old school” to have one, so in this example I want to create a virtual one!

The agent will be displaying as follows:

The user can interact with it asking questions like:

I am facing an issue in my SPFx solution that I cannot understand

The agent will help the user understanding the issue and reaching a solution without explicitly giving the answer to the issue:

This is just a sample, I know there are quicker ways to resolve issues or understanding why things are not working as expected, but again this is a sample and the actual rubber ducks don’t even reply to developers

Show me the code

Prerequisites

In order to create the Declarative Agent you will need a couple of things:

A Microsoft tenant.
VSCode, which you can find here.
The Microsoft 365 Agents Toolkit extension for VSCode, which you can find here.

This blog post is not about how to setup the environment, but if you’re interested in knowing more you can have a look here skipping the Azure section and installing the extension for VSCode.

If you search, in the extension panel of VSCode, for “Microsoft 365 Agents Toolkit”, you will find the following extension to install:

After installing the extension, if you open it, you will see the following panel:

From here you can start developing your Declarative Agent in the pro-code fashion.

Creating the agent

To create a Declarative Agent with ATK (Microsoft 365 Agents Toolkit), you will have to open a new instance of VSCode, select the extension and click the “Create a New Agent/App” button shown in the following screenshot:

Clicking on the button will open a menu from the command palette where you can select what kind of agent or app you want to build:

In this sample we are using the “Declarative Agent” option, clicking on that option a new menu will open asking how you want to configure your agent:

This Declarative Agent is not relying on any action or connector, so here simply select the “No Action” option. After specifying the option you are prompted to specify the name of the agent, in this case it will be “Rubber duck”:

Finally, you will be prompted for where you want to store your agent.

Keep in mind that you will be selecting the folder where the root folder of your agent will be created.

After selecting the root folder the solution will be scaffolded and a new instance of VSCode will be opened in that location.

Solution structure

The created solution will have a structure like the following:

The appPackage folder includes the Teams application manifest and the GPT manifest, in the sample we have the following:

manifest.json: the manifest of the Teams application that defines the metadata of the declarative agent.
declarativeAgent.json: defines the behaviour and configurations of the declarative agent.
instruction.txt: the actual system prompt for the declarative agent, this is used inside the declarativeAgent.json file instead of writing the full prompt directly into the JSON file.
color and outline PNGs: those are the icons for the agent, keep in mind that:
- color.png: a square coloured image of 192×192 pixels.
- outline.png: a square outlined image of 32×32 pixels.

The env folder contains the environment files used to configure the declarative agent for each specific environment.

One last thing that deserves a mention are the yml files, those files are the main Teams Toolkit (the former name of the Microsoft Agents Toolkit) project files, each is for a specific environment. The main content of the project files are properties and configuration stage definitions.

declarativeAgent.json

The main file for this example is the declarativeAgent.json this contains the following properties:

name: this will be the name of the agent. By default this comes with a suffix taken from the environment file and named APP_NAME_SUFFIX.
description: this contains the description for the agent.
instructions: this will contains the system prompt for the agent. The system prompt can be stored in an external file. By default the value is loaded from the instruction.txt file, to achieve that the value is: $[file('instruction.txt')]

For the sample agent the file contains the following:


{
  "$schema": "https://developer.microsoft.com/json-schemas/copilot/declarative-agent/v1.6/schema.json",
  "version": "v1.6",
  "name": "Rubber duck${{APP_NAME_SUFFIX}}",
  "description": "Sample declarative agent that act as a rubber duck to help developers.",
  "instructions": "$[file('instruction.txt')]"
}

Declarative Agent configuration

Now let’s cover how the agent is configured and this means that, for this sample, we need to only write the system prompt for the rubber duck agent.

As described in the previous section, the system prompt is defined in the instruction.txt file, I won’t copy its content here, but let me explain a little bit its content.

Core behaviour of the system prompt:

Act as a patient listener guiding developers through problems
Encourage step-by-step explanations and reflection
Ask open-ended questions instead of giving immediate solutions
Help break complex problems into smaller parts
Only give direct solutions if explicitly asked or user is stuck

Other sections of the system prompt includes:

Specific interaction style
Narrow down issues with isolation and debugging techniques
Don’t overwhelm with too many questions
Keep responses concise and thoughtful
Prefer guiding over explaining

Conclusions

Building a Declarative Agent the pro-code way, using VSCode and the Microsoft Agent Toolkit, highlights the power of combining familiar development environments with a declarative approach to fully leverage Copilot’s capabilities. This approach also integrates seamlessly into existing development workflows allowing developers to store and manage agents within a source control system, making versioning, collaboration, and long-term maintenance significantly easier and more reliable.

Hope this helps!

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!