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:
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>;