Introduction

Proceeding our dive into the PnP reusable property pane controls I want to cover the PropertyFieldViewPicker 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 PropertyFieldViewPicker works.

In few words, the control allows the user to select one or multiple views from a specific list in a SharePoint site.

Visual appearance

As said, I’ve prepared a sample solution to demonstrate the use of the control. In this section I want to cover what’s the visual appearance of the instances of the control.

Since the PropertyFieldViewPicker is based on a specific list there are a couple of pages in the configuration pane. In the first page there’s the ability to select the list from which load the views data.

In detail this is the first page of the property pane, here the user can select what’s the list from which to load the views.

In the second page there are multiple instances of the control.

Let’s cover those a little bit more in detail.

The minimal view instance shows what is the basic behavior of the control. Here you can choose a view from the selected list. The control displays a dropdown with selectable items, one for each view defined in the list.

The selected view instance simply shows that’s possible to pre-select a value from the available options.

As usual there’s the ability to disable the control. When disabled it will render as follows.

A useful setting is the ability to order the views. Here you can see the result, differently than the minimal view instance the options are ordered by the view titles.

In some cases it might be handy to hide specific views. This instance shows what happens if a specific view is excluded from the available views. Guess what? It won’t be displayed!

Another ability is the one to specify a custom filter to be applied to the retrieved views. In this case the “All items” and the “Private view” are hidden from the selectable options.

One last thing is that it’s possible to perform validation when the user select an option. In this example it validates that the user select an option from the control.

Now that the visual aspects of the control are covered let’s discover what’s the code behind it!

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

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

import {
  PropertyFieldViewPicker,
  PropertyFieldViewPickerOrderBy,
} from "@pnp/spfx-property-controls/lib/PropertyFieldViewPicker";

The PropertyFieldViewPickerOrderBy is not required, unless you want to sort the options.

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

Minimal view

This is the instance with the minimal configuration needed to instantiate the control.

Starting with the code, here is the code to create this instance of the control:

PropertyFieldViewPicker("minimalView", {
  label: strings.MinimalViewPickerFieldLabel,
  listId: this.properties.list,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  key: "minimalViewPickerFieldId",
})

The properties of this instance are:

• label: This is the title displayed for the instance.
• listId: is the SharePoint list ID. In this sample is retrieved using the PnP PropertyFieldListPicker control.
• onPropertyChange: this property accepts the method that handles the change of the specified property of the web part. This will be binded with the web part’s onPropertyPaneFieldChanged method.
• properties: this property accepts the web part’s properties thus the value specified will be this.properties.
• context: accepts the web part context to be aware of the current SharePoint Online context. To retrieve it simply specify this.context as the value of the property.
• key: this is a string that uniquely identify the instance of the control.

These properties are used in all the other instances, hence in the other instances I won’t cover those properties again but rather will cover a specific property.

Selected view

This instance shows how it’s possible to select a specific option from the available ones.

PropertyFieldViewPicker("selectedView", {
  label: strings.SelectedViewPickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.selectedView,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  key: "selectedViewPickerFieldId",
})

As you can see to select a specific view you will have to simply specify a value to the selectedView. In this case the value is retrieved, and maintained across page refreshes, using the selectedView property of the web part.

The value would be the view ID. If needed, in case there is more than one view selected, it can also accepts an array of string containing the IDs of the views.

Disabled views

In some cases it might be useful to disable the control. To achieve this, the property disabled can be set to true.

PropertyFieldViewPicker("disabledView", {
  label: strings.DisabledViewPickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.disabledView,
  disabled: true,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  key: "disabledViewPickerFieldId",
})

Order by views

If needed there’s the possibility to order the options. By default the options are ordered by the view IDs, but if needed it’s possible to specify a different ordering.

PropertyFieldViewPicker("orderByView", {
  label: strings.OrderByViewPickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.orderByView,
  orderBy: PropertyFieldViewPickerOrderBy.Title,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  key: "orderByViewPickerFieldId",
})

The available ordering options are defined in the PropertyFieldViewPickerOrderBy enumerator, currently the available values are:

• Id: order by the ID of the views.
• Title: order by the title of the views.

Excluded views

Through the property viewsToExclude it’s possible to define an array of strings containing the title of the views. For instance, in this code sample, the “All Items” view is excluded from the available options.

PropertyFieldViewPicker("excludedView", {
  label: strings.ExcludedViewPickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.excludedView,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  viewsToExclude: ["All Items"],
  key: "excludedViewPickerFieldId",
})

Filtered views

Aside of the views to exclude it’s possible to define a filter property. The value for this property is an OData filter query and allows a more customizabile filter.

PropertyFieldViewPicker("filterView", {
  label: strings.FilterViewPickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.filterView,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  filter: "Title ne 'All Items' and Title ne 'Private view'",
  key: "filterViewPickerFieldId",
})

In the above code the query filters the views whose title is not either “All Items” or “Private view”.

On views retrieved

The control offers the ability to perform custom operations when the views are retrieved. To specify a custom operation it’s possible to define a method and set it to the onViewsRetrieved property. The method will receive either a string or a string array.

PropertyFieldViewPicker("onViewsRetrieved", {
  label: strings.OnViewsRetrievedPickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.onViewsRetrieved,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  onViewsRetrieved: (views) => {
    console.log(views);
    return views;
  },
  key: "viewPickerFieldId",
})

On get error message

Using the property onGetErrorMessage it’s possible to define a custom operation to perform validation. The method will consider the validation passed if an empty string is returned. In case the method returns a string with a text that will be the error message displayed.

PropertyFieldViewPicker("onGetErrorMessage", {
  label: strings.OnGetErrorMessagePickerFieldLabel,
  listId: this.properties.list,
  selectedView: this.properties.onGetErrorMessage,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  context: this.context,
  onGetErrorMessage: (view) => {
    if (view === "NO_VIEW_SELECTED") {
      return "A view must be selected.";
    }
    return "";
  },
  key: "viewPickerFieldId",
})

In this method a check is performed against the selected view. If the selected value is “NO_VIEW_SELECTED”, which is the empty option, an error message will be displayed.

Conclusions

The PropertyFieldViewPicker control allows developers to effortlessly create a view picker field. Its usefulness lies in its ability to streamline the process of selecting and managing list views within a web part’s property pane, enhancing user experience and productivity. By integrating this control, developers can provide a more intuitive and efficient interface for users to interact with SharePoint list views.

This post don’t cover all the available properties of the control, if interested in knowing more you can check out the official documentation here.

Hope this helps!