Skip to content

Dashboard control

Toolbar component for Microsoft Teams.

Note

As this component is based on @fluentui/react-northstar the main usage scenario is Microsoft Teams projects. You can still use it in non-Teams related projects as well.

Here is an example of the control in action:

Carousel control

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the following modules to your component:
import { Toolbar } from '@pnp/spfx-controls-react/lib/Toolbar';
  • Use the Toolbar control in your code as follows:
<Toolbar actionGroups={{
    'group1': {
      'action1': {
        title: 'Edit',
        iconName: 'Edit',
        onClick: () => { console.log('Edit action click'); }
      },
      'action2': {
        title: 'New',
        iconName: 'Add',
        onClick: () => { console.log('New action click'); }
      }
    }
  }}
  filters={[{
    id: "f1",
    title:
      "Fruits (any sweet, edible part of a plant that resembles fruit, even if it does not develop from a floral ovary)",
    items: [
      { id: "f1f1", title: "Pomes" },
      { id: "f1f2", title: "Drupes" },
      { id: "f1f3", title: "Citruses" },
      { id: "f1f4", title: "Berries" },
      { id: "f1f5", title: "Melons" },
    ],
  },
  {
    id: "f3",
    title: "Cacti",
  },]}
  find={true} />

Implementation

The Toolbar component can be configured with the following properties:

Property Type Required Description
actionGroups TActionGroups yes Toolbar actions groups.
filters TFilters no Toolbar filters.
find boolean no Specifies if searchbox should be displayed.
filtersSingleSelect boolean no Specifies if a user can select only one filter at a time.
onSelectedFiltersChange (selectedFilters: string[]) => string[] no Filter changed handler.
onFindQueryChange (findQuery: string) => string no Search query changed handler.

Type TActionGroups

Provides Toolbar action groups settings

type TActionGroups = {
    [slug: string]: TActions;
};

Type TActions

Provides Toolbar actions settings

type TActions = {
    [actionKey: string]: TAction;
};

Type TAction

Provides Toolbar action settings

Property Type Required Description
title string yes Action title.
iconName string no Action icon name.
multi boolean no For future.
onClick ComponentEventHandler<ToolbarItemProps> no Action onClick handler.

Type TFilters

Provides Toolbar filters settings

type TFilters = ObjectShorthandCollection<TreeItemProps, never>;